CODEWITHSUNDEEP
firefoxjquery
Basic
Basic

Reputation: 26766

Click event not firing on a div containing overlaid images in Firefox

I'm trying to show a popup when someone clicks on a youtube thumbnail. This works fine in Chrome but the click event isn't firing in Firefox.

I've managed to cut the problem down to what I've got below (Fiddle here)

<div class="Youtube">
    <img class="Thumb" src="http://img.youtube.com/vi/RsYlGFBEpM4/mqdefault.jpg" alt="Marrakech"/>
    <img class="PlayButton" src="http://ec2-54-229-110-227.eu-west-1.compute.amazonaws.com/Content/images/VideoPlay.png" alt="Play button"/>
</div>

The attach is happening fine but the handler doesn't get called in Firefox

$(".Youtube").click(function () {
    alert('clicked');
    return false;
});

I suspect it's something to do with the positioning/layout of the div or images

.Youtube
{
    margin: 5px;
    width: 320px;
    height: 180px;
    overflow: hidden;
    cursor: pointer;
    border: solid 5px #f00;
    position: relative;
}

div.Youtube img.Thumb {
    position:relative;
    z-index:-1;
}

.Youtube img.PlayButton {
    height: auto;
    width: 160px;
    position:relative;
    left:20px;
    top:-160px;
    z-index:-1;
    opacity: .7;
}

Can someone point out my mistake? (I've just noticed the border of the div catches clicks are appropriate, just not any content)

Upvotes: 1

Views: 972

Answers (3)

Irvin Dominin
Irvin Dominin

Reputation: 30993

With a positive z-index set on .Youtube class works fine on FF too.

Code:

.Youtube
{
    margin: 5px;
    width: 320px;
    height: 180px;
    overflow: hidden;
    cursor: pointer;
    border: solid 5px #f00;
    position: relative;
    z-index: 1;
}

I'm searching for the reason on the net...

Demo: http://jsfiddle.net/IrvinDominin/6Zkua/

EDIT

I think the reason why is that we are defining all the elements in the same stacking context relative, but firefox in this context assume undefined if the z-index is not set so the element will be always at lower index.

Reference: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context

Upvotes: 1

Mark Erasmus
Mark Erasmus

Reputation: 2385

Try : This updated jsFiddle - removed superfluous use of z-index property.

.Youtube
{
    margin: 5px;
    width: 320px;
    height: 180px;
    overflow: hidden;
    cursor: pointer;
    border: solid 5px #f00;
    position: relative;
 }

div.Youtube img.Thumb {
    position:relative;
}

.Youtube img.PlayButton {
    height: auto;
    width: 160px;
    position:relative;
    left:20px;
    top:-160px;
    opacity: .7;
}

Upvotes: 2

Farhan
Farhan

Reputation: 752

Explicitly adding z-index to Div makes it work on firefox

z-index:0

http://jsfiddle.net/LsqAq/3/

Upvotes: 1

Related Questions