Marquee Text When Text Overflows

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

Answers:

Answer

solving the conditional part

JS

var el = $('your element');
if (el.get(0).scrollWidth > el.width()) {
    // Your marquee code here
}
Answer
$(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

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

Answer

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

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us Javascript

©2020 All rights reserved.