Jquery .hide problem

Question

I'm using jquery to show animated MSN like window at the bottom of the page.

Jquery code:

$(document).ready(function() {
$(" .inner").stop().animate({height:'142px'},{queue:false, duration:600});

$(' .close').click(function(event) {
$(' .inner').hide();
});
$(' .inner').click(function() {
location.replace("somepage.php");
});
});

The CSS:

.close {height:14px; z-index:100; position: absolute; margin-left:174px; margin-top:12px;    border:1px solid #F00;}
.inner {position:absolute;bottom:0;width:201px;height:117px;right: 0; margin-right:10px; float:left; z-index:-1; display:block; cursor:pointer;}

The HTML:

<div class="inner"><div class="close"><img src="img/close.png" width="9" height="8" /></div><img src="img/window.png" width="201" height="117" /></div>

The problem that I have with this code is that the close button (showing at the right top corner of .inner DIV) can't fire Jquery .hide function.

Why?

Answer 1

$('div.close > img').click(function(event) {
    $('div.inner').hide();
});

should fire the event

Answer 2

Try making your img an non inline element.

#img_close {
display:block;}


<img id="img_close" src="img/close.png" width="9" height="8" />

Not 100% sure that might help.

Answer 3

What happens if you change the click handler on .inner to apply just to the window image instead? You might also consider returning false from the .close handler to make sure the event doesn't bubble up to the click handler that's going to change the location. I suspect that both of these are being fired and the location changes -- and your div gets re-animated.

$('.close').click(function(event) {
    $('.inner').hide();
    return false;
});

$('.inner > img').click( function() {
      location.replace('somepage.php');
});

The latter uses the "parent/child" selector so that the handler is only applied to the image that is the direct child of the DIV. BTW, what's up with the spaces before the class selector? I'd have to look at the code to see if it matters, but I've never seen that before.

Answer 4

Your inner div surrounds the close div, so any click on the image to close will cause the page to reload.