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

Bidirectional data binding in Angular 2 for the class attribute

Reposition the checked box to the top of the list

The URL's ajax GET request is timing out despite it working fine in browsers and CURL

The main menu items in jQuery do not display the child sub menu upon clicking

Converting php array submitted from a form using ajax

Sending a different name for the jQuery parameter

Mapping a JavaScript object to an MVC model: A comprehensive guide

Make a JSONP request with the MIME Type set to text/plain

Can someone please provide me with tips on how to prevent jQuery validate from automatically validating?

Transfer the value of a variable within the local scope to the dragstart event handler during the dynamic generation of an input element

Exponential calculator in Javascript

How to make a line stand out in an HTML table using <td> tag: **Bold a

Calendar: Display upcoming dates within the next week starting from the current week

Hover over the div to center an SVG inside it

Is it possible to alter the background color once the content of an input field has been modified?

Guide to setting up a custom js file in Laravel admin template

The issue of Basic Bootstrap 5 Modal triggering twice is causing a frustrating experience

Using jQuery AJAX enforces the use of HTTPS

What is the reason that my link to test.xls is functioning properly but the one to the .txt file is not working?

The Everyday Explanation of Same Origin Policy