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.
Jquery: control multiple news ticker
-
17-01-2022 - |
Question
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,
});
});
Solution
OTHER TIPS
Change the ids of the start buttons, there should be different ids for start button for each of the newsticker.
$(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-next2',
previous : '#ticker-previous2',
stop : '#stop2',
start : '#start2',
mousestop : true,
});
});
You should change #vertical-ticker1
and ticker-previous1
and #ticker-next1
and #start
and #stop
too.
jsfiddle Live Demo
JavaScript
$(function(){
$('#vertical-ticker1').totemticker({
row_height : '100px',
next : '#ticker-next1',
previous : '#ticker-previous1',
stop : '#stop1',
start : '#start1',
mousestop : true,
});
});
HTML
<p><a href="#" id="ticker-previous1">Previous</a> / <a href="#" id="ticker-next1">Next</a> / <a id="stop1" href="#">Stop</a> / <a id="start1" href="#">Start</a></p>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow