Question

I am using this: http://www.useful-dates.com/search/

How should the script be written to say,
1. When the user clicks the input, the scrolled div is shown.
2. When the user click outside of the scrolled div, the scrolled div hides.

Like this, but i have had no luck re-writting the script: http://rob-bell.net/static/ddlist.html

Iv searched and tried all kinds of things on the net and no luck, please help?

Answer 1

The easiest way of doing this is when your script is triggered to display the list (the scrolled div) it creates a trigger to the click event on the document itself aswell. Something like this:

$("selector to your div").click(function() {
    var scrolledDiv = $("selector to your scrolled div");
    scrolledDiv.show();
    $(document).one(function() {
        scrolledDiv.hide();
    });
});

By using the one() the code to hide the scroll list will only be executed once, so it wont run each time the user is clicking the document. But remember that it will also trigger on clicks inside your scrolling div, if you dont want that stop the propagation of the click event like this:

$("selector to your scrolled div").click(function(e) {
    e.stopPropagation();
});