WEBDOOD.COM

For me, there are many times where I need to get at the x, y or z value of a -webkit-transform: translate3d({x}, {y}, {z}) property.

I had originally written the below method using .style.webkitTransform and then doing some fancy manipulations to extract out the x, y or z values from the style. However, you will find that elements will not have webkitTransform applied as a “style” to them when it is being set from a css class.

Therefore, I rewrote the method to use getComputedStyle and using its return value for ‘-webkit-transform’.

The interesting thing about this is that it returns a string representation of a WebKitCSSMatrix. Now I had to figure out how to get at the values of x, y and z from this structure.

With some trial and error, I found the following property correspondence:

.m41 – corresponds to the ‘x’ value of a WebKitCSSMatrix
.m42 – corresponds to the ‘y’ value of a WebKitCSSMatrix
.m43 – corresponds to the ‘z’ value of a WebKitCSSMatrix

Here is the main extractedWebkitTranslate3DProperty method, followed by its helper method getStyle:

extractedWebkitTranslate3DProperty

    ///////////////////////////////////////////////////////////////////////////////////////
    // extractedWebkitTranslate3DProperty([object|string] oHTMLElement, string property) //
    // ================================================================================= //
    // Extracts x,y,or z value from a webkitTranslate3D style. Returns a string value.    //
    ///////////////////////////////////////////////////////////////////////////////////////
    function extractedWebkitTranslate3DProperty( oHTMLElement, property ) {
      var retVal = 0;
      if (typeof(oHTMLElement)=="string")  { oHTMLElement = document.getElementById(oHTMLElement); }
      if (property !== undefined) {
        var webkitTransform = getStyle(oHTMLElement,'-webkit-transform');
        if (webkitTransform && webkitTransform!=='none' && webkitTransform.indexOf('matrix') > -1) {
          switch (property.toLowerCase()) {
            case "x" :
              retVal = new WebKitCSSMatrix(webkitTransform).m41;
              break;
            case "y" :
              retVal = new WebKitCSSMatrix(webkitTransform).m42;
              break;
            case "z" :
              retVal = new WebKitCSSMatrix(webkitTransform).m43;
              break;
          }
        }
      }
      return parseFloat(retVal);
    }

getStyle

    ////////////////////////////////////////////////////////////////////////////////
    // getStyle([object|string] oHTMLElement, string cssProperty)                 //
    // ==========================================================                 //
    // Returns value of a cssProperty                                             //
    ////////////////////////////////////////////////////////////////////////////////
    function getStyle(oHTMLElement, cssProperty) {
      if (typeof(oHTMLElement)=="string")  { oHTMLElement = document.getElementById(oHTMLElement); }
      var retVal = "";
      if(document.defaultView && document.defaultView.getComputedStyle){
        retVal = document.defaultView.getComputedStyle(oHTMLElement, null).getPropertyValue(cssProperty);
      } else {
        if (oHTMLElement.currentStyle){
          cssProperty = cssProperty.replace(/\-(\w)/g, function (strMatch, p1){
            return p1.toUpperCase();
          });
          retVal = oHTMLElement.currentStyle[cssProperty];
        }
      }
      return retVal;
    }

Should make a point of posting cool routines like the one below as they are useful to many.

I have seen quite a lot of good examples of folks using (and expanding upon) routines I wrote for some of the Gadgets that ship with Vista (to be found in library.js if you have a Vista Box) and for some of AOL’s (apparently deprecated) Mac OSX Widgets.

Functions like showOrHide, getLocalizedString, getSpinner (emulates Vista-like spinner image) I have seen in use all over the place.

Here is a somewhat badass Date Validator routine I wrote today that takes in either a string date value or an <INPUT> Element Object and validates the date to be formatted as DD-MM-YYYY.

I wrote it for use by a Ruby on Rails application, but it’s pretty handy as a general library function.

var DATE_REGEX  = /^(\d{2})-(\d{2})-(\d{4})$/
////////////////////////////////////////////////////////////////////////////////
//                                                                            //
// validateDate([object|string] oHTMLInputElement) - Validates a date value   //
// ===============================================                            //
//   You can pass in the id to an <input> Element, an actual               //
//   oHTMLInputElement or an actual date value in the form of a string        //
//                                                                            //
////////////////////////////////////////////////////////////////////////////////

function validateDate(oHTMLInputElementOrDateValue) {
  var theDateValueToValidate = "";
  var theValidatedDateValue = false;
  var bIsInputElement = false;
  if (typeof(oHTMLInputElementOrDateValue)=="string")  {
    var oHTMLInputElement = document.getElementById(oHTMLInputElementOrDateValue);
    if (oHTMLInputElement && typeof(oHTMLInputElement=="object") && (oHTMLInputElement.tagName=="INPUT")) {
      theDateValueToValidate = oHTMLInputElement.value;
      bIsInputElement = true;
    } else {
      // Presumably they just passed in a date string
      theDateValueToValidate = oHTMLInputElementOrDateValue;
      bIsInputElement = false;
    }
  } else {
    // They have passed in an Object
    if (typeof(oHTMLInputElementOrDateValue=="object") && (oHTMLInputElementOrDateValue.tagName=="INPUT")) {
      var oHTMLInputElement = oHTMLInputElementOrDateValue;
      theDateValueToValidate = oHTMLInputElement.value;
      bIsInputElement = true;
    }
  }

  // If we have a date value to actually validate, let's get started
  if (theDateValueToValidate != "") {
    var theDateValue = theDateValueToValidate.replace(/\//g,"-");  // Ruby-side only accepts hyphens
    if (DATE_REGEX.test(theDateValue)) {
      theValidatedDateValue = theDateValue;
    } else {
      if (theDateValue.indexOf('-') > -1) {
        var theMonth = theDateValue.split('-')[0];
        var theDay   = theDateValue.split('-')[1];
        var theYear  = theDateValue.split('-')[2];
        // If they've entered a single digit for either Day or Month, pad with zero accordingly
        theMonth = parseInt(theMonth).PadWithZero();
        theDay   = parseInt(theDay).PadWithZero();
        if (theYear.length==2) { theYear = "20" + theYear; }    // If they've entered a two-digit year, assume it's in the 21st century
        theDateValue = theMonth + "-" + theDay + "-" + theYear; // Rebuild the date. Hopefully this will work
        if (DATE_REGEX.test(theDateValue)) {
          theValidatedDateValue = theDateValue;
        }
      }

      // If we get to this point and none of our efforts have worked to format the date
      // as "required", throw an error (if they are using an INPUT element)
      if (!theValidatedDateValue && bIsInputElement) {
        alert("ERROR: Date must be formatted as follows:\n\n\tDD-MM-YYYY\n\nPlease correct before continuing");
        oHTMLInputElement.focus();
      }
    }
  }

  if (bIsInputElement && theValidatedDateValue) {
    oHTMLInputElement.value = theValidatedDateValue;
  }
  return theValidatedDateValue;
}

Hope you find this one useful as well.

Shannon Norrell

Now on GitHub as well