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 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.
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.
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.
@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 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.
@Hompimpa Correct, Ajax is technically working. However, the functionality is not correct. Above I stated that when you go to the homepage (/dev), click on one of the arrows and then click on About or Find at the top, those pages will load into that section where my articles are.
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
Newspage 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 tosite.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.
Do you mean you want the URL to change when clicking on the arrow? That would then make it linkable.
Yes & no. Realistically you'd have to use hashbang urls - but you could use HTAccess to rewrite urls.
I would use
history.pushStaterather than hashbangs. That would work better with JS disabled and with linking.I wrote a tutorial on
history.pushstateand jQuery.@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?
Yup. You'd use an
ifstatement to make sure it only AJAXed certain links. Or, alternatively, make your entire site AJAX!history.js isn't necessary, but if you want better browser support, you can use it.
@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.
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.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
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.
However I might be off topic.
@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.
It looks like you've got it working now?
@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.
What if I wrapped the content I need to load within a div
.ajaxe.g.
From there, I just call to
.load()the children of .ajax or perhaps .ajax altogether on a click event.I'm not sure if this will work. I've never worked with Ajax from scratch before.
If you want to load the article without affecting anything other than
<div class='ajax'>, I would suggest to use JSON:There's should be some JSON index parameters that can be used to load the data gradually.
It's just, I don't know about the JSON in Wordpress (or Kirby?). I used to handle Blogger JSON.
@Hompimpa Correct, Ajax is technically working. However, the functionality is not correct. Above I stated that when you go to the homepage (/dev), click on one of the arrows and then click on About or Find at the top, those pages will load into that section where my articles are.
I believe the problem is that Ajax is targeting ALL anchor links instead of my pagination links.
I was correct.
https://github.com/lautr/asfar/issues/1