Sliding Div code

[djrdoo]

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:

<div class="contentheader" onclick="Slide(teamTable)">

The div that it will show/hide:

<table class="resultstable" id="teamTable">

The javascript:

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;
        }
}

[VIPStephan]

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.

[AndrewGSW]

teamTable is a string and not a variable-name, so it needs to be quoted:

<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.

[djrdoo]

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

<div class="contentheader" onclick="slide('teamTable')">

and the javascript to:

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?

[AndrewGSW]

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:

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:

if (myVariable)

which will be untrue/falsy for: null, void, undefined, '', false, 0.

[AndrewGSW]

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

var oHeight = parseInt(myobject.style.height);
oHeight = (isNaN(mything)) ? 0 : oHeight;    // default to 0

[djrdoo]

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?

[AndrewGSW]

Include the following function in your 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

[AndrewGSW]

divId.style.display = "none";                   
// set the divs display to hidden to completely hide it
divId.style.height = originalDivHeight + "px";