Javascript Divs! - Webmaster Forum - Web Design, Programming and SEO forums

04-30-2008, 06:27 PM

Seanneo

Status: Junior Member
Join date: May 2007
Location:
Expertise:
Software:

Posts: 26

iTrader: 1 / 100%

Seanneo is on a distinguished road

Javascript Divs!

Hey guys,
I was just wondering if anyone would be able to help me... Im trying to create a script that when a button is clicked, the height of a div changes.
I want the height to count down from the max height down to zero(so its invisible), i have written a script that does this but i cant seem to add a delay into it, so it does change size so fast you cant see it change size.
Would appreciate help!

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Expanding Divs</title>
<style type="text/css">
    #expand {
        background-color: blue;
        color: white;
    }
</style>
<script type="text/javascript">
<!--
var hValue = 300;

function divSize()
{
    var element = document.getElementById("expand");
    while(hValue>0)
    {
        heightChange(element, hValue);
        hValue = hValue - 1;
        //alert(hValue);
    }
}
function heightChange(element, hValue)
{
    element.style.height = ""+hValue+"px";
}
-->
</script>
</head>
<body>
    <p onmouseup="divSize();">
        START
    </p>
    <div id="expand">
        TEXT GOES IN DIV HERE
    </div>
</body>
</html>

if you uncomment out the alert you will see it working ok.
thx in advance,
regards Seanneo

04-30-2008, 10:42 PM

Dregond Rahl

Status: Junior Member
Join date: Apr 2008
Location:
Expertise:
Software:

Posts: 79

iTrader: 3 / 100%

Dregond Rahl is on a distinguished road

use setTimeout (); insted of a while() statement.

=]

04-30-2008, 11:03 PM

CreativeLogic

Status: Request a custom title
Join date: Feb 2005
Location:
Expertise:
Software:

Posts: 1,078

iTrader: 6 / 100%

CreativeLogic is on a distinguished road

Yes, use setTimeout and make the call recursive.

04-30-2008, 11:23 PM

Seanneo

Status: Junior Member
Join date: May 2007
Location:
Expertise:
Software:

Posts: 26

iTrader: 1 / 100%

Seanneo is on a distinguished road

im not 100% on how to implement the setTimeout(); into my code, everything i try doesn't work, help would be much appreciated.
Thx

05-01-2008, 12:20 AM

Dregond Rahl

Status: Junior Member
Join date: Apr 2008
Location:
Expertise:
Software:

Posts: 79

iTrader: 3 / 100%

Dregond Rahl is on a distinguished road

here is something i was working on a few weeks ago, might help?

http://h1.ripway.com/raziel8/fader.html

05-05-2008, 08:26 AM

gluc0se

Status: Member
Join date: Aug 2005
Location: New York
Expertise:
Software:

Posts: 105

iTrader: 0 / 0%

gluc0se is on a distinguished road

The syntax for setTimeout() is

Code:

setTimeout("yourfunction()", milliseconds);

So, I would try something like this:

Code:

function divSize()
{
    var element = document.getElementById("expand");
    if(hValue>0){
        heightChange(element, hValue);
        hValue = hValue - 1;
        setTimeout("divSize()", 100);
     }
}

You'll have to mess with that 100 milliseconds to see what works smoothly for you, but that should be about the implementation for what you want.