Solved

Hiding a div with jquery with an outside the element click

Posted on 2012-03-23
2
1,024 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 Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
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…

939 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

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now