fadeIn(), fadeOut()

JavaScript
1

I have the following function to fade a certain div out and fade two other divs in

$("#background_wrapper").delay(6000).fadeOut("slow", function() {
    $("#wrapper").fadeIn("fast");
    $("#footer").fadeIn("fast");
});

The problem with this approach is that the combined heights of divs #wrapper and #footer exceeds a height of 100% so there will be a scrollbar where div #background_wrapper has a hide of 100%; so there is no scrollbar. Because of that the transition end with a shock. Is there any way to avoid this?

Thank you in advance

2

Not sure I get it, but try overflow:visible on whatever contains wrapper & footer and/or set a delay on the wrapper/footer fadeIn

3

It’s always good to see this on a test page so we can understand what the transition’s “shock” is.

4

If the issue is the viewport scrollbar appearing and disappearing then you could set the scrollbar to display by default and then there will be no change in the content area.

html{overflow-y:scroll}
5

Hi all, thank you for the reply. @Paul. That is/was indeed the issue. The only problem I have now that when the overlay is fading out and the wrapper and footer are fading in that there suddenly are two scrollbars? I can’t figure what the reason could be?

6 
#wrapper, #footer{
overflow-y:hidden;
}

#wrapper::-webkit-scrollbar, #footer::-webkit-scrollbar { 
display: none; 
}
7

Hi pr0c3ss. Thank you for the reply. I had the overflow on #wrapper and #footer already. I added the second part you suggested but still get the second scrollbar?

8

Wheres the scrollbar showing? Try making wrapper/footer 300px in height to confirm its being added from these. If the scroll bar is 300px then you know it is.

Perhaps then try

#wrapper, #footer{
overflow-y:hidden !important;
}

#wrapper::-webkit-scrollbar, #footer::-webkit-scrollbar { 
display: none !important; 
}
9

Hi pr0c3ss I tried it with the 300px height, and there is no scrollbar at all. I added the changes you gave me but no difference.

10

Got a website?

11

Hi Ryan. No sorry I wish I had. I can show the html and css when needed

12

Could you get a codepen which at least replicates the problem?

13

Gonna try Ryan and keep you informed, thanks

14

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.