Jquery Script conflicts with buttons div

Question

I am learning JQuery and trying to create cycling text through images but I have a problem with buttons div (containermain). An example is here: http://jsfiddle.net/zAZst/7/ where last three images are buttons and shouldn't have any effect on the pictures (first three) above. If you hover over images (first three) it works perfectly but if hovered over buttons (last three images) the script is corrupted and stops working. Could you please help me to fix the script so that if hovered over buttons (last three images) then there is no effect over the cycling text. Thanks.

Answer 1

I see you have these lines:

$('img').on('mouseover', function() {
    clearInterval(intervalId);
    displayTitle($(this).parents('div').attr('id').substring(5));
}).on('mouseout', function() {
    currentImg = $(this).parents('div').attr('id').substring(5);
    startLoop();
})

This makes the mouseover on "any" img in the document to stop the cycling. You could add a class to the images in the cycle, like

class="img_cycle"

and then change the first line of the javascript on() function inserting a selector, like this:

$('img.img_cycle').on('mouseover', function() {
    clearInterval(intervalId);
    displayTitle($(this).parents('div').attr('id').substring(5));
}).on('mouseout', function() {
    currentImg = $(this).parents('div').attr('id').substring(5);
    startLoop();
})

Hope this helps :)

EDIT: i made some typo in the funciton. Here is a JSFIddle working version: http://jsfiddle.net/zAZst/8/ :)

Answer 2

The problem is that the selector for the mouseover and mouseout events applies to the button images, as well as the images at the top. When you mouse over the images at the top, it looks for the div in the immediate parents and pulls the id attribute, which exists and can have "substring" called on it. The button images however don't have an id in the immediate parent div. The actual error is Uncaught TypeError: Cannot call method 'substring' of undefined, because it can't call substring on a div id that doesn't exist.