Marquee text overflow text

Question

ok this is my problem. Suppose I have 3 div tags, they all have a width of 100 pixels:

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

Now, I have this css for divs:

 width:100px; overflow:hidden; 

What I want to do is if the text overflows, it scrolls as a selection, so all the text can be seen if you wait a bit. But I want the selection area to be displayed only when the text overflows.

How can I do it?

Thank you, Tony

Answer 1

conditional part decision

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>'); } )}; }); 

Will work in jQuery (I have not tested it yet. If you have any problems with the answer). You can optionally set the scroll attribute in css.

Answer 3

The conditional part can be easily resolved, as suggested by rennat.

Is it possible to use jQuery? If so, create your jQuery marquee plugin compatible html and just call $ (element) .marquee (); for animation. This is better than the ' <marquee> ' <marquee> , as it only uses divs with matching css attributes (avoiding the use of non-standard tags).

Answer 4

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

(Note that the selection area is a non-standard HTML tag.)