Question

Creating this ajax styled wordpress portfolio theme and I’m a little stuck on how to do this one last little thing.

Basically lets say you click the “About” link at the top right it will load the contents of that page into a div. Now once thats clicked how do I specify that if that link gets clicked again for it not to load the contents again?

Now you will think to use length, that is not really the issue.

Here’s a link to the theme in progress http://themes.thefinishedbox.com/portfolio/

Here’s the javascript used for the top navigation:

$(function() {
    $('#navigation ul > li a').each(function() {

        $(this).click(function(e) {

            $.ajaxSetup ({  
                cache: false  
            });

            e.preventDefault();

            var $href = $(this).attr('href'); 

            var $loader = '<div id="whiteLoader" />';

            if($('#page').length == 0) {

                $('<div id="page" />').insertAfter('#header');

                $('#page').queue(function() {
                    $(this).animate({height: '120px'}, 300);
                    $(this).html($loader);
                    $(this).animate({backgroundColor: '#fff'}, 300);
                    $(this).dequeue();                    
                });

                $('#page').queue(function() {
                    $('#page').load($href + ' #pageEntry', function() {
                        var $height = $('#pageEntry').height();
                        var $h = $height + 16;
                        $(this).animate({height: $h + 'px'}, 600, function() {
                            $(this).css({height: 'auto'});
                        });
                        // This is the sort of thing I'm trying to achieve
                        // is it out of scope? Not sure of the correct way
                        // to achieve this.
                        e.click(function() { return false; }); 
                    });
                    $(this).dequeue();
                });

            } else {

                $('#pageEntry').animate({height: 0}, 600, function() {

                    $(this).remove();

                    $('#page').queue(function() {
                        $(this).animate({height: '120px'}, 300);
                        $(this).html($loader);
                        $(this).animate({backgroundColor: '#fff'}, 300);
                        $(this).dequeue();                    
                    });

                    $('#page').queue(function() {
                        $('#page').load($href + ' #pageEntry', function() {
                            var $height = $('#pageEntry').height();
                            var $h = $height + 16;
                            $(this).animate({height: $h + 'px'}, 600, function() {
                                $(this).css({height: 'auto'});
                            });
                        });
                        $(this).dequeue();
                    });

                });
            }

        });

    });
});

Don’t worry too much about the else statement right now, refer to the commented line, am I doing it right? Out of scope? Surely someone has came across this issue before.

Any help would be greatly appreciated.

p.s I’m aware a lot of the code can be minified down, I will do that later.

Answer 1

You could use the one() function to ensure the event handler is only run once. Alternatively, you could use data() to bind a boolean to the element, indicating whether or not the element is currently “active” (i.e. having its content displayed). For reference, both of these functions are JQuery functions.