I am currently working on the mobile version of a website and I need to incorporate a scrolling functionality for text that exceeds a certain length in pixels. I have been attempting to integrate the following logic into my project:
Here is the source of the scrolling example
I want to implement the same in my example. So far, I have not been successful in making it work. The basic structure will remain the same; I just want the text to scroll if the screen is small in order to display the complete title.
$("div.aaa h2").each(function(){
var m = $(this).width();
var n = $(this).find("div.aaa h2").width();
var o = m - n;
var z = $(this).find("div.aaa h2");
$(this).mouseenter(function(){
//alert ("title: " + m + " text: " + n + " diff: " + o);
if (n > m) {
z.animate({
left: o
}, 2000);
}
}).mouseleave(function(){
z.animate({
left: "0"
}, 2000);
});
});
I am open to any solution that works and can detect whether the complete title is visible or not so that scrolling is only implemented for elements with long titles, not all elements.
Another approach I tried was unsuccessful as it scrolled all elements instead of just the one I hovered over: