Question

I am having a problem using the jQuery cycle plugin. On my page, I use it for image and text slideshows. The image slideshows work very well but one of the text slideshow is having a problem. Consider the code below. I am using the divs below as slides for the text slideshow.

<div>
    <p>This is slide1</p>
    <h4>author 1</h4>
</div>
<div>
    <p>This is slide2</p>
    <h4>author 2</h4>
</div>

If I use the code above as a static block in an HTML page, the slideshow works fine. However, if I generate the above piece of code through Javascript, I am getting an error. Here’s what the Chrome console is giving me.

Cannot read property ‘cycleW’ of undefined

I am not able to figure out what this problem is, so any help would be really appreciated. Thanks!

Answer 1

I ran into the same problem as you, and prevailing theories seem to be right – the cycle plugin is trying to parse the slides before the DOM has finished loading. To solve the problem I had to create a sceond function that would wait for the div to finish loading before it would start cycling, like so:

function startSlideshow(id, timeout) {
    var children = $("#" + id).children().size();
    // child div loaded yet?
    if (children <= 0) {
            // no! wait for it
            setTimeout("startSlideshow('" + id + "', '" + timeout + "')", timeout);
    }
    else {
            // yes, start the cycle plugin
            $("#" + id).cycle({ 
                    fx: 'fade',
                    timeout:  timeout,
                    speed: 500
            });
    }
}

So when I make an AJAX call to load the divs, I do it like so:

// load divs with multiple ajax calls
addRandomImages("slideshow");
addRandomImages("slideshow");
addRandomImages("slideshow");
// start the slideshow when the divs are loaded
startSlideshow("slideshow", 5000)