Grow your CSS skills. Land your dream job.

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

    # 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.](http://rosspenman.com/pushstate-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.

    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?

    # 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… 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.

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

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

    # 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](https://github.com/wesnolte/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.

*May or may not contain any actual "CSS" or "Tricks".