JQuery on clicks

[matfish]

Hi there,

 

I'm using JQuery to click "View Basket" which an DIV overlay then appears with your items in the div.

I'm also using a body onclick so you can click anywhere on the page which then hides the basket.

 

But I've added links in the Div Overlay now so you can remove an item from the basket, but the body onclick kicks in and just hides the Div again.

 

Any ideas how I can click anywhere on the page to hide the Div overlay but also have the functionality to click a link within the Div and not hide the Div?

 

Many thanks

[trq]

The idea doesn't really sound that intuitive to me, I'd be more inclined to have a simple close button or something on your overlay basket but anyway....

 

Only bind the click event to the body element when your 'basket' overlay is active.

[matfish]

There is a close button, but customer feedback and analytic's are showing they are clicking on the white area of the body of the page rather than clicking the close button. Stupid people.

 

I'll check out binding... thanks

[haku]

You want to stop the event from propagating (bubbling) up the DOM. You can do this in two ways:

 

1) Call stopPropagation()

2) return False (this will prevent your links from doing anything not defined in your script though).

[matfish]

Hi there,

 

the code I have so far is:

 

<script>

function showDiv(){
if($('#YourDiv').is(":visible")){
	$('#YourDiv').hide();
}else{	
	$('#YourDiv').show(function(){
		$('.fullWindow').click(function(){
			$('#YourDiv').hide();				   
		});
	});
}//
}//showDiv()

</script>

 

I'm not sure how to use bind yet so when the .fullWindow (which is a div around the whole page) is clicked it hides the Div overlay and doesn't let me action a click within the Div.

 

Also, there seems to be a bit of a transition/animation where it slides down rather than just showing immediately. Any idea how to remove the animation?

 

Thanks for your help