CODEWITHSUNDEEP
jquerycss
Sergio
Sergio

Reputation: 1239

Jquery .hide problem

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?

Upvotes: 0

Views: 238

Answers (4)

stealthcopter
stealthcopter

Reputation: 14206

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

Upvotes: 0

tvanfosson
tvanfosson

Reputation: 532745

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.

Upvotes: 1

Kyle
Kyle

Reputation: 67244

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.

Upvotes: 0

rahul
rahul

Reputation: 187110

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

should fire the event

Upvotes: 3

Related Questions