Solved

Hiding a div with jquery with an outside the element click

Posted on 2012-03-23
2
1,029 Views
Last Modified: 2012-04-04
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
Comment
Question by:m2ew
2 Comments
 
LVL 18

Accepted Solution

by:
Rajar Ahmed earned 350 total points
ID: 37761089
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
 

Author Closing Comment

by:m2ew
ID: 37805828
Thanks for the response. Sorry it took so long, been swamped with work lately
0

Featured Post

Is Your AD Toolbox Looking More Like a Toybox?

Managing Active Directory can get complicated.  Often, the native tools for managing AD are just not up to the task.  The largest Active Directory installations in the world have relied on one tool to manage their day-to-day administration tasks: Hyena. Start your trial today.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
This article discusses four methods for overlaying images in a container on a web page
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…

832 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question