Home/ Questions/Q 8802375
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T01:04:22+00:00

I have an html page that is displayed on a television screen sort of

  • 0

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0