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
Any ideas how to do this?
thanks for looking 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
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
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
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 ;)
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.
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.
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!
Thanks for that and your input on this!
Thanks right back! I'm not much into JS but it's tricks like that that make me want to dig in :)
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.