This javascript is used on isohunt.com and is a great way to make use of limitted real estate. The script is rather easy to use and today after explaining how to use it to a fellow collegue, I thought it would make a great first entry for EZmofo. Please feel free to comment with additions or to note any mistakes I’ve made!
Enjoy -cj.
Basically how this works is that you call the function once to expand from your current height of 0px by the step height (stepH) value that you pass. Once you call the function, it will continue calling itself passing the current height (curH) and the target height (targetH). Whenever it reaches it’s final target height (determined by the diff var, which is target height minus current height), then it knows to stop.
Remember, since this function loops over itself to arive at the final height, you must have your step height be divisible by the target height… if not, it will start flashing and never look right. Also, the stepH will help determine how smoothly and/or quick it expands… the function will call itself after 10 milliseconds. So, if your current height is 0, your step height is 10, and your target height is 300… the function will run 30 times (making it rather smooth). But if you change your step height to 50, then it only runs 6 times. Play around with the numbers and you’ll see what I mean.
So, you should have a div similar to this:
<div id=”myDiv” style=”height:0px;width:300px;display:none;”>
You can have a link like this:
<a onclick=”smoothHeight(‘myDiv’,0,300,10)”>Expand my div</a>
<!– so, myDiv starts at 0px, expands to 300px, stepping 10px every 10 milliseconds (10px passed here, 10 milliseconds hardcorded in function –>
So, as you can see there, if you want it to shrink back up once it has already been expanded, just reverse the start height and target height… like this:
<a onclick=”smoothHeight(‘myDiv’,300,0,10)”>Close my div</a>
And here’s the javascript:
var smooth_timer;
// id: id attribute on div that you want to expand
// stepH: (step height) that you pass much be divisible by the targetH (target height) or this function will not work!!
// curH: (current height) should start at 0 (don’t use px)
// targetH: (target height) this example uses 300 (we want to expand from 0px to 300px)
// mode: can only be set to “o” (lower case o)… mode just lets the function know if it should keep going
function smoothHeight(id, curH, targetH, stepH, mode) {
diff = targetH – curH;
if (diff != 0) {
//set the new height… this will be the current height +/- the number of pixels you pass as “stepH”
newH = (diff > 0) ? curH + stepH : curH – stepH;
//add the new height to your current height
((document.getElementById) ? document.getElementById(id) : eval(“document.all['" + id + "']“)).style.height = newH + “px”;
if (smooth_timer) window.clearTimeout(smooth_timer);
//run smoothHeight() again after 10 milliseconds, passing our new height as the current height
smooth_timer = window.setTimeout( “smoothHeight(‘” + id + “‘,” + newH + “,” + targetH + “,” + stepH + “,’” + mode + “‘)”, 10 );
}
else if (mode != “o”) ((document.getElementById) ? document.getElementById(mode) : eval(“document.all['" + mode + "']“)).style.display=”none”;
}
