Recently I had to make some mods to the site of my current workplace and one of the JS snippets I ended up with was one for using an unfolding effect for divs (something like the animated menus from Office 2003).
Here's the source to the JS snippet and the link to my original blog entry (if you want to read about a few common pitfalls when using JS to do resizing and CSS):
http://bluevd.frih.net/blog/wordpress/?p=20
If you find any other bugs or have improvements, please let me know. Thank you.
PS: the speed var controls the speed of the animation.
Tested and found working on IE 5.5 - 7, FireFox 1.5 - 2.x, Safari for Windows and Safari on PantherOS;
Here's the source to the JS snippet and the link to my original blog entry (if you want to read about a few common pitfalls when using JS to do resizing and CSS):
http://bluevd.frih.net/blog/wordpress/?p=20
| Code: |
| // ---------------------------------------------------------------------
// Javascript Unfold script // Written by Andrei Iscu - bluevd@gmail.com - copyright Dec 29, 2007 // This script is freeware (LGPL) but if you use it, please let me know! // Also, this script is provided as-is, with no implied waranty // --------------------------------------------------------------------- var elemId=null; var objElem=null; var origW=null; var origH=null; var tVar=null; var active=false; var speed=5; function doResize(objId){ if(!active){ if((elemId!=objId) && (elemId!=null)){ objElem=document.getElementById(elemId); if(objElem.style.visibility=='visible'){ objElem.style.visibility='hidden'; } } active=true; elemId=objId; objElem=document.getElementById(elemId); origW=objElem.offsetWidth; origH=objElem.offsetHeight; objElem.style.width='0px'; objElem.style.height='0px'; objElem.style.visibility='visible'; clearTimeout(tVar); tVar=setTimeout('doResize("'+elemId+'")',speed); return true; }else{ if((objId!=elemId)&&(elemId!=null)){ active=false; objElem=document.getElementById(elemId); objElem.style.visibility='hidden'; objElem.style.width=origW.toString()+'px'; objElem.style.height=origH.toString()+'px'; clearTimeout(tVar); tVar=setTimeout('doResize("'+objId+'")',speed); return true; }else if(objId==elemId){ objElem=document.getElementById(elemId); curW=objElem.style.width.substr(0,objElem.style.width.length-2); curH=objElem.style.height.substr(0,objElem.style.height.length-2); curWnum=curW*1; curHnum=curH*1; if(curWnum<origW){ curWnum++; objElem.style.width=curWnum.toString()+'px'; } if(curHnum<origH){ curHnum++; objElem.style.height=curHnum.toString()+'px'; } if( (curWnum>=origW) && (curHnum>=origH)){ clearTimeout(tVar); active=false; return true; }else{ clearTimeout(tVar); tVar=setTimeout('doResize("'+elemId+'")',speed); return true; } } } } |
If you find any other bugs or have improvements, please let me know. Thank you.
PS: the speed var controls the speed of the animation.
Tested and found working on IE 5.5 - 7, FireFox 1.5 - 2.x, Safari for Windows and Safari on PantherOS;
