Forums

jquery page fade in/out with autonav

Permalink
Hi all,

I'm using the standard autonav and was just wondering if it was possible to add a fade in and out of pages, when you click between links?

Similar to this:http://www.stylodesign.co.uk/

I've tried adding this to my header file but with no luck

<script type="text/javascript">
$('body').hide();
$('body').fadeIn(1500);
</script>


Any ideas how to do this?

thanks for looking all
 
intuitivereason replied on at Permalink Reply
intuitivereason
Looking at their site, they're just doing a fadeout of the body whenever an anchor is clicked. This is what their doing:
$('a').click( function( event ) {
        if ( this.href == "" || this.href == null ) {
            event.preventDefault();
            return;
        }
        if ( (this.href.indexOf("#") == -1) && (this.href.indexOf("mailto:") == -1) && (this.href.indexOf("javascript:") == -1) && (this.target != "_blank")) {
            event.preventDefault();
            linkLocation = this.href;
            $("body").fadeOut(600, redirectPage);
        }
    });


So it's only doing it on anchors that are actual links and not mail links, javascript links, or links that open in new windows.

Just add something similar to that in your global JS include inside a jQuery ready method and it will do what you want. If you don't have a global JS file you're already using, then you could just add it to your footer include in your theme.
obaluba replied on at Permalink Reply
thanks for that.

How could I make this work with autonav?

Could I use the code that i posted above? Just not sure how to link it in with autonav that's all!

thanks for looking
enlil replied on at Permalink Best Answer Reply
enlil
I'm able to take the code you posted above and include it in an HTML block in a global area and the effect works on all pages ;)
intuitivereason replied on at Permalink Reply
intuitivereason
To reiterate what I said above, even though it works, it's a horrible practice to get into to start throwing JS inside of any CMS content block. I could list a number of reasons but one glaring one is from a maintenance and development vantage point. You're now going to have to maintain code in not only JS includes or your theme footer but also track down where in the CMS you might also have JS, has that been copied across your dev, test, prod environments, etc...

This is why my post said to either add it in your theme's global JS include file if you have one, or just put it in your footer.
obaluba replied on at Permalink Reply
Can't believe I didn't think to do that! but your right, it works a charm.

Thanks for that and your input on this!
enlil replied on at Permalink Reply
enlil
Thanks right back! I'm not much into JS but it's tricks like that that make me want to dig in :)