Vigilant Psyche Posted May 12, 2008 Share Posted May 12, 2008 I have a span which i would like to gradually expand till it has a height of 400 pixels when you click it... Here is the span: <span onclick='expand_box()' id='pop1' style='position:fixed;bottom:5px;right:5px;border-style:solid;border-color: rgb(100,100,225);background-color: rgb(50,50,180);padding:10px;' >A POPUP IN DAYS TO COME</span> and this is in the <head> tag. function expand_box() { var old=document.getElementById("pop1").style.height; while(old<=40) { document.getElementById("pop1").style.height=old+1; } } But it's obviouslt a load of rubbish because the browser becomes unresponsive How can I fix this? Thanks! Quote Link to comment Share on other sites More sharing options...
bibby Posted May 12, 2008 Share Posted May 12, 2008 .style.height is giving back a string. Something like "20px"; The unresponsive behavior is a loop that never ends, so cover your bases. Also note that this doesn't give an animation effect, so you might as well just set it to 40 outright. Animation is a different topic. function expand_box() { var elm = document.getElementById("pop1"); // save this reference for easier coding var old = parseInt( elm.style.height , 10); // make sure it's a number (base 10). if(isNaN(old)) // doubly make sure old = 0; while(old<=40) { elm.style.height=old++; // plus-plus changes "old"'s value. // your loop, even if 10 would remain at 10 forever } } Quote Link to comment Share on other sites More sharing options...
KevinM1 Posted May 12, 2008 Share Posted May 12, 2008 Remember, <span> is an inline element. You might need to change it's display property to 'block' to give it a height property. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.