Jump to content

old results sliding out, new ones sliding in


1internet

Recommended Posts

I have a search results page, and when someone clicks on the next link, or a higher page number, I want the current results to slide out to the left, whilst the new ones slide in from the right. Then if someone clicks on previous or a lower page number I want the current results to slide out to the right, and the new ones to slide in from the left.

 

Also if possible can it change the url when the new results come in?

 

I want to use jquery, and was wondering what is the best way to do this, would it be using animate? I have tried but cant seem to work it out.

Link to comment
Share on other sites

With jQuery, you would use Ajax and get the page loaded, put the return content in a DIV and use CSS to position it off the screen. Then just use $.animate() and move them to their locations. After moving it, you may want to actually put the content there (remove the style for location) so it doesn't pop out of it's place when someone resizes the browser.

 

Remember to remove the old data or you'll end up with a huge amount of data depending on what you're going through.

Link to comment
Share on other sites

That's not true, you can change the url without reloading, but I am not sure how it is done.

 

Indeed you can change the url. You do so with the history object's pushState() method. Google it.

 

Also, check out the fantastic library history.js https://github.com/balupton/History.js

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.