I'm a novice jquery developer and I wrote this code to create nested cycling divs using the JQuery Cycle plugin. I want to optimize this code because to be honest? It's working, but it's bad! real bad! Thank you!
Note: Anyone can use this code if he finds the need to and modify it in any way.
CSS:
.divCycle1
{
float: left;
width: 312px;
height: 111px;
border: 1px solid #000;
}
.divCycle2
{
float: left;
width: 624px;
height: 111px;
border: 1px solid #000;
}
Javascript:
$(document).ready(function() {
var cycNumber = 0;
var totalDivs = 3;
function cycleAfter(curr,next,opts)
{
// Info div for debugging can be removed
$("#info").text("Current Slide: " + (opts.currSlide + 1) + " Slide Count " + opts.slideCount + " | Cycle Number:" + cycNumber);
// If current slide number is = total slide number
if ((opts.currSlide + 1) == opts.slideCount)
{
$("#cycle2" + (cycNumber)).cycle('pause');
// If the current cycle number = total number of divs in the parent div jump to the first child div
if ((cycNumber + 1) == totalDivs)
{
cycNumber = 0;
$("#cycle2").cycle(cycNumber);
$("#cycle1").cycle(cycNumber);
}
else
{
// Else, increment the cycle number and jump to it
cycNumber += 1;
$("#cycle2").cycle(cycNumber);
$("#cycle1").cycle(cycNumber);
}
$("#cycle2" + cycNumber).cycle({ fx: 'scrollUp', timeout: 1000, after: cycleAfter });
}
}
$("#cycle1, #cycle2").cycle({
fx: 'scrollUp',
timeout: 0
});
$("#cycle20").cycle({
fx: 'scrollUp',
timeout: 3000,
after: cycleAfter
});
});
HTML:
<div id="cycle1" class="divCycle1">
<div>DIV 1</div>
<div>DIV 2</div>
<div>DIV 3</div>
</div>
<div id="cycle2" class="divCycle2">
<div id="cycle20" class="divCycle2">
<div title="n1">news 11</div>
<div title="n2">news 12</div>
<div title="n3">news 13</div>
<div title="n3">news 14</div>
</div>
<div id="cycle21" class="divCycle2">
<div title="n1">news 21</div>
<div title="n2">news 22</div>
<div title="n3">news 23</div>
<div title="n4">news 24</div>
<div title="n5">news 25</div>
<div title="n5">news 26</div>
</div>
<div id="cycle22" class="divCycle2">
<div title="n1">news 31</div>
<div title="n2">news 32</div>
<div title="n3">news 33</div>
<div title="n4">news 34</div>
<div title="n4">news 35</div>
<div title="n5">news 36</div>
</div>
</div>
<br />
<div id="info" style="float: left; border: 1px solid #000;"></div>