Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New to the CF scene
    Join Date
    Sep 2012
    Posts
    3
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Post Sliding Div code

    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 it will show/hide:
    Code:
    <table class="resultstable" id="teamTable">
    The javascript:

    Code:
    var slideTime = 500;
    var sliding = false;
    var stopSlider = null;
    var slideTime = null;
    var divHeight = null;
    
    function slide(id)
    {
            divId = document.getElementById(id)
            originalDivHeight = parseInt(divId.style.height)
            divHeight = originalDivHeight
            slideInterval = slideTime/divHeight
            if(sliding)
                    return;
            sliding = true;
            if(divId.style.display == "none")
            {
                    stopSlider = setInterval("slideUp()",slideTime)
            }
            else
            {
                    stopSlider = setInterval("slideDown()",slideTime)
            }
    }
    
    
    function slideUp()
    {
            if(divHeight<=0)
            {
                    sliding = false;
                    divId.style.display = "hidden";
                    divId.style.height = originalDivHeight;
                    clearInterval(stopSlider);
            }
            else
            {
                    divHeight-=slideInterval;
                    if(divHeight < 0)
                    divHeight = 0;
                    divId.style.height = divHeight;
            }
    }
    Last edited by djrdoo; 09-23-2012 at 06:07 PM. Reason: added code BB tags

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,642
    Thanks
    6
    Thanked 1,005 Times in 978 Posts
    If you post any code please put it in between [CODE][/CODE] tags. It makes scanning your posts much easier. You can do this by clicking the small ‘#’ icon above the reply field.

  • Users who have thanked VIPStephan for this post:

    djrdoo (09-23-2012)

  • #3
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    teamTable is a string and not a variable-name, so it needs to be quoted:

    Code:
    <div class="contentheader" onclick="Slide('teamTable')">
    (You can't use double-quotes here as things stand, so use apostrophes.)
    but your function is named slide() and JS is case-sensitive.

    You should also declare any variables with var; if not, they become global variables, which is generally not a good thing. But if you want variables to be available to both of your functions then you should declare them at the top (outside of the functions) as you have done for some other variables. [You should try to avoid this as much as possible; passing variables between functions is preferable.]

    JS statements are terminated by semi-colons ;. Although the code will still work it is better to always include them.
    Last edited by AndrewGSW; 09-23-2012 at 06:45 PM.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • Users who have thanked AndrewGSW for this post:

    djrdoo (09-23-2012)

  • #4
    New to the CF scene
    Join Date
    Sep 2012
    Posts
    3
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks for your help Andrew.

    I have changed the div code to (I've added some comments to help explain what i'm trying to do):
    Code:
    <div class="contentheader" onclick="slide('teamTable')">
    and the javascript to:
    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
            }
    }
    But it still doesn't work, any idea why?
    Last edited by djrdoo; 09-23-2012 at 09:45 PM.

  • #5
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Code:
    var divID = null;
    var origianlDivHeight = null;
    you have issues with casing and spelling

    BTW It is not standard practice to use "= null"; if there isn't an appropriate default then just use:

    Code:
    var yourVariable;
    BTW Generally, it is a good idea with JS to avoid the use of null and void; just let them assume a default value (undefined). When you test them later, use:

    Code:
    if (myVariable)
    which will be untrue/falsy for: null, void, undefined, '', false, 0.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #6
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    .. and it is display = "none", not "hidden".

    .. and style.height will probably return a string such as "40px", rather than a number, so you cannot use it straight away in arithmetic. (It may even return "" or something similar.) Added: One approach to this:

    Code:
    var oHeight = parseInt(myobject.style.height);
    oHeight = (isNaN(mything)) ? 0 : oHeight;    // default to 0
    Last edited by AndrewGSW; 09-23-2012 at 10:04 PM.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #7
    New to the CF scene
    Join Date
    Sep 2012
    Posts
    3
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks again for your help Andrew - I really appreciate it.

    Sorry to waste your time with spelling and case issues - i think I've fixed them now.

    I was wondering about the null thing - that helped. Knowing the general coding practices also helps.

    Regarding the height, that's why I have used the parseInt(), will this work? If I have not specified a height in the css or html to make it dynamic will it return a value? If not, my method won't work, can you think of any other way of achieving this?

    Is there a way that i can build and test javascript bit by bit? A good editor that will pick problems out?

  • #8
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Include the following function in your code:
    Code:
    function getStyle(elem, strRule) {
        // robertnyman.com e.g. "font-size"
        // Note: IE is 'elem.styleFloat' FF is 'elem.cssFloat'
        // Also FF returns pixels for font-size in em, IE returns the 'em' value.
        elem = (typeof elem === 'string') ? document.getElementById(elem) : elem;
        if (document.defaultView && document.defaultView.getComputedStyle ) {
            return document.defaultView.getComputedStyle(elem, '').getPropertyValue(strRule);
        } else if ( elem.currentStyle ) {
            strRule = strRule.replace(/\-(\w)/g, function (strMatch, p1) {
                return p1.toUpperCase();
            });
            return elem.currentStyle[strRule];
        } else {
            return '';
        }
    }
    
    // usage:
    var tallness = getStyle(mytallthing, "height");
    It is not 100% foolproof (I believe) but it should get a height as "40px" and you can then use my previous code sample to extract the number, or set a default.

    Komodo Edit is an excellent editor - I will often paste code into it and it will indicate where there are errors. (Komodo IDE is the paid version.)

    But you really need to get to know Firebug (in Firefox) or the Web Developer tools in Chrome. Right click a page element and choose Inspect Element (or similar) to start it up, or press F12. Although, I think Firebug is an extension now(?) so would need to be installed.

    Added: Editors won't pick up spelling or casing errors though: JS is a dynamic language so it just creates two versions of the variable
    Last edited by AndrewGSW; 09-23-2012 at 10:53 PM.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #9
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Code:
    divId.style.display = "none";                   
    // set the divs display to hidden to completely hide it
    divId.style.height = originalDivHeight + "px";
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS


  •  

    Tags for this Thread

    Posting Permissions

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