Forum Moderators: open
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script language="javascript" type="text/javascript">
<!--
function toggleDisplay(id){
var me = document.getElementById(id);
if (me.style.display=="none"){
me.style.display="block";
me.focus();
}
else if (me.style.display=="block"){
me.style.display="none";
}else{
me.style.display="block";
me.focus();}
}
// -->
</script>
</head>
<body>
<div id="storeSelectorDiv"> <a href="#" onclick="javascript:toggleDisplay('storeListDiv'); return false" class="listbox">Click here</a>
<!--Div for store selection-->
<div style="background-color:#CCCCCC; display:none; width:300px;" onblur="javascript:toggleDisplay('storeListDiv');" id="storeListDiv"> <br / >
Hide this box if we click anywhere else on the page. </div>
<br / >
<br / >
<input type="text" name="textfield" id="textfield" />
</div>
</body>
</html>
i want to hide the div if i click anywhere else on the page.
What about assigning it to the onclick event handler of the BODY element?
<body onclick="toggleDisplay('storeListDiv');">
What about assigning it to the onclick event handler of the BODY element?<body onclick="toggleDisplay('storeListDiv');">
Body.conclick is a solution, but a less-than-ideal one. What if you had other body onclick events? You don't anymore. Onblur is the ideal way to handle it, and, according to microsoft, is supported for div tags.
[msdn2.microsoft.com...]
However, the functionality is spotty. According to my testing, a DIV's onblur only fires if you hit the tab key. Clicking elsewhere doesn't cut it.
Lame.
If anyone has a better alternative, I'd love to hear it. Still working on one myself.
onblur
Oppsite to MSIE, which almost all kinds of elements receive blur event, almost all kinds of elements on gecko browsers do NOT work with this event.
