CODEWITHSUNDEEP
jquery
griegs
griegs

Reputation: 22760

jQuery HTML transitions

I have a search results list that has say 100 items in it. When displayed the browser scroll bar appears. no problem so far.

However, when the user now searches again, this time netting only 8 results, the results fit on the page and the scroll bar disappears. Again, no problem.

However what I now want to do is to make this look fancy. So I want to fade out the results, then fade in the new ones.

The problem is that as you fade out, the whole window resizes, as it's designed to do, the scroll bar goes and then the new results are displayed. If the new results require a scroll bar then this looks kinda odd as it first disappears then reappears.

Is there a purely jQuery way to put off the window resize, and hence keep the scroll bar visible, until the next load of results has been fully shown?

The effect I'm looking for is that if both results required a scroll bar then you fade out the first results, scroll bar stays, fade in the next, scroll bar stays. rather than have it disappear and then reappear.

Upvotes: 1

Views: 118

Answers (2)

Coby
Coby

Reputation: 1528

DEMO — How's this for an elaborate proof-of-concept?

The basic idea is it maintains the existing vertical scrollbar until the replacement comes in.

// Specify the height of the container, for example, height:120px;
$('.container').height($('.container').height());
// Hide currently visible content.
// Load in new content.
// Reset the height of the container i.e. height:auto;
$('.container').height('');

Upvotes: 1

jfriend00
jfriend00

Reputation: 707148

The vertical scrollbar appears based on the height of the content in your document as compared to the window height. So, the scrollbar appears when you add the content to the document that it taller than the window or disappears when the content is no longer taller than the window.

If you want to control the scrollbar during the transition and make it independent of the content height, then you will have to manually force the scrollbar on or off using CSS depending upon what you're trying to do. This can be done by setting the overflow-y style property on the body object. For example:

$(document.body).css("overflow-y", "scroll");

will force the scrollbar to stay on. You can see the options for overflow-y here.

Upvotes: 1

Related Questions