Search code examples
htmlmarquee

How to make html text scroll when div size exceeded?


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>

Solution

  • 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.