Jump to content

Expanding <span> box vertically.


Recommended Posts

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  :D

 

How can I fix this?

Thanks!

 

 

Link to comment
Share on other sites

.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
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.