9 posts
  • Has been part of the Envato Community for over 5 years
  • Has collected 1+ items on Envato Market

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>
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!

815 posts
  • Has referred 1+ members
  • Has sold $10,000+ on Envato Market
  • Has collected 1+ items on Envato Market
  • Contributed a free file of the month
+3 more

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

Helpful Information

  • Please read our community guidelines. Self promotion and discussion of piracy is not allowed.
  • Open a support ticket if you would like specific help with your account, deposits or purchases.
  • Item Support by authors is optional and may vary. Please see the Support tab on each item page.

Most of all, enjoy your time here. Thank you for being a valued Envato community member.

Post Reply

Format your entry with some basic HTML. Read the Full Details, or here is a refresher:

<strong></strong> to make things bold
<em></em> to emphasize
<ul><li> or <ol><li> to make lists
<h3> or <h4> to make headings
<pre></pre> for code blocks
<code></code> for a few words of code
<a></a> for links
<img> to paste in an image (it'll need to be hosted somewhere else though)
<blockquote></blockquote> to quote somebody

:grin: :shocked: :cry: Complete List of Smiley Codes