Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery Cycle Error: Cannot read property 'cycleW' of undefined

Not sure why I'm getting this error and can't figure it out? The cycle works, I'm just getting this error in the console and would like to fix it. That's why I'm here now :)

I'm creating 3 different cycles on the same page with the same selector and using the pager for unique controls. This is what I have currently:

// Cycle Process individual samples - generate unique navs
$('.prospect-carousel').each(function(i) {
    $(this).cycle({
        fx:     'scrollHorz',
        speed:  500,
        pager: '.nav-pl' + i,
        pagerAnchorBuilder: function(idx, slide) { 
           return '.nav-pl'+i+' li:eq(' + idx + ') a'; 
        } 
    }).cycle('pause');
});

HTML:

<h6 class="carbon_heading">Top Prospects</h6>

    <ul id="tab-nav" class="nav nav-tabs">
      <li><a href="#c2012">2012</a></li>
      <li><a href="#c2013">2013</a></li>
      <li><a href="#c2014">2014</a></li>
    </ul>

    <div id="tab-wrap">
        <div id="c2012" class="tab-section">

            <div class="prospect-carousel">

                <div class="prospect-bio">
                    <span class="info">
                        <span class="badge">
                            RANK
                            <span class="rank">{count}</span>
                        </span>

                        <span class="name">{title} <em>{prospects_position_primary} <a href="{page_uri}">View Bio &raquo;</a></em></span>
                    </span>

                </div>
            </div>

            <ol class="prospect-list nav-pl0">
                <li><a href="#">{title} <span>{prospects_position_primary}</span></a></li>
            </ol>
            <p><i class="icon-th-list"></i> <a href="/rankings/">2012 Player Rankings</a></p>
        </div>

        <div id="c2013" class="tab-section">
            <div class="prospect-carousel">

                <div class="prospect-bio">
                    <span class="info">
                        <span class="badge">
                            RANK
                            <span class="rank">{count}</span>
                        </span>

                        <span class="name">{title} <em>{prospects_position_primary} <a href="{page_uri}">View Bio &raquo;</a></em></span>
                    </span>
                </div>
            </div>

            <ol class="prospect-list nav-pl1">
                <li><a href="#">{title} <span>{prospects_position_primary}</span></a></li>
            </ol>
            <p><i class="icon-th-list"></i> <a href="/rankings/2013">2013 Player Rankings</a></p>
        </div>

        <div id="c2014" class="tab-section">

            <div class="prospect-carousel">
                <div class="prospect-bio">
                    <span class="info">
                        <span class="badge">
                            RANK
                            <span class="rank">{count}</span>
                        </span>

                        <span class="name">{title} <em>{prospects_position_primary} <a href="{page_uri}">View Bio &raquo;</a></em></span>
                    </span>
                </div>
            </div>

            <ol class="prospect-list nav-pl2">
                <li><a href="#">{title} <span>{prospects_position_primary}</span></a></li>
            </ol>
            <p><i class="icon-th-list"></i> <a href="/rankings/2014">2014 Player Rankings</a></p>
        </div>
    </div>
enter code here
like image 319
Siebird Avatar asked Mar 27 '12 01:03

Siebird


1 Answers

I had Mike (developer of cycle) look at it and he said my third div was causing the issue b/c it was empty. He's going to fix this on the next release.

like image 145
Siebird Avatar answered Oct 14 '22 12:10

Siebird