make layer disappear after clicking document

[mja674s]

I'm making a date picker. It shows up fine. The problem is that I want it
to disappear if I click outside the calendar itself. However, if I click
*on* the calendar itself, it should not disappear, allowing me to click a
date or cycle through the months, etc.

Thanks for help.

Matt

 

[Fred Oz]

I'm making a date picker. It shows up fine. The problem is that I want it
to disappear if I click outside the calendar itself. However, if I click
*on* the calendar itself, it should not disappear, allowing me to click a
date or cycle through the months, etc.

I think your interface is unintuitive - just put a close button
on the calendar. It will take the user 1 click to close the
calendar either way. If you put a button for them to click,
then at least they know when the calendar will close and how to
make it happen with almost zero effort.

Your way, they have to guess what might happen - and learn that
you like to make things happen without making it obvious.

For the record, you must stop the calendar onclick event from
bubbling up to the document. A full explanation is here:

<URL:http://www.quirksmode.org/js/events_order.html>


And some sample code:

<script type="text/javascript">

function toggle(x){
var y = document.getElementById(x).style;
(y.display == 'none')? y.display='' : y.display='none';
}

function stopBubble(e) {
var e = e || window.event;
e.cancelBubble = true; // stops IE
if (e.stopPropagation) { // stops others
e.stopPropagation();
}
}
</script>

<div
id="aDiv"
style="border: 1px dotted red;
width: 200px;
height: 200px;"
onclick="stopBubble(event);"

</div>

Thanks for help.

You're welcome.

 

[mja674s]

You're welcome.

I added a close button and the functionality I was asking about.

cancelBubble is exactly what I was looking for.

Thanks Fred.

Matt