Page flickers due to forced scrolling

Spizzat2 · Mar 6, 2008

I've got some javascript that will show or hide an element on the page
when a user activates it. The problem I'm having is that the content
changes the length of the page, so if the user scrolls to the bottom
of the page with the element showing, and then said user hides the
element, the page has to shrink down back to its original length.
The problem is that while it's shrinking, the page flickers badly. It
looks bad enough to give someone seizures.
I'm not sure if this happens in other browsers because the page
currently only works in Firefox.

I've considered just automatically scrolling to the top of the page
when content is hidden, but I feel that could be just as disorienting
to the user. My other thought was to include the whole result inside a
div with a set height and allow that to scroll, but I'm not sure if
the div would handle changing content length any better than Firefox
does. Does anyone have experience with that?

Basically, I'm just wondering if anyone has any suggestions on how to
reduce/remove the effect.
Thanks.

SAM · Mar 6, 2008

Spizzat2 a écrit :

Basically, I'm just wondering if anyone has any suggestions on how to
reduce/remove the effect.

only to try to reduce : you cant want to keep same place except if you
work with style 'visibility' instead of 'display'

<html>
<style type="text/css">
div { height: 400px; border: 1px solid; margin: 10px auto; }
div.hid { display: none }
</style>
<script type="text/javascript">
function hs() {
var d = document.getElementById('fin');
if(d.className=='') {
d.className ='hid';
location = '#ok';
}
else {
d.className = '';
location = '#fin';
}
return false;
}
</script>
<div><h2>div 1</h2></div>
<div><h2>div 2</h2></div>
<div id="fin"><h2>special div to hide or show</h2></div>
<p><a href="#" id="ok" onclick="return hs();">[ Hide / Show ]</a></p>
<div><h2>div 3</h2></div>
</html>

Spizzat2 · Mar 13, 2008

Basically, I'm just wondering if anyone has any suggestions on how to

only to try to reduce : you cant want to keep same place except if you
work with style 'visibility' instead of 'display'

Thanks for the response, but I want the stuff to change the page's
length. I just don't like how Firefox handles it (again, I'm still not
sure about IE). The odd thing about it is, Firefox handles horizontal
changes just fine. It leaves the page scrolled to the right, and just
shows nothing. Then it waits for the user to scroll left. Maybe I've
simply found a genuine FF bug.

SAM · Mar 13, 2008

Spizzat2 a écrit :

Thanks for the response, but I want the stuff to change the page's
length. I just don't like how Firefox handles it (again, I'm still not
sure about IE). The odd thing about it is, Firefox handles horizontal
changes just fine. It leaves the page scrolled to the right, and just
shows nothing. Then it waits for the user to scroll left. Maybe I've
simply found a genuine FF bug.

that smells errors about CSS

I can't see what you say (horizontal scroll) with my little example
given in my previous answer.

can you give an url for a test ?

Spizzat2 · Mar 13, 2008

that smells errors about CSS

I can't see what you say (horizontal scroll) with my little example
given in my previous answer.

can you give an url for a test ?

The horizontal scroll example was in reference to my site, not to your
code.
Unfortunately, I can't give the url because it's a restricted access
site.

Problem with android and scrolling with <input textarea	5	May 18, 2022
HCaptcha - How to stop page from refreshing on submit if captcha is not checked/validated	1	Aug 29, 2023
Sending data from web page to Raspberry Pi	0	Nov 26, 2022
Image shifts to the right when export the page to pdf	4	May 5, 2023
A website that I couldn't make a screenshot of it nor save any page from.	1	Oct 29, 2023
How to use PDF-lib and how to center each line of texts on the page?	1	Aug 16, 2023
Help with Javascript on my wordpress page	1	Aug 31, 2023
NEED HELP How to refresh animation so the rest of page can load	0	Oct 4, 2021

Page flickers due to forced scrolling

Spizzat2

SAM

Spizzat2

SAM

Spizzat2

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads