jQuery show/hide

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
GeXus
Forum Regular
Posts: 631
Joined: Sat Mar 11, 2006 8:59 am

jQuery show/hide

Post by GeXus »

Does anyone happen to know a jQuery show/hide div script..... THAT will hide the div if you click anywhere outside... So for example.. You click a button, it shows the div... if you click anywhere else on the page, it then hides that div...

I could add an event to the body, but i don't know if thats the cleanest way..
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Post by pickle »

I'm not sure there's any other way. You could add the event to the body only when the div has been clicked however, which will clean it up a bit.

Not sure how to do this with jQuery specifically - I'd use DOM personally.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
GeXus
Forum Regular
Posts: 631
Joined: Sat Mar 11, 2006 8:59 am

Post by GeXus »

Yeah, i think that's what i'll.... jquery owns!
User avatar
JAB Creations
DevNet Resident
Posts: 2341
Joined: Thu Jan 13, 2005 6:44 pm
Location: Sarasota Florida
Contact:

Post by JAB Creations »

Why use jQuery for something so simple?

Code: Select all

// setStyleById: given an element id, style property and 
// value, apply the style.
// args:
//  i - element id
//  p - property
//  v - value
//
function setstylebyid(i, p, v)
{
 var n = document.getElementById(i);
 n.style[p] = v;
}
//
// The function is below
//
function divshow() {setstylebyid('your_id_here', 'display', 'block');}
function divhide() {setstylebyid('your_id_here', 'display', 'hide');}
XHTML elements with triggering event...

Code: Select all

<span onclick="divshow();" onkeypress="divshow();">show div</span>
<br />
<span onclick="divhide();" onkeypress="divhide();">hide div</span>
User avatar
s.dot
Tranquility In Moderation
Posts: 5001
Joined: Sun Feb 06, 2005 7:18 pm
Location: Indiana

Post by s.dot »

JAB Creations wrote:Why use jQuery for something so simple?
It gets even easier with jQuery. ;)

Code: Select all

$('#element').hide();
Set Search Time - A google chrome extension. When you search only results from the past year (or set time period) are displayed. Helps tremendously when using new technologies to avoid outdated results.
User avatar
Kieran Huggins
DevNet Master
Posts: 3635
Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:

Post by Kieran Huggins »

there would be lots of great examples of this in the various jQuery lightbox clones. Check it out!
GeXus
Forum Regular
Posts: 631
Joined: Sat Mar 11, 2006 8:59 am

Post by GeXus »

Kieran Huggins wrote:there would be lots of great examples of this in the various jQuery lightbox clones. Check it out!
Ah thats a good idea, thanks!
Post Reply