Solved

Hiding a div with jquery with an outside the element click

Posted on 2012-03-23
2
1,045 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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

Enroll in June's Course of the Month

June's Course of the Month is now available! Every 10 seconds, a consumer gets hit with ransomware. Refresh your knowledge of ransomware best practices by enrolling in this month's complimentary course for Premium Members, Team Accounts, and Qualified Experts.

Question has a verified solution.

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

When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
This article discusses how to implement server side field validation and display customized error messages to the client.
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…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

690 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