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! Link to comment https://forums.phpfreaks.com/topic/105195-expanding-box-vertically/ 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 } } Link to comment https://forums.phpfreaks.com/topic/105195-expanding-box-vertically/#findComment-538743 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. Link to comment https://forums.phpfreaks.com/topic/105195-expanding-box-vertically/#findComment-538950 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.