jquery.li-scroller.1.0.js scroll from left to right

Question

I developed News Website and I use jquery.li-scroller.1.0.js to view my breaking news, but this script scroll news from right to left. I want to scroll the news from left to right because I use the arabic language.

The script:

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);
        });            
    });    
};

Answer 1

You should change script and CSS. Notify that I've used this code for width = 880

you can check the working sample in this site : arabic.tasnimnews.com

Now, it is your .js file :

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);
    });
    var $mask = $strip.wrap("<div class='mask'></div>");
    var $tickercontainer = $strip.parent().wrap("<div class='tickercontainer'></div>");
    var containerWidth = $strip.parent().parent().width();
    $strip.width(stripWidth);
    var totalTravel = stripWidth + containerWidth;
    var defTiming = totalTravel / settings.travelocity;
    function scrollnews(spazio, tempo) {
        $strip.animate({ right: '-=' + spazio }, tempo, "linear", function () { $strip.css("right", 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);
    });
}); };

and change ul.newsticker block of your CSS file to this :

ul.newsticker { /* that's your list */
position: relative;
left: -880px;
list-style-type: none;
margin: 0;
padding: 0; }