Marquee Text When Text Overflows

Question

Hi all, well heres my problem. Lets say i have 3 div tags, all are 100pixels wide:

<--- DIV WIDTH --->
Text in div 1
Text in div two, it overflows
Text in div three
<--- DIV WIDTH --->

Now, currently i have this css for the divs:

width:100px;
overflow:hidden;

What i want to do is if the text overflows, it scrolls like a marquee so all the text can be seen if you wait a little bit. But i only want the marquee to show if the text overflows.

How would i do this?

Thx, Tony

Answer 1

$(function(){
  $box = $('div.box');
  $box.children().each(function(){
    if ($box.width() < $(this).width()) {
      $(this).wrap('<marquee>');
    }
  )};
});

Would work in jQuery (I haven't checked it yet. If you have any problems with it reply). Optionally, you could set a scroll attribute in css.

Answer 2

This wouldn't work for your problem as described (plain text in a div), but if that's just a minimal case, you can use overflow: auto, which will add a horizontal scrollbar if it overflows.

(Note also that marquee is a non-standard HTML tag.)

Answer 3

solving the conditional part

JS

var el = $('your element');
if (el.get(0).scrollWidth > el.width()) {
    // Your marquee code here
}

Answer 4

The conditional part can be resolved easily like rennat proposed.

Is it possible for you to use jQuery? If it is, build your html compatible with jQuery marquee plugin, and just call $(element).marquee(); for the animation. It's better than the '<marquee>' tag since it uses only divs with proper css attributes (avoiding non-standard tags use).