Skip to content

Hidden (filtered out) items receive mouse events (i.e. clicks) instead of visible (filtered in) items. #3

Description

@unstatablesoul

Currently filtered out elements get opacity: 0 (or when opacity is not supported, alpha is modified), hence filtered out elements are not visible and filtered in elements might take over their position (i.e. end up with the same top,left values).
The problem is that if hidden element A preceeds visible element B (in DOM order) and they happend to occupy the same position, then mouse events on that position are captured by hidden element A which is not desirable.
The workaround i used so that the visible element is the one that triggers the events is to modify the z-order during the custom filter function (not sure if there is a more elegant solution):

window.gallery.filter(function(el) {
            if(items.is(el)) {
                $(el).removeClass('buried'); // fixes z-order
                return true;
            } else {
                $(el).addClass('buried'); // fixes z-order
                return false;
            }
});

where gallery is the guggenheim instance and items is a jQuery object with the filtered in elements.
the css:

.buried {
   z-index: -1;
}

Btw guggenheim.js is great.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions