The SitePoint Forums have moved.

You can now find them here.
This forum is now closed to new posts, but you can browse existing content.
You can find out more information about the move and how to open a new account (if necessary) here.
If you get stuck you can get support by emailing forums@sitepoint.com

If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

hiding an element if it loses focus??

hi,

is there any way to find out if an element has been clicked away from....im trying to create an unordered list that beahves like a select dropdown list so when the user clicks outside of it i need to hide it....can i do this?

thanks for the replies. Unfortunately onblur doesnt seem to work....i'd tried it..if you paste the following code and run it you'll see that when you click away form the p tag ( in yellow) the list below is still showing in fact i cant even get the hide() function to run onblur...

What are you actually trying to do? How can a none-form element loose focus? When a text input is selected, for example, it has the cursor flashing in it. Perhaps you're trying to find out if an element is off of the screen (i.e. scrolled out)?

Right, i didn't know focus was only applicable to form elements....so theres my problem.

Im trying to find out if the element has been clicked away from. The whole script is part of an attempt to replace the ugly select boxes....i've successfully managed to write a script that does some DOM and replaces out all the option elements and replace them with a nicely formatted <ul> on the fly ( so the source code still shows an option list) I can then style this list however i want.

Problem im haivng is maiking my ul act like a select. Ive got it to hide the list when the user selects an option and to toggle on and off as the user clicks on the selected item ( in yellow) which is how a select dropdown works but cant get it to toggle off if the user clicks away from the selected item......as does a select list.

Heres some updated code, any suggestions appreciated as i'm close to getting this working!!!:

onfocus = script [CT]
The onfocus event occurs when an element receives focus either by the pointing device or by tabbing navigation. This attribute may be used with the following elements: A, AREA, LABEL, INPUT, SELECT, TEXTAREA, and BUTTON.
onblur = script [CT]
The onblur event occurs when an element loses focus either by the pointing device or by tabbing navigation. It may be used with the same elements as onfocus.

That W3Schools page is wrong.

(why people keep quoting the w3schools site as if it were an authority I don't know - it was just set up by a couple of guys from northern Europe [I forget which country - Norway or Denmark?] who selected that domain name for their site and hasn't even been kept up to date with changes to the standards over the last few years).

There are a number of browsers that also support onfocus for other elements such as windows but that is non-standard and only some of the browsers that support onfocus for non-standard elements also support onblur for those elements.

After some experimentation i've found that onblur fires when an element loses focus. unfortunately an element only seems to lose focus when another element gain focus....which in this instance is not suitable. I need an event to fire simple if the user clicks away from the element.....either in to another element on the page ( perhaps a text input) ot just white space on the page. Onblur does not fire if the user just clicks in to white space.

Some element always has the focus and so an element can't lose the focus unless another element gains it. If someone clicks on whitespace then the prior element still has the focus and keyboard events will still operate on that element.

Yes exactly, so theres not a way to do what i want i want is there? i've been examining different attempts at doing what im trying to do and all seem to have the problem of seeming 'sticky' due to the dropdown not dissappearing when the user has clicked off of the element.