<div id="content-frame" style="overflow: hidden; width: 850px; height: 300px;"> <div id="all-content" style="height: 300px; width: largewidth;"> <div id="index" style="width: 850px; height: 300px; display: inline;">CONTENT</div> <div class="wrapper" id="about">CONTENT</div> . . . </div> </div>On a link click, the jQuery takes the #all-content wrapper and shifts it left or right depending on which link is clicked. However, the client doesn’t like that when making larger jumps between pages, the content moves super fast and is almost dizzying as it scrolls by. I want a way to hide/show the content in this sliding manner without having to scroll past every page…
I’ve thought about adding “display: hidden” to all but the active wrapper and then using jQuery to set display: block to the target content, shift the box left or right, and then hide the previously active content. Is there any clean way to achieve something like this? I haven’t actually coded it yet, but I’d imagine setting the display from hidden to block would push things around and mess up the “left” attribute.
Any help would be appreciated!
ps. I have wave invites if anyone needs one!
Try the codaslider plugin (google it). I believe with that you can set the speeds and such.
I looked at coda slider, but unfortunately it simply does what I wrote… The client doesn’t like that sliding between pages goes over all the pages. They want, regardless of which page your skipping to, for the content to just slide into view without sliding over all the other content.