?
Solved

Hiding a div with jquery with an outside the element click

Posted on 2012-03-23
2
Medium Priority
?
1,050 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 1400 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

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

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

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
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.
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Suggested Courses

762 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