Developing (v7+)

jquery page fade in/out with autonav

Permalink January 14, 2014 at 10:04 AM

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 Jan 14, 2014 at 10:39 am Permalink Reply

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 Jan 14, 2014 at 10:56 am 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 Jan 14, 2014 at 11:37 am Permalink Best Answer Reply

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 Jan 14, 2014 at 12:10 pm Permalink Reply

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 Jan 14, 2014 at 11:41 am 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 Jan 14, 2014 at 11:44 am Permalink Reply

Thanks right back! I'm not much into JS but it's tricks like that that make me want to dig in :)

Forums

Developing (v7+)

jquery page fade in/out with autonav

Code

Post Reply

Delete Post

Mark Post as Spam

Destroy Spammer

Sign In?