CSS/JQuery powered sideways scrolling text on hover

jquery css ellipsis
appi2012 picture appi2012 · Jan 21, 2011 · Viewed 11.1k times · Source

I have a twitter feed on a website I run. However, it gets cut off on small screens. I have a bar tall enough for 1 line of text in which I have the latest tweet. I want the tweet to ellipsize or fade out at the end if it is too long. But on hover, I want the text to slide slowly to the left, thus exposing the hidden part.

This effect is used on the iPod classic when you highlight a song that has a title that is wider than the screen. (I hope you understand what I'm going for.)

I'm just curious how I would go about implementing something like this? How can I force the text to stay on one line?

Answer

sdleihssirhc picture sdleihssirhc · Jan 21, 2011

At last, here's my entry: http://jsfiddle.net/sdleihssirhc/AYYQe/3/

Cool stuff:

  1. Library agnostic
  2. Uses scrollLeft instead of absolute positioning, so it's smoother and faster
  3. Uses text-overflow:ellipsis instead of adding any DOM elements

Related questions

How do I add a class to a given element?

I have an element that already has a class: <div class="someclass"> <img ... id="image1" name="image1" /> </div> Now I want to create a JavaScript function that will add a class to the div (…

Read More
How can I remove a style added with .css() function?

I'm changing CSS with jQuery and I wish to remove the styling I'm adding based on the input value: if(color != '000000') $("body").css("background-color", color); else // remove style ? How can I do this? Note that the line above …

Read More
Slide right to left?

How can I have a div go from collapsed to expanded (and vice versa), but do so from right to left? Most everything I see out there is always left to right.

Read More