Problem in my sliding div...plz help....

•

What is DaniWeb IT Discussion Community?

You're currently browsing the JavaScript / DHTML / AJAX section within the Web Development category of DaniWeb, a massive community of 373,939 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 2,553 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.

Join our community!

Please support our JavaScript / DHTML / AJAX advertiser: Lunarpages Web Hosting

Thread Tools Display Modes

Views: 683 | Replies: 5 | Solved

Previous Post in Thread

Next Post in Thread

•

Join Date: Aug 2007

Posts: 20

Reputation: web_master is an unknown quantity at this point

Rep Power: 0

Solved Threads: 0

web_master web_master is offline

Offline

Newbie Poster

Problem in my sliding div...plz help....

May 1st, 2008

Professional javascripters plz help or illl be screwed at work.....plz guys.....

I have made this sliding div....but i am having a big problem.....i dont want the div to appear in the first place....but in the code below its is already open when the page refreshed....I want it to open when i click on toggle.....n i cant understand what shud i do for that.....i have tried giving the "visibility:hidden;" to the 'testDiv'...after that it doesnt show up....but there is a whitespace of the div's size instead of the div itself......plz help....my code is below.....(i have made this with the help of a tutorial)....i'm kind of new at javascript.....

plz help......

Thanks

Help with Code Tags

(Toggle Plain Text)

<html>
<head>
    <script language="javascript">
var active = 1;
var height = 100;
function toggle_visible() {
    if(active == 0) {
        active = 1;
        divPlusOne();                
    } else if(active == 1){
        active = 0;    
        divMinusOne();
    }
}

function divMinusOne() {
    if(height >= 20) {
        height = height - 1;
        document.getElementById('testDiv').style.height=height + 'px';
        window.setTimeout('divMinusOne()', 1);
    } else {
        document.getElementById('testDiv').style.visibility="hidden";
    }
} 

function divPlusOne() {
    if(height <= 100) {
        document.getElementById('testDiv').style.visibility="visible";    
        height = height + 1;
        document.getElementById('testDiv').style.height=height + 'px';        
        window.setTimeout('divPlusOne()', 1);
    }
}
</script>
    <title>JavaScript test</title>   
</head>
<body>
    <div id="testDiv">And here is my very slick menu!</div>
    <a href="#" onClick="toggle_visible()">Toggle</a>
</body>
</html>