Marquee on mouseover and overflow

Question

I've searched high and low for a tutorial but I can't find one.

It is really a simple task that I see in lots of websites.
Pretty much like I have a menu, with a set width, and if my link is extra long, I want the overflow to be hidden, and when the user mouseovers the link, it will marquee the rest of the text.

It really shouldnt be this hard cuz I see it in lots of websites.

I really want to avoid using the marquee tag and go for javascript instead but my javascript is quite horrible and jquery is absolutely impossible to follow.

Any suggestions?

Answer 1

Try this:

http://jsfiddle.net/bryanjamesross/vsQFE/4/

The trick is that you will need individual container elements with overflow:hidden and set widths for each link, otherwise the whole container will scroll, instead of each link. In my example, I contained each <a> inside <li> tags that had set widths and overflow:hidden .

Then it's just a matter of hooking up the jQuery and animating correctly.

edited : fixed an animation bug, and made a the code a bit easier to follow

Answer 2

Just add this to your element

onmouseover="this.style.overflow=''" onmouseout="this.style.overflow='hidden'

Did it help?