Contact Adam

[email protected]

Lectures & Projects

Web Coding More Advanced jQuery

The problem with the script we just created is the height variable – 500px. The nature of websites nowadays is constant change, and you need to consider that when building interfaces – so that means fixed measurements like 500px are a problem. Pretend that the exercise we just did will be a menu on a website, like a list of blog entries. And the client will be adding and removing blog entries every day. What if 500px is too tall or too short? We can make the script smarter.

Every programming language has a way to loop through items. So how about we loop through each menu item, obtain the item’s height, and whatever the total is will be the height of our menu – which we can use in place of “500”.

Here is what we have, just to recap:

$(document).ready(function() {

    var collapse = $('.collapse');
    var collapseTrigger = $('.collapse-trigger');
    var myHeight = 500;

    collapseTrigger.click(function() {
        collapse.height(myHeight);
    }); //close collapseTrigger.click

}); //close document.ready

First, we are going to set myHeight to zero and move it inside the .click() function. Since we will be changing height, we want to make sure it starts at zero on every click:

$(document).ready(function() {

    var collapse = $('.collapse');
    var collapseTrigger = $('.collapse-trigger');

    collapseTrigger.click(function() {
        var myHeight = 0;//set myHeight to Zero on every click
        collapse.height(myHeight);
    }); //close collapseTrigger.click

}); //close document.ready

And then we will need to target the menu items, you can google jQuery children and jQuery find for details on these functions. It’s important to understand that jQuery children will only look for elements one level down, such as <li> elements inside of a <ul>. jQuery find will search through the entire document (a.k.a. The DOM). Why use jQuery children at all? Look it up.

$(document).ready(function() {

    var collapse = $('.collapse');

    var collapseChildren = collapse.children('li'); 
    //we can use the collapse variable from the previous line
    //then use .children(), a jQuery function, to get any immediate child elements
    //in this case, the "li" items

    var collapseTrigger = $('.collapse-trigger');

    collapseTrigger.click(function() {
        var myHeight = 0;//set myHeight to Zero on every click 
        collapse.height(myHeight);
    }); //close collapseTrigger.click

}); //close document.ready

Now we set up the loop, which is also a jQuery function called .each (google that for more info)

$(document).ready(function() {

    var collapse = $('.collapse');

    var collapseChildren = collapse.children('li'); 
    //we can use the collapse variable from the previous line
    //then use .children(), a jQuery function, to get any immediate child elements
    //in this case, the "li" items

    var collapseTrigger = $('.collapse-trigger');

    collapseTrigger.click(function() {

        var myHeight = 0;//set myHeight to Zero on every click 
        $.each(collapseChildren, function() {

            //so for each "li", whatever code we put here will be executed
            //$(this) means the current item in the loop
            //.outerHeight() is a jQuery function (google it) 
            //and it's special because it gets both the height and the padding, 
            //and if you pass an argument "true" (put true in the parenthesis), 
            //it will get the height, padding, and margin
            h = $(this).outerHeight(true);

            //now add the height to itself to accumulate a total
            myHeight = myHeight + h;
            
        });

        collapse.height(myHeight);

    }); //close collapseTrigger.click

}); //close document.ready

The finishing touch is to add a toggle, which can be done with a simple conditional statement

$(document).ready(function() {

    var collapse = $('.collapse');

    var collapseChildren = collapse.children('li'); 
    //we can use the collapse variable from the previous line
    //then use .children(), a jQuery function, to get any immediate child elements
    //in this case, the "li" items

    var collapseTrigger = $('.collapse-trigger');

    collapseTrigger.click(function() {

        var myHeight = 0;//set myHeight to Zero on every click 
        $.each(collapseChildren, function() {

            //so for each "li", whatever code we put here will be executed
            //$(this) means the current item in the loop
            //.outerHeight() is a jQuery function (google it) 
            //and it's special because it gets both the height and the padding, 
            //and if you pass an argument "true" (put true in the parenthesis), 
            //it will get the height, padding, and margin
            h = $(this).outerHeight(true);

            //now add the height to itself to accumulate a total
            myHeight =myHeight + h;
            
        });

        //Toggle: if the height is zero, set the height to myHeight
        //otherwise (else) set the height to zero
        //look up "javascript operators" to understand what the double equal sign is
        if ( collapse.height() == 0 )
            collapse.height(myHeight);
        else
            collapse.height(0);

    }); //close collapseTrigger.click

}); //close document.ready

Conclusion

So if everything is set up right, you are done with this script. No matter how many items the client may add or subtract, and no matter how you style the <li> items with margin and padding, the script will be smart enough to measure itself, and it can open and shut with a single button.