JQuery horizontal scroll text on mouseover

Question

I am very grateful for the help based on the following image:

Also, I'm trying to do (infinite) scrolling of green text in a div.title-holder . My goal is to scroll only with mouseOver and then reset to mouseOut div.container . I thought it would be a simple task with a little CSS and jQuery, but apparently this is not the case. Here is my HTML, CSS and the accompanying JS:

 <div class="container"> <div class="title-holder"> <a href="somelink.html">long text that needs to scroll</a> </div> <img src="someimage.jpg" /> </div> 

Matching CSS:

 div.title-holder { width:130px; height:20px; overflow:hidden; white-space:no-wrap; text-align:center; } div.title-holder a { } 

jQuery JS:

 $('div.container').hover( function () { var scrollingWidth = $(this).find('div.title-holder').find('a').width(); $(this).find('div.title-holder').stop(true, true).animate({scrollLeft: scrollingWidth}, { duration: 5000, easing: 'swing' }); }, function () { $(this).find('div.title-holder').stop(true, true).animate({scrollLeft: 0}, { duration: 5000, easing: 'swing' }); } ); 

Now this works fine, except for two problems:

• It does not scroll endlessly, but
• The scroll action is very heavily overloaded / jittery

I really hope someone had a similar requirement in the past and can shed light on this issue for me. Thanks!

Answer 1

I prefer to use setInterval. Perhaps this will help fiddle .

Answer 2

Do not do this! Scrolling through the text and information about the valleys looks like this: huge , usability problem .

Use this and you will annoy 80% of the users of the victims , and most of them will not read / see or ignore the title.

Name the names with the first 2 words in mind and show them that way if they absolutely must be too long.

... where the more link gives a div with the full name.

Answer 3

Here you go

Job demonstration

Hope this helps you.

Answer 4

Problem with your CSS! It is just to make it work. Just adding one line of CSS:

 white-space:nowrap; 

Here it is, the full code: http://jsfiddle.net/sMmkX/115/