0

I have an element, #i1, that is below another element, .close_button, and they each have a click event associated with them...the former's is called clickFade() while the latter's event is a anonymous function that is defined within the execution of the aforementioned clickFade().

When clickFade() is called by clicking on #i1, the parent div,#welcome, is fadedTo opacity .1 and #A is fadedIn. Also, unbind() is called for #i1 and the anonymous function mentioned above that is associated with a click event on .close_button is defined. This function just reverses the effects that clickFade() has when a close_button image is clicked.

I don't think the problem is a z-index issue (because I've tried it already and the close_button image is always visible on top). I also don't think it's a binding issue because the button works, but only when there's nothing underneath of it...for example, if the button is half overlapping one of the background images like #i1, the half that isn't on top of #i1 will trigger the event while the other half will not.

What's the problem here and how can I fix it?

Here are the gists for the HTML, CSS, and JS; here's the relevant code:

HTML:

<div id="welcome">
    <p id="welcomeText">Welcome</p>
    <img src="imgs/img1.jpg" id="i1" alt=null/>
</div>

<div id="A">
    <img src='imgs/close_button.gif' class='close_button' alt=null
    style="width: 10%; height: 10%"/>
</div>

JS:

function clickFade() {
    $('#welcome').fadeTo('slow',.1);
    $('#i1').unbind('click',clickFade);
    $('#i1').unbind('mouseover',mouseOverFunc);
    switch (this.id) {
        case "i1":
            $('#A').fadeIn('slow');
            $('.close_button').click(function() {
                $('#A').fadeOut('slow');
                $('#welcome').fadeTo('slow',1);
                $('#i1,#i3,#i5').click(clickFade).mouseover(mouseOverFunc);
            });
            break;
        .
        .
        .
    }

}

aweeeezy
  • 806
  • 1
  • 9
  • 22

1 Answers1

1

So you both have to set the z-index AND set position:relative for this to work.

z-index not working with fixed positioning and others. Good luck!

Community
  • 1
  • 1
Raydot
  • 1,458
  • 1
  • 23
  • 38
  • 1
    This did it. So the reason it did not work is not because my `#welcome` div had a `position: absolute;`, but because my `.close_button` image did not have a set `position`? – aweeeezy Jan 14 '15 at 00:13
  • Yes, everything involved has to have position:relative or there's no z-order. Makes sense if you think about it... – Raydot Jan 14 '15 at 21:08