views:

41

answers:

0

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>