JavaScript scrolling and photosensitive epilepsy
Posted: Sat Mar 24, 2007 10:01 am
I only know about photosensitive epilepsy because I'm "suspected" of having it myself. If something flickers or flashes at a certain frame rate per second (i think the bad levels are between 20 and 80 frames per second -- could be wrong) it can trigger seizures. That's why my doctor recommended getting an LCD monitor and setting the refresh rate to 75 or higher.
I made this piece of code, which takes an element and increases it's height by 1 every millisecond. Then also decreases the height by 1 every millisecond.. to produce a scrolling "showing" and "hiding" effect. I want to use this on one of my menus but I got to thinking about the "flickering" every millisecond the element's height is updated.
Does this matter? Does the monitor control the "flickering"? Is that considered flickering or flashing when javascript updates the height? Is the element continually "updated" or is it redrawn with every iteration?
Sorry for the stupid question..........
Here is the code
I made this piece of code, which takes an element and increases it's height by 1 every millisecond. Then also decreases the height by 1 every millisecond.. to produce a scrolling "showing" and "hiding" effect. I want to use this on one of my menus but I got to thinking about the "flickering" every millisecond the element's height is updated.
Does this matter? Does the monitor control the "flickering"? Is that considered flickering or flashing when javascript updates the height? Is the element continually "updated" or is it redrawn with every iteration?
Sorry for the stupid question..........
Here is the code
Code: Select all
<html>
<head>
<title>test</title>
</head>
<body>
<script type="text/javascript">
function show(el, heightto, num)
{
if(num == heightto)
{
return;
}
document.getElementById(el).style.height = num+'px';
num=num+1;
setTimeout("show('"+el+"',"+heightto+", "+num+")", 1);
}
function showit(el)
{
document.getElementById(el).style.display = 'block';
}
function hide(el, heightto, num)
{
if(num == heightto)
{
document.getElementById(el).style.display = 'none';
return;
}
document.getElementById(el).style.height = num+'px';
num=num-1;
setTimeout("hide('"+el+"',"+heightto+", "+num+")", 1);
}
</script>
<a href="javascript:void(0);" onclick="showit('div1'); show('div1', 300, 0);">+++++++++</a>
<a href="javascript:void(0);" onclick="hide('div1', 0, 300);">---------</a>
<div id="div1" style="display: none; overflow: hidden; border: solid 1px #000;">stuff</div>
</body>
</html>