Frontendplace Blog

Sharing Frontend developing ideas

  • Adds

Archive for October, 2008

Why not show some reflection

Posted by info on 29th October 2008

With the aid of the tag CANVAS in not IE browsers and with the filter DXImageTransform possibility on IE Browsers you can add reflections (wetfloor effect) under your image just with a little bit javascript.

view the site http://cow.neondragon.net/stuff/reflection/ for the javascript
The trick is by unobtrusive javascript and just three classes on your image you add reflection.

  1. add class “reflect” 
  2. add class “rheight##” where ## is the height in percentage for the gradient. default = 50
  3. add class “ropacity##” where ## is the amount of opacity. default = 50
  4. add the javascript “reflection.js” to the page
  5. call the function addReflection on window load.
example:
<head><script type=”text/javascript” src=”reflection.js”></script>
<script type=”text/javascript” >window.onload = addReflections</script></head><body>
<img src=”macosxlogo.gif” alt=”img” width=”73″ height=”97″ class=”reflect rheight97 ropacity50″ /></body>
but mind the classes the classes on the img will be replaced to the containing div.

Posted in 3D Tutorials | No Comments »

Getting the computed css style

Posted by info on 8th October 2008

Here is an example how to get the computed style of an element in HTML

call: getStyle(”h1″,”fontSize”)

function getStyle( tagName, attr){
  var tag = document.getElementsByTagName(tagName)[0];
  var attrValue = retrieveComputedStyle(tag, "fontSize");
  alert("The computed "+ attr + " of the "+ tagName +" is: " + attrValue);
  return true;
}

function retrieveComputedStyle(element, styleProperty){
  var computedStyle = null;
  if (typeof element.currentStyle != "undefined"){
    computedStyle = element.currentStyle;
  }
  else {
    computedStyle = document.defaultView.getComputedStyle(element, null);
  }
  return computedStyle[styleProperty];
}

Posted in Scripting | No Comments »