CODEWITHSUNDEEP
javascriptjquerycssjquery-mobile
Learning
Learning

Reputation: 20001

scroll header text using jquerymobile

I am working on mobile version of a website & need to add a scrolling functionality when text is longer than certain pixels. I am trying to implement following logic into my project

Source of scrolling example

I want to implement same in my example so far i am not able to make it work my basic structure will remain same i only want to scroll text if screen is small to show 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 which is working & detects if complete title is visible or not then it should implement scrolling on for those elements which has long title not all.

Other approach i tried also failed as it scrolls all the elements not the one on which i do mouse hover

http://jsfiddle.net/yVtVE/21/

Upvotes: 1

Views: 684

Answers (1)

İlker Korkut
İlker Korkut

Reputation: 3250

Added extra parameter "elem" to animateTitle function, elem is defined when hover event done. I removed width:330px css code from .aaa class. Added extra control for .aaa element's width (while hovering .aaa class element).

Here is your solution : jsfiddle.net/yVtVe/22/

Upvotes: 3

Related Questions