• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1064
  • Last Modified:

Hiding a div with jquery with an outside the element click

I'm using the jquery selectbox plugin for a new project.
http://www.bulgaria-web-developers.com/projects/javascript/selectbox/

Is there a way to tell jquery to close it if a click isn't within the dropdown box?

They have a close button in the demo, but I want to apply the same idea to the whole page with out adding an additional element.

The function for this is:
$("#selectboxid").selectbox('close');

I just really need to know how to set the trigger outside of the menu. Jquery's datepicker (http://jqueryui.com/demos/datepicker/) calendar uses jqueries ui and manages to hide the element when the calendar is showing
0
m2ew
Asked:
m2ew
1 Solution
 
Rajar AhmedConsultantCommented:
Try this,
Style of dropdown dint applied on this below demo , but it does opened  as submenu like dropdown usually performs , and i configured to hide while click outside of dropdown . pls chk
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="eeToggleOff.aspx.cs" Inherits="EE_eeToggleOff" %>

<!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 runat="server">
    <title></title>
    <link href="http://select-box.googlecode.com/svn/trunk/jquery.selectbox.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
<script type="text/javascript" src="http://select-box.googlecode.com/svn/trunk/jquery.selectbox-0.1.3.min.js"></script>
</head>
<body>
    <form id="form1" runat="server">
    
    <div>    
<select id="language">
    <option value="javascript">Javascript</option>
    <option value="objective-c">Objective C</option>
    <option value="python">Python</option>
</select>
    </div>
    </form>
    <script type="text/javascript">
        $(function () {
            $("#language").selectbox();
        });
        document.onclick = check;
        function check(e) {            
            var target = (e && e.target) || (event && event.srcElement);
            if (checkParent(target)) {
                $("#language").selectbox("close")
            }
                        
        }

        function checkParent(t) {
           var chkClickOfTemplateDropdown = 0;
            while (t.parentNode) {
                if (t.parentNode.id != undefined) {
                    if (t.parentNode.id.toLowerCase().indexOf('sbholder') >= 0) {
                        chkClickOfTemplateDropdown = 1;
                        break;
                    }
                }
                t = t.parentNode;
                
            }
            if (chkClickOfTemplateDropdown == 0) {
                return true;
            }
            else {
                return false;
            }
            
        } 

</script>

</body>
</html>

Open in new window

0
 
m2ewAuthor Commented:
Thanks for the response. Sorry it took so long, been swamped with work lately
0

Featured Post

[Webinar] Improve your customer journey

A positive customer journey is important in attracting and retaining business. To improve this experience, you can use Google Maps APIs to increase checkout conversions, boost user engagement, and optimize order fulfillment. Learn how in this webinar presented by Dito.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now