I need to switch the news ticker movement direction from right to left to left to right because I will be using Arabic language, so it is crucial to change the movement direction. Despite trying for several days, I have been unable to find a 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="";
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>