5

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.

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Michael
  • 117
  • 1
  • 2
  • 7
  • 1
    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. – Sam Dufel Feb 12 '11 at 08:23

2 Answers2

10

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!

Noah Heldman
  • 6,724
  • 3
  • 40
  • 40
  • 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! – Michael Feb 12 '11 at 10:08
  • Thank you so much Noah, although you code has a bug but I have figured out myself, I really appreciate your help! Thanks – Michael Feb 16 '11 at 03:47
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/

Mark S.
  • 1,516
  • 1
  • 16
  • 26