I am working with jQuery news ticker plugin. And it worked fine, but when I put multiple news ticker in my page, news ticker control(start,stop,next/pre)
not work. when i click in control 1, this control worked with all news ticker box, But in need to worked control
for each box. i.e: control1 for box1, control2 for box2
. how to fix this? ONLINE DEMO (in action please click in first controlbar
.)
HTML:
<ul id="vertical-ticker">
<li>One Time</li>
<li>Baby</li>
<li>One Less Lonely Girl</li>
<li>Somebody to Love</li>
<li>Eenie Meenie</li>
<li>Never Say Never</li>
<li>U Smile</li>
</ul>
<p><a href="#" id="ticker-previous">Previous</a> / <a href="#" id="ticker-next">Next</a> / <a id="stop" href="#">Stop</a> / <a id="start" href="#">Start</a></p>
<ul id="vertical-ticker1">
<li>One Time</li>
<li>Baby</li>
<li>One Less Lonely Girl</li>
<li>Somebody to Love</li>
<li>Eenie Meenie</li>
<li>Never Say Never</li>
<li>U Smile</li>
</ul>
<p><a href="#" id="ticker-previous">Previous</a> / <a href="#" id="ticker-next">Next</a> / <a id="stop" href="#">Stop</a> / <a id="start" href="#">Start</a></p>
JQUERY:
$(function(){
$('#vertical-ticker').totemticker({
row_height : '100px',
next : '#ticker-next',
previous : '#ticker-previous',
stop : '#stop',
start : '#start',
mousestop : true,
});
});
$(function(){
$('#vertical-ticker1').totemticker({
row_height : '100px',
next : '#ticker-next',
previous : '#ticker-previous',
stop : '#stop',
start : '#start',
mousestop : true,
});
});
You have duplicate id's like
#ticker-next
,#start
,#stop
, etc. Those need to be unique both in the HTML and in the jQuery object map.