I’m making a site right now for a client that has a small content div (850px x 300px) and tabs along the top. When you click on the tabs, I have it set up so that the content slides into view within the frame. Without posting all my code, it’s essentially set up like so (doing inline styling to convey the message):
<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!
what do you use for tabs functionality?
if you have the source of the plugin, you can try to make method callbacks, so onclick hides the content, and another callback shows it when animation is done (advanced) – but then you loose sliding manner
other idea you’ve mentioned can work properly, but I recommend visibility:hidden – put this in a css class and add this class to all elements but active. I think then jQuery will calculate offsets properly