Question

Basically I have several absolute position divs, these are simply tabs which when clicked open and display content.

I also have vertical scrolling pagination (just like what Facebook has with the everlasting scrolling).

Now with the tabs, several of these are position several thousand pixels down the page, which means these are stretching the page and therefore there’s a huge white gap before vertical scrolling pagination kicks in.

I’ve tried

• Hiding all the divs via Jquery initially
• Wrapping them in a div and floating
• Different z-index
• Setting variations of body height.

My aim is to force the browser to ignore them, somehow.

Incase this helps:

For the tabs I’m using: TabSlideOut – http://www.building58.com/examples/tabSlideOut-muliple.html

For the scrolling pagination – http://www.contextllc.com/dev_tools/jQuery/scrollExtend/latest/jquery.scrollExtend.example.html

Answer 1

I hope I’m understanding your question:
You have divs that are given an absolute position, and you need to be able to hide them until an Event occurs on the page.

Something I find useful is “hiding” content off the view port when a simple .hide() isn’t what I need. (I have run into this with sprite maps.)

One method I use is creating a CSS class .hidden and invoking it with: $(selector).addClass('hidden');

.hidden{position: absolute; top: -9999px !important; left: -9999px !important;}

!important is… well, important. Simply put, if one class has !important, and another doesn’t, the one that does will take precedence, usually. If you start using JQuery to pass CSS manipulations, you might end up overruling the !important.

Then I assign this class to the <div> I need out of the way. I also created a –[ jsfiddle ]– to demonstrate two ways of bringing the content into the view port.

The first (aTab) uses the .hidden technique. The second (bTab) uses a .slideToggle() which you could implement for either the next set of content you want to load, or in conjunction with your silder add-on.

Hope This Helps!