Need jQuery help - Webmaster Forum - Web Design, Programming and SEO forums

08-24-2008, 10:25 AM

dicetomato

Status: Member
Join date: Jan 2006
Location: Orange County, CA
Expertise:
Software:

Posts: 117

iTrader: 0 / 0%

dicetomato is on a distinguished road

Need jQuery help

Hello, having some problem with javascription.

What I'm trying to accomplish is:

1. on default, div#options-dropdown is hidden.
2. When user clicks on div#options, #options-dropdown shows up.
3. After that, when a user clicks on any part of the browser other than #options-dropdown, the #options-dropdown hides.

Here is the code:

Code:

$(document).ready(function() { 
	$(document).click(function(event) {
		$("#options-dropdown").hide();
		if ((event.target == $('#options-dropdown')) && (event.target == $('#options'))) {
			$("#options-dropdown").show();
		} 
	});	
});

Thanks in advance!

08-26-2008, 06:03 PM

Raphy

Status: Member
Join date: Aug 2008
Location: Boca Raton, FL
Expertise:
Software:

Posts: 146

iTrader: 4 / 100%

Raphy is on a distinguished road

Make sure your CSS rule for #options-dropdown is display:none; at first - this will make sure that its hidden when the page loads.

Copy and paste the following functions to your JS file

Code:

function toggleDrop() {
$(#options-dropdown).toggle();
}

function hideDrop() {
$("#options-dropdown").hide();
}

Add the following to the div#options - onclick="toggleDrop();" - this will allow for it to show when the user clicks on the div#options

And add this to the other elements of the website that aren't part of the div#options onclick="hideDrop();"

Even though it might not be the most practical way to have to add the hideDrop(); to the other elements, it does what you wanted.

I hope this helps you out

08-29-2008, 02:04 AM

versatiletech

Status: I'm new around here
Join date: Jan 2007
Location: Orlando, FL
Expertise:
Software:

Posts: 11

iTrader: 0 / 0%

versatiletech is on a distinguished road

Send a message via Yahoo to versatiletech

You have to wrap your event.target with $() so that you can compare apples to apples. What you're doing is comparing a DOM node with jQuery instead of comparing a DOM node with another DOM node or comparing a jQuery object with another jQuery object.