Marquee Text When Text Overflows

Question

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

solving the conditional part

JS

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

Answer 2

$(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.