Question

I have three leaves in my navigation bar on this page. Each leaf section is a nav link consisting of div classes with absolute positioning and different z-indexes, so that I can fade in the green leaves over the brown.

There is also a fading transition between pages, which is based on the dynamic page changing method on CSS tricks, which uses a hashchange to change the pages.

You can see all of the code relevant to the fading of the leaves on the nav bar on this jsfiddle (the script also contains the code for the transitions between pages).

The part I am struggling with is how to refer to the div class “.current” (which contains the green leaves that are faded in and out) for the current page. I need to do this so that, when the website is first opened, either on the home page or the about page, the green leaf for the current page is set to opacity:1 as the page is loaded (this is what happens when the user clicks on a page to load it, but not when the page first loads).

I could set the opacity for the .current class in the CSS for each page, but using the hashchange method, only the HTML for #main-content is changed, so this wouldn’t work. I presume that I need to find a way of setting this in my javascript, referring somehow to the current page/tab.

Related to this is how I change the opacity of the green leaves for the current page in the click handler for the .close div/link, i.e. if the contact form is closed when the home page is active, the home page green leaf will fade in (as it is the current page), and the same with the about page. Again, it would seem that I need to find a way of referring to the current page/tab in the click handler.

Could someone help me with this?

Thanks,

Nick

Answer 1

Wow that is confusing,
It seems like your over complicating the situation.
You don’t need page specific CSS or anything like that. You just need to set .current class at a different time.

When somebody navigates to your website you will know what #tag they are loading, or if there isn’t any.

Now, basically on page load you need to look at the hashtag, if there is one there and if it is correct (being that its an actual page you have accounted for) then you just load that page like you do at the moment, but also highlight the leaf.

You could actually simplify your whole thing on the .current leaf

Really a ‘leaf’ is only ‘current’ when you load the information. So when the information is loaded and placed inside your $wrapper, faded in and animated; put your .current on then.

---

Update – The quick solution

http://jsfiddle.net/6p2f6/1/
Basically I moved the stuff changing the .current leaves into the hash change
and at the bottom I made it check to see if the user navigated to a page using hash, if not then it set a default.
It’s not perfect but its the best I can do in the time I have at the moment.

---

Update – new code 🙂

http://www.mediafire.com/?51vajskfeu923

There are a few files so I couldn’t chuck it in a JSfiddle

Right so, I couldn’t get the whole fading menu to work, but i got it show/hiding like a normal hover. I can look at it later, but since you know how to do it I’m assuming you can figure it out. Just go to the javascript file and look for this:

    $this = $(this);
        var currentHash = window.location.hash;
        console.log('specialMenu this.each(this) = '+$this.attr('href'));
        //append all images
        $this.append('<img class="defaultImage" src="'+settings.defaultImage+'"/>')
        .append('<img class="hoverImage" src="'+settings.hoverImage+'"/>')
        .append('<img class="activeImage" src="'+settings.activeImage+'"/>');
        
        //prepare positioning
        $('.defaultImage').css({
            'z-index':'1'
        });
        $('.activeImage').css({
            'z-index':'2'
        });
        $('.hoverImage').css({
            'z-index':'3'
        });
        //Make parent correct height
        $this.height($this.find('img').height());
        
        //check what hash value is loaded
        if(currentHash == $this.attr('href')){
            $this.find('img:not(.activeImage)').hide();
            $this.find('img.activeImage').show();
        }else{
            $this.find('img:not(.defaultImage)').hide();
            $this.find('img.defaultImage').show();
        }
        $(this).hover(function(){
            currentHash = window.location.hash;
            $(this).find('img:not(.hoverImage)').hide();
            $(this).find('img.hoverImage').show();
        },function(){
            currentHash = window.location.hash;
            if(currentHash == $(this).attr('href')){
                $(this).find('img:not(.activeImage)').hide();
                $(this).find('img.activeImage').show();
            }else{
                $(this).find('img:not(.defaultImage)').hide();
                $(this).find('img.defaultImage').show();
            }
        });
    });
 },

Now on the main page to set it up look at this code:

        $('#contentContainer').jdAjaxContent({
            'defaultPage': 'home',
            'pathToLoadGif' : 'ajaxloading.gif'
        });
        $("#destroy").click(function(){
            console.log('destroy.click');
            $(this).jdAjaxContent('destroy');
        });
        
        //had to put this in its own window load, not sure why; weird bug
        $(window).load(function(){
            console.log('specialMenu.click');
            $('a[href^=#]').jdAjaxContent('specialMenu',
                {
                    'defaultImage': 'MenuIcons-01.png',
                    'hoverImage' : 'MenuIcons-02.png',
                    'activeImage' : 'MenuIcons-03.png'
                });
        });

Ignore the destroy bit, that just gets rid of the plugin; take it out.
Your interested in the

$('#contentContainer').jdAjaxContent({
            'defaultPage': 'home',
            'pathToLoadGif' : 'ajaxloading.gif'
        });

$(‘#contentContainer’) is the container that your ajax loads into
default page is default page ha
pageToLoadGif is the path to the little loading gif that is usually displayed.

Now you’ll also need to look at

$('a[href^=#]').jdAjaxContent('specialMenu',
                {
                    'defaultImage': 'MenuIcons-01.png',
                    'hoverImage' : 'MenuIcons-02.png',
                    'activeImage' : 'MenuIcons-03.png'
                });

This is the bit that does your little menu thing.
Since you have different images you’ll need to do each one separately, something like this:

$('a[href^=#]').each(function(){
     $(this).jdAjaxContent('specialMenu',
                {
                    'defaultImage': $(this).attr('defaultImage'),
                    'hoverImage' : '$(this).attr('hoverImage'),
                    'activeImage' : $(this).attr('activeImage')
                });
                });

Then you put defaultImage="blah" in your so it will look like <a href="#blah" defaultImage="blah" …/>

ALSO
Do a find replace on all ‘ console.log’ to ‘//console.log’ so that all the console stuff doesn’t appear on your actual website.

I found it very interesting to write my own ajax engine.