The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

Ajax article posts

  • # January 26, 2013 at 5:17 pm

    Hey, guys. To start off, I really didn’t want anyone to see the new version of my site just yet so I removed a bunch of content to show you my issue.

    I have a `News` page that shows the latest 3 posts. If I have more than 3 posts, an arrow shows for you to click to see the older posts. Overall, I’m looking to use Ajax to slide in those posts when clicking the arrow instead jumping to ``. Basically I want it to act like a slideshow when clicking the arrow. However, would it be possible to have a similar pagination like that so it’s linkable?

    Does this make sense?

    Link Removed

    _Note:_ There may be some alignment issues due to not loading the webfonts in.

    # January 27, 2013 at 5:17 am

    Do you mean you want the URL to change when clicking on the arrow? That would then make it linkable.

    # January 27, 2013 at 5:23 am

    Yes & no. Realistically you’d have to use hashbang urls – but you could use HTAccess to rewrite urls.

    # January 27, 2013 at 6:33 am

    I would use `history.pushState` rather than hashbangs. That would work better with JS disabled and with linking.

    # January 27, 2013 at 6:35 am

    I wrote [a tutorial on `history.pushstate` and jQuery.](

    # January 27, 2013 at 8:23 am

    @rosspenman @AndyHowells You’re referring to history.js?

    I’m using Kirby and saw this post on their forum (see first repy) in response to your second article on this topic.

    What I’m concerned about is it Ajaxing my other pages. Would I have to write an if statement to only load the script on a certain page?

    # January 27, 2013 at 10:30 am

    Yup. You’d use an `if` statement to make sure it only AJAXed certain links.
    Or, alternatively, make your entire site AJAX!

    # January 27, 2013 at 10:30 am

    history.js isn’t necessary, but if you want better browser support, you can use it.

    # January 27, 2013 at 11:29 am

    @rosspenman I actually tried Ajaxing my site initially but didn’t want to go that route. I used this plugin but somehow completely forgot about it. I think I’ll try it first since it’s quite easy to implement.

    Thanks for your help. I’ll post back if I get it working.

    # January 27, 2013 at 8:57 pm

    What the…

    Why is it loading my other pages instead of just the articles? I wrapped the articles with a div (`.ajax`) and called that in the jQuery but it’s acting as an iframe.

    # January 28, 2013 at 9:03 am

    I believe what I have to do is use `.load()` instead. I assume I just use the arrow link for the URL.

    # January 28, 2013 at 9:14 am

    I’m not sure to understand your problem. If you’re simply looking for a pagination system which doesn’t bloat the URL, there are plenty of them. I personally use [jQuery Pajinate]( “jQuery Pajinate”).

    However I might be off topic.

    # January 28, 2013 at 9:36 am

    @HugoGiraudel I am trying to use Ajax for my blog posts. I’d like them to slide across the page (like a slideshow) when clicking the pagination arrows. I hope that makes it clearer.

    # January 28, 2013 at 12:40 pm

    It looks like you’ve got it working now?

    # January 28, 2013 at 4:19 pm

    @TheDoc above I posted that if you go to the News page and then try to go to a different page, it acts as an iframe loading the entire site in that little section.

Viewing 15 posts - 1 through 15 (of 20 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed