How To Change News Ticker Movement Direction To Be Left To Right

Question

I want to change news ticker movement from right to left, to be left to right because I want to use Arabic languages so that important to change movement direction to be left to right. I tried for days but I didn't find any solution

HTML :

$('#ticker2').html($('#ticker1').html());

var temp=0,intervalId=0;
$('#ticker1 li').each(function(){
  var offset=$(this).offset();
  var offsetLeft=offset.left;
  $(this).css({'left':offsetLeft+temp});
  temp=$(this).width()+temp+10;
});
$('#ticker1').css({'width':temp+40, 'margin-left':'20px'});
temp=0;


$('#ticker2 li').each(function(){
  var offset=$(this).offset();
  var offsetLeft=offset.left;
  $(this).css({'left':offsetLeft+temp});
  temp=$(this).width()+temp+10;
});
$('#ticker2').css({'width':temp+40,'margin-left':temp+40});


function abc(a,b) {  
    
    var marginLefta=(parseInt($("#"+a).css('marginLeft')));
    var marginLeftb=(parseInt($("#"+b).css('marginLeft')));
    if((-marginLefta<=$("#"+a).width())&&(-marginLefta<=$("#"+a).width())){
        $("#"+a).css({'margin-left':(marginLefta-1)+'px'});
    } else {
        $("#"+a).css({'margin-left':temp});
    }
    if((-marginLeftb<=$("#"+b).width())){
        $("#"+b).css({'margin-left':(marginLeftb-1)+'px'});
    } else {
        $("#"+b).css({'margin-left':temp});
    }
} 

     function start() { intervalId = window.setInterval(function() { abc('ticker1','ticker2'); }, 10) }

     $(function(){
          $('#news_ticker').mouseenter(function() { window.clearInterval(intervalId); });
    $('#news_ticker').mouseleave(function() { start(); })
          start();
     });

.news {
  color: #0065b3;
  border-left: 1px solid #0065b3;
  border-bottom: 1px solid #0065b3;
  font-family: 'Cairo', sans-serif;
}


#ticker1 li, #ticker2 li { 
  list-style-type:none; 
  float:left; 
  padding-right:20px;
  position:absolute;
  left:0px;
  }

#ticker1, #ticker2 { 
  position:relative;
  display:block;
  width:4000px; 
  margin:0; 
  content=""; display:table;
  height:0px; 

   }

#news_ticker{
  height:37px;
  overflow:hidden;
  color: #0065b3 !important;
  border-bottom: 1px solid #0065b3;
  border-left: 1px solid #0065b3;
  font-family: 'Cairo', sans-serif;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="news_ticker">
  <div id ="ticker1"  class="w3-col l9 m8 s8  w3-center w3-xlarge">

    <li><a href="#"> العنصر الأول </a></li>

    <li><a href="#"> العنصر الثاني </a></li>

    <li><a href="#"> العنصر الثالث </a></li>

    <li><a href="#"> العنصر الرابع </a></li>

    <li><a href="#"> العنصر الخامس </a></li>

  </div>
  <div id="ticker2"  class="w3-col l9 m8 s8 w3-center w3-xlarge "></div>
</div>

Answer 1

Changes need to be made to the function abc.

function abc(a,b) {  

    var marginLefta=(parseInt($("#"+a).css('marginLeft')));
    var marginLeftb=(parseInt($("#"+b).css('marginLeft')));

    if((marginLefta<=$("#"+a).width())){
        $("#"+a).css({'margin-left':(marginLefta+1)+'px'});
    } else {
        $("#"+a).css({'margin-left':-temp});
    }

    if((marginLeftb<=$("#"+b).width())){
        $("#"+b).css({'margin-left':(marginLeftb+1)+'px'});
    } else {
        $("#"+b).css({'margin-left':-temp});
    }
} 

The margin-left for the ticker items need to be incremented by +1 to move left to right. In addition, the temp variable needs to be the changed to negative as we are now working from left to right, instead right to left (The start position for text has changed to opposite axis).