Jquery table column sliding effect

Question

I will need a Jquery script for a table sliding effect just like

http://sfsdirectdemo.projects.sourceflow.com/luke (middle plan table)

I Google it but have not any good result, anyone please help.

Film

Why not look at the code for the site you mentioned? If you want the exact same effect, then you have a perfect example to examine. – Outgroup

Answer 1

Here's an example that I believe does what you want:

http://jsfiddle.net/nheldman/GB7Hc/3/

The trick is to create an outer div with the width of the table you want to show, and an inner div that is the width of all of the columns that could be displayed if you slide.

Then you can just use jQuery animate() to scrollLeft the outer container by the width of each column.

Good luck!

Unexpressive

Thank you very much Noah, one more thing, is that possible for you to tweak the codes so if previous/next link reaches the first/last column then they become hidden? Just like the sample I posted, thanks again! – Film

Thank you so much Noah, although you code has a bug but I have figured out myself, I really appreciate your help! Thanks – Film

Answer 2

I had to do a very similar thing at one point. Here is a jsfiddle that I used to figure out the code. Hop it helps. http://jsfiddle.net/mstarkman/U7JHM/9/

Bethina