Scrolling text

Every now and then we receive a task to do something that can not be described as the user-friendliest thing on the planet. Scrolling text would fall under that category. You know what I’m talking about: that stock market report scrolling thing that, back I the old days, we used to see on 50% of the sites… So, we received a task to pull this off and since we are going to do it, we might as well do it with style.

How

What is the right way to do it? As always, there are several ways. Some of you may say “use a marquee tag, and get it over with”. I am not going to do that. I will be a good web standards designer and I will put some more effort in it.

What I am going to do is: I am going to use two div elements, one inside the other. I will keep the markup as clean as it can be. No inline styling or inline scripting. Outside div will act as a container. With the little help of javascript, inner (content) div will move towards the left by changing the value of its left property. Once the content goes outside the container it will be put back on the starting point and loop forever. On mouse over scrolling will stop. Just like old times :) .