www.webdeveloper.com
Results 1 to 4 of 4

Thread: Sliding Div

  1. #1
    Join Date
    Sep 2012
    Posts
    2

    Sliding Div

    Hi All,

    I'm new to this forum and to javascript - I've been learning html and css for a hobby and now I'm starting on javascript.

    I've been looking around for tutorials on how to make a div slide to show and hide content. I found a few tutorials and from them wrote my code below to make a div hide content (once I have that down then I'll attempt the hide content code) but I can't get it to work. I don't want to simply copy the code as I want to learn it as I go along (which is why I wrote my own).

    I'd appreciate it if anyone could take a look and point out what is wrong and explain if possible so that I can learn more.

    I am clicking one div and making another show/hide content so the div code is:
    The div to click
    Code:
    <div class="contentheader" onclick="slide('teamTable')">
    The div that will show/hide
    Code:
    <table class="resultstable" id="teamTable">
    The javascript
    Code:
    var slideTime = 500;
    var divID = null;
    var origianlDivHeight = null;
    var slideInterval = null;
    var sliding = false;
    var stopSlider = null;
    var slideTime = null;
    var divHeight = null;
    
    function slide(id)
    {
            divId = document.getElementById(id);                            // get the div
            originalDivHeight = parseInt(divId.style.height);               // get the height of the div
            divHeight = originalDivHeight;                                  // save the height of the div into a second variable
            slideInterval = slideTime/divHeight;                            // set the slide interval by dividing the slidetime by the div height to make sure all slides are the same time.
            if(sliding)                                                     // if the div is sliding return so that it cannot be clicked again whilst it is sliding
                    return;
            sliding = true;                                                 // set sliding to true
            if(divId.style.display == "none")                               // if the display = none do the below:
            {
                    stopSlider = setInterval("slideUp()",slideTime);        // start slideup
            }
            else                                                            // otherwise:
            {
                    stopSlider = setInterval("slideDown()",slideTime);      // start slidedown
            }
    }
    
    
    function slideUp()
    {
            if(divHeight<=0)                                                // if the divheight is less than or equal to 0 (has finished sliding) do the following:
            {
                    sliding = false;                                        // set sliding to false
                    divId.style.display = "hidden";                         // set the divs display to hidden to completely hide it
                    divId.style.height = originalDivHeight;                 // set the divs height back to its original height
                    clearInterval(stopSlider);                              // stop the interval
            }
            else                                                            // otherwise:
            {
                    divHeight-=slideInterval;                               // reduce the divs height by the slideinterval
                    if(divHeight < 0)                                       // if the div height is less than 0 set the div height to 0
                    divHeight = 0;
                    divId.style.height = divHeight;                         // set the divs height to the new height
            }
    }
    I'd really appreciate it if someone could help.

  2. #2
    Join Date
    Sep 2011
    Location
    Bristol, England, United Kingdom
    Posts
    192
    Your code isn't in working order. First, your <div class="contentheader" onclick="slide('teamTable')"> isn't closed with </div>, has no contents (innerHTML) and no styling, so may as well be invisible. Your "div that will show/hide" isn't even a <div>, it's a table with no table elements and no closing tag.

    Can you post code that is in working order? I'm assuming this isn't all your code, because it doesn't do anything in its current state.

  3. #3
    Join Date
    Sep 2012
    Posts
    2
    Thanks for the reply.

    Sorry for not explaining, I have the css in a separate document and I have just included the opening tags where it references the id's and the JavaScript. The problem however, is in the JavaScript so I have posted all of that. Let me know if you need the whole thing to help.

  4. #4
    Join Date
    Sep 2011
    Location
    Bristol, England, United Kingdom
    Posts
    192
    The problem may be in the JavaScript, but this JavaScript isn't going to work in its current state anyway because the project is broken. Without the entire source the interactivity between JavaScript and DOM elements is not going to take place, so debugging becomes much harder.

    Why not post as much code as is necessary for a working "demo" of the project so far? It doesn't sound like a tough problem but without more source code, I don't think anyone is going to be helping out. I don't want to go second guessing your thoughts or plans or try to presuppose what you were attempting to do at 7:48 PM and 24 seconds on Friday evening, so I'm not going to attempt to debug incomplete code.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles