WEBDOOD.COM

CSS3

Javascript extractedWebkitTranslate3DProperty WebKitCSSMatrix

by webdood on Jul.04, 2012, under CSS3, Safari-Specific, Software Development, WebKitCSSMatrix

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;
    }
Leave a Comment :, , , , more...

CSS3 Tooltip Trick using CSS3 :before psuedo element, content attribute and custom data attributes

by webdood on Mar.03, 2011, under CSS3, Software Development

I was looking for a way to make an HTMLElement’s title appear faster in a WebKit application.

Turns out there is a way to capture the “title” attribute of an element using the :before pseudo element and content property, store that value in a div that only appears onhover over the original element. The problem with this technique was that the actual “title” attribute would eventually display.

Therefore, I made use of another CSS3 feature called “custom data attributes” and, rather than storing the title of the element in the “title” attribute, I used “data-title” instead.

Here is a quick example:

<!DOCTYPE html>
<head>
  <style type="text/css">
    .sprocket { position:relative;width:50px;height:50px;background-color:red; }
    .sprocket:before { content:attr(data-title); display:none; }
    .sprocket:hover::before{ width:160px; display:block; border-radius:3px; background-color:#fffdc7; padding:5px; color:black; margin-top:40px; margin-left:20px; -webkit-box-shadow: 3px 3px 3px rgba(193,193,193,.5);}
    .sprocket:hover{ z-index:10; position:absolute; }
  </style>
</head>
<body>
  <div class="sprocket" data-title="Fancy Title Text">
</body>
</html>

Click here for an Example

Shannon Norrell

Leave a Comment :, , , more...

HTML5 Showcase

by webdood on Jun.04, 2010, under CSS3, HTML5, Javascript, Software Development

The HTML5 demos we have been working on for Apple.com are now live!

http://www.apple.com/html5/

http://developer.apple.com/safaridemos/

Most of the demos use the DHTML slider we developed and all examples use our library.js code

HTML5 is here to stay!

Leave a Comment :, , , more...

Looking for something?

Use the form below to search the site:

Still not finding what you're looking for? Drop a comment on a post or contact us so we can take care of it!

Blogroll

A few highly recommended websites...

  • A List Apart
  • Dive into HTML5
  • Javascript: The Good Parts
  • QuirksMode.org