Ajax article posts

[chrisburton]

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 `site.com/news/page:2`. 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.

[rosspenman]

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

[Andy Howells]

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

[rosspenman]

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

[rosspenman]

I wrote [a tutorial on `history.pushstate` and jQuery.](http://rosspenman.com/pushstate-jquery)

[chrisburton]

@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.

http://getkirby.com/forum/general/topic:155

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?

[rosspenman]

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

[rosspenman]

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

[chrisburton]

@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.

[chrisburton]

What the… http://chrisburton.me/dev

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.

[chrisburton]

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

http://stackoverflow.com/a/6506947/938664

[Kitty Giraudel]

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](https://github.com/wesnolte/Pajinate “jQuery Pajinate”).

However I might be off topic.

[chrisburton]

@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.

[TheDoc]

It looks like you’ve got it working now?

[chrisburton]

@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.

[Author]

Posts