Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trialNatasha McDiarmid
11,400 PointsIntegrating WordPress within an Animation Layout
I am building a WordPress website and I want the homepage of blog posts to work like this tutorial: http://tympanus.net/Development/AnimatedGridLayout/
I have the grid setup and displaying the posts but I don't know how to get the URL to change when a link is clicked.
Any help would be appreciated!
2 Answers
Rich Bagley
25,869 PointsHi Natasha,
I don't know the exact detail of how it works but based on the demo link it appears to add a class to the body and the content section which uses a combination of the CSS / jQuery to hide the grid and show the appropriate article.
It never actually moves the user to another page as all the content is on the same page, just hidden until clicked / required.
If you use developer tools in the browser (usually found by clicking F12) you'll see the classes applied to the body
tag as you click it.
Hope that helps a little :)
-Rich
Natasha McDiarmid
11,400 PointsThanks!
I got a little further.
I'm still unsure of how to do this but I read that you can change the url without refreshing the page with html5: http://spoiledmilk.com/blog/html5-changing-the-browser-url-without-refreshing-page/
I added this but it's still not working:
$('.grid__item').click(function (event) {
event.preventDefault();
var url = $(this).attr('href');
window.history.replaceState("object or string", "Title", 'localhost'); // this will change your url
});
Rich Bagley
25,869 PointsNo problem, I'm not 100% on this one but could you try pushState
instead of replaceState
?
-Rich