Switching the background image of a div by clicking on a different div

Question

Switching the background image of a div by clicking on a different div

To start, you can locate all of my code right here.

The issue I'm encountering pertains to the following section.

var changePic = function (direction, id, array) {

    var intID = parseInt(id);
    var intDir = parseInt(direction);
    if (intID > 0) {
        intID = intID + intDir;
        currentID = intID;
        alert(array[intID].link);
        $('#lightbox').css("background-image", array[intID].link);
    } else if (intID == 0 && intDir == 1) {
        intID = intID + intDir;
        currentID = intID;
        alert(array[intID].link);
        $('#lightbox').css("background-image", array[intID].link);
    }
};

The goal for this function is to modify the background-image of the div id=lightbox to one specified in the provided array.

However, when clicking on the sidebar, it seems that the entire <div id=lightbox> is being removed as though the click was directed at the div itself rather than the sidebar. Nonetheless, upon inserting an alert within the function, it confirms that the event was triggered and some code within the function executed.

I suspect that clicking on the sidebar triggers two events - one for changing the background-image and another for removing the lightbox element again.

Is there a way to prevent the underlying div from responding to the click?

Furthermore, please feel free to correct me if I've misused any terms or violated proper posting etiquette. As a newcomer, any guidance from seasoned users would be greatly appreciated.

Thank you very much.

jquery html css background-image

Answer 1

Answer №1

To prevent event propagation in the sidebar events, you need to use stopPropagation().

Using event.stopPropagation():

This function stops the event from bubbling up through the DOM tree, preventing any parent handlers from being notified of the event.

Code Example:

$(document).on('click', '#leftBar', function (event) {
        event.stopPropagation();
        changePic(-1, currentID, activeArray);
    });

    $(document).on('click', '#rightBar', function (event) {
        event.stopPropagation();
        changePic(1, currentID, activeArray);
    });

Check out the Updated Fiddle:

http://jsfiddle.net/yfukm8kh/3/

If you want to learn more about Event Bubbling and Propagation, make sure to read up on it!

Answer 2

To prevent event propagation in the sidebar events, you need to use stopPropagation().

Using event.stopPropagation():

This function stops the event from bubbling up through the DOM tree, preventing any parent handlers from being notified of the event.

Code Example:

$(document).on('click', '#leftBar', function (event) {
        event.stopPropagation();
        changePic(-1, currentID, activeArray);
    });

    $(document).on('click', '#rightBar', function (event) {
        event.stopPropagation();
        changePic(1, currentID, activeArray);
    });

Check out the Updated Fiddle:

http://jsfiddle.net/yfukm8kh/3/

If you want to learn more about Event Bubbling and Propagation, make sure to read up on it!

Answer 3

Answer №2

Are you looking to target specifically the #lightbox element and not its contents?
You can achieve this by using the following code:

$('body > #lightbox').css("background-image", array[intID].link);

Answer 4

Are you looking to target specifically the #lightbox element and not its contents?
You can achieve this by using the following code:

$('body > #lightbox').css("background-image", array[intID].link);

Answer 5

Answer №3

To avoid triggering the click event for #lightbox, you can simply include return false; in the handlers for the right and left bars.
I made sure to move the click handler for #lightbox out of the click handler for .singapore to prevent multiple instances of this handler being added.

Check out the updated fiddle here.

$(document).on('click', '#leftBar', function () {
    changePic(-1, currentID, activeArray);
    return false;
});

$(document).on('click', '#rightBar', function () {
    changePic(1, currentID, activeArray);
    return false;
});

$('.singapore').click(function () {
    currentID = event.target.id;
    openThumbnail(singaporeArray, currentID);
});

$(document).on('click', '#lightbox', function () {
    $(this).remove();
});

Answer 6

To avoid triggering the click event for #lightbox, you can simply include return false; in the handlers for the right and left bars.
I made sure to move the click handler for #lightbox out of the click handler for .singapore to prevent multiple instances of this handler being added.

Check out the updated fiddle here.

$(document).on('click', '#leftBar', function () {
    changePic(-1, currentID, activeArray);
    return false;
});

$(document).on('click', '#rightBar', function () {
    changePic(1, currentID, activeArray);
    return false;
});

$('.singapore').click(function () {
    currentID = event.target.id;
    openThumbnail(singaporeArray, currentID);
});

$(document).on('click', '#lightbox', function () {
    $(this).remove();
});

Switching the background image of a div by clicking on a different div

Answer №1

Using event.stopPropagation():

Code Example:

Check out the Updated Fiddle:

Answer №2

Answer №3

Similar questions

What is the method to load only specific element contents using .load() rather than the entire web page?

Having trouble with a JQuery selector not functioning properly when trying to select a class in the HTML that contains a

Display various divs simultaneously based on the quantity of items in the dropdown menu

Is there a way to override the padding of a container?

Navigate through a given value in the event that the property undergoes a name change with each

How to center a text box within a div using CSS

What are effective ways to design a dialogue or conversation with CSS styling?

Generating examples of two models that are interdependent

Implementing a sorting mechanism for ajax data retrieval

Implementing a gradient effect on a specific image element within an HTML canvas with the help of jQuery

What is the best way to center this image horizontally within its variable-sized parent container?

Implement a counter in a JavaScript table, initializing it to zero

Ensuring Stringency in JQuery's '$' Selector

Container element refusing to grow in size while the footer remains fixed on the screen

Unleash the power of jQuery.keypress for lightning-fast text processing

jQuery Accordian malfunctioning for all elements except the first one in the list

Assigning a price to a list of pizza options within a dropdown menu

Battle of Cookies and User Preferences: Who Will Prevail?

How can we stop a form from being submitted when the input field is

Having trouble with submitting the jQuery form