CODEWITHSUNDEEP
javascriptjqueryjquery-plugins
Mohamed Samy
Mohamed Samy

Reputation: 941

Cannot change the direction of news ticker

I'm trying to use the following library:

liScroll (a jQuery News Ticker made easy) 1.0 ( Demo )

I put it in my website and it's working perfectly, but only with RTL direction, the problem is that I can't change it to scroll from left to right. I tried to change the JavaScript file but it isn't working. Here is my code:

jQuery.fn.liScroll = function(settings) {
    settings = jQuery.extend({
    travelocity: 0.07
    }, settings);       
    return this.each(function(){
            var $strip = jQuery(this);
            $strip.addClass("newsticker")
            var stripWidth = 1;
            $strip.find("li").each(function(i){
            stripWidth += jQuery(this, i).outerWidth(true); // thanks to Michael Haszprunar and Fabien Volpi
            });
            var $mask = $strip.wrap("<div class='mask'></div>");
            var $tickercontainer = $strip.parent().wrap("<div class='tickercontainer'></div>");                             
            var containerWidth = $strip.parent().parent().width();  //a.k.a. 'mask' width   
            $strip.width(stripWidth);           
            var totalTravel = stripWidth+containerWidth;
            var defTiming = totalTravel/settings.travelocity;   // thanks to Scott Waye     
            function scrollnews(spazio, tempo){
            $strip.animate({left: '-='+ spazio}, tempo, "linear", function(){$strip.css("left", containerWidth); scrollnews(totalTravel, defTiming);});
            }
            scrollnews(totalTravel, defTiming);             
            $strip.hover(function(){
            jQuery(this).stop();
            },
            function(){
            var offset = jQuery(this).offset();
            var residualSpace = offset.left + stripWidth;
            var residualTime = residualSpace/settings.travelocity;
            scrollnews(residualSpace, residualTime);
            });         
    });};

Maybe I also need to change the CSS code?

Upvotes: 2

Views: 1541

Answers (2)

Samuel
Samuel

Reputation: 2156

Demo: here

Update the HTML like so: 

<ul id="ticker01" style="left: -700px">
    <li><span>10/10/2007</span><a href="#">The first thing ...</a></li>
    <li><span>10/10/2007</span><a href="#">End up doing is ...</a></li>
    <li><span>10/10/2007</span><a href="#">The code that you ...</a></li>
    <!-- eccetera -->
</ul>

And the JS like so: 

jQuery.fn.liScroll = function(settings) {
    settings = jQuery.extend({
        travelocity: 0.07
    }, settings);
    return this.each(function() {
        var $strip = jQuery(this);
        $strip.addClass("newsticker")
        var stripWidth = 1;
        $strip.find("li").each(function(i) {
            stripWidth += jQuery(this, i).outerWidth(true); // thanks to Michael Haszprunar and Fabien Volpi
        });
        var $mask = $strip.wrap("<div class='mask'></div>");
        var $tickercontainer = $strip.parent().wrap("<div class='tickercontainer'></div>");
        var containerWidth = $strip.parent().parent().width(); //a.k.a. 'mask' width  
        $strip.width(stripWidth);
        var totalTravel = stripWidth + containerWidth;
        var defTiming = totalTravel / settings.travelocity; // thanks to Scott Waye 

        function scrollnews(spazio, tempo) {
            $strip.animate({
                left: '+=' + spazio
            }, tempo, "linear", function() {
                $strip.css("left", -stripWidth);
                scrollnews(totalTravel, defTiming);
            });
        }
        scrollnews(totalTravel, defTiming);
        $strip.hover(function() {
                jQuery(this).stop();
            },
            function() {
                var offset = jQuery(this).offset();
                var residualSpace = offset.left + stripWidth;
                var residualTime = residualSpace / settings.travelocity;
                scrollnews(residualSpace, residualTime);
            });
    });
};

Demo: here

Upvotes: 1

Tobias Ramforth
Tobias Ramforth

Reputation: 171

I think I got it:

jQuery.fn.liScroll2 = function(settings) {
        settings = jQuery.extend({
        travelocity: 0.07
        }, settings);       
        return this.each(function(){
                var $strip = jQuery(this);
                $strip.addClass("newsticker")
                var stripWidth = 1;
                $strip.find("li").each(function(i){
                stripWidth += jQuery(this, i).outerWidth(true); // thanks to Michael Haszprunar and Fabien Volpi
                });
                var $mask = $strip.wrap("<div class='mask'></div>");
                var $tickercontainer = $strip.parent().wrap("<div class='tickercontainer'></div>");                             
                var containerWidth = $strip.parent().parent().width();  //a.k.a. 'mask' width   
            $strip.css("left", -containerWidth);
                $strip.width(stripWidth);           
                var totalTravel = stripWidth+containerWidth;
                var defTiming = totalTravel/settings.travelocity;   // thanks to Scott Waye     
                function scrollnews(spazio, tempo){
                $strip.animate({left: '-='+ spazio}, tempo, "linear", function(){$strip.css("left", -containerWidth); scrollnews(totalTravel * -1, defTiming);});
                }
                scrollnews(totalTravel, defTiming);             
                $strip.hover(function(){
                jQuery(this).stop();
                },
                function(){
                var offset = jQuery(this).offset();
                var residualSpace = offset.left + stripWidth;
                var residualTime = residualSpace/settings.travelocity;
                scrollnews(residualSpace * -1, residualTime);
                });         
        }); 
};

I had to change the starting position of the strip to a negative value and multiply the totalTravel by -1.

See an example here: http://jsfiddle.net/9Tkj2/2/

Upvotes: 0

Related Questions