I have an html page that is displayed on a television screen sort of like digital signage. Because of this, everything that is on the page has to be displayed without any user input. I have some records stored in a mySQL database that are displayed in a list format and what I would like to do is when the list gets to big to be displayed, it scrolls up (maybe one line at a time) similar to how a scrolling marquee works.
My ideas on how to do this are fragmented at best, I was hoping someone could point me in the right direction.
btw, I know using the marquee tag is "evil" to a lot of developers, however in this case because there is no user input, I don't see any other way.
Edit: What I had in mind was to somehow get the div height and then use an if statement to trigger a marquee when the height exceeds a predetermined size.
Edit: Here is what I've got so far, using JavaScript to figure out the div height...
<script type="text/javascript">
function divHeight()
{
var height = document.getElementById("list").offsetHeight;
if (height > 500)
{
activate marquee effect.
return;
}
else
{
don't activate marquee effect.
return;
}
}
</script>
Then...
<body onLoad="divHeight()">
<div id="list">
my list goes here
</div>
</body>
Ok, I figured out a nice way to do this with very little coding. It uses JavaScript
to alter the div
contents if the size is exceeded. I've got the text that I want to scroll inside div id="scroll"
and that div
is populated with my data from the mySQL
database using php
. Here is the script:
<script type="text/javascript">
var div = document.getElementById("scroll");
var height = div.offsetHeight;
var content = div.innerHTML;
if (height > 500)
{
div.innerHTML = "<marquee direction=\"up\" scrollamount=\"2\" height=\"500px\" onfinish=\"redirect()\" loop=\"1\">" + content + "</marquee>";
}
function redirect()
{
refresh=window.setTimeout(function(){location.href=""},0);
}
</script>
Since this application is for digital signage, I have it redirect once the full marquee
content has been displayed, that's why I have onfinish="redirect"
and then a function to redirect.
Hopefully this will help someone out, I know I spent a lot of time scratching my head over it.