SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Aug 2013
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Using Jquery How To Hide Div When Click Outside The Div

    i wan' to hide #button_ul div when click outside of div anywhere and i'm done with below code but problem is that once i click button it doesn't slideToggle i wan't to toggle #button_ul div when i click #edit_btn div

    Code:
    <html>
    <head>
    <title>Untitled Document</title>
    <script type="text/javascript" src="jquery-1.10.2.min.js"></script>
    <script>
    $(document).ready(function(){
    	$('#edit_btn').click(function(){
    		$("#button_ul").slideToggle(0);
    	});
    	$("body").mouseup(function(e)
    	{
    		var button_ul = $("#button_ul");
    		if (!button_ul.is(e.target) && button_ul.has(e.target).length === 0)
    		{
    			$("#edit_btn a").css("background-color" , "rgba(153,153,153,0.6)");
    			button_ul.css("display" , "none")
    		}
    	});
    });
    
    </script>
    <style type="text/css">
    #edit_btn{
    	border: thin solid #000;
    	background-color: #666;
    	padding: 5px;
    	width: 140px;
    	text-align: center;
    }
    #edit_btn a{
    	text-decoration: none;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 14px;
    	color: #FFF;
    	font-weight: bold;
    }
    
    #button_ul {
    	border: thin solid #333;
    	font-family: Arial, Helvetica, sans-serif;
    	list-style-type: none;
    	margin: 0px;
    	border-radius: 0px 0px 4px 4px;
    	background-color: #ddd;
    	width: 135px;
    	padding-top: 5px;
    	padding-right: 10px;
    	padding-bottom: 5px;
    	padding-left: 5px;
    	display: none;
    }
    #link1 {
    	border: 0px;
    	width: 100px;
    	height: 20px;
    	color: #C03;
    	font-size: 14px;
    	font-family: Arial, Helvetica, sans-serif;
    	text-decoration: none;
    	margin-top: 0px;
    	margin-right: 0px;
    	margin-bottom: 0px;
    	margin-left: 10px;
    }
    #link1:hover {
    	text-decoration: underline;
    }
    
    #link2 {
    	border: 0px;
    	width: 100px;
    	height: 20px;
    	color: #C03;
    	font-size: 14px;
    	font-family: Arial, Helvetica, sans-serif;
    	text-decoration: none;
    	margin-top: 0px;
    	margin-right: 0px;
    	margin-bottom: 0px;
    	margin-left: 10px;
    }
    #link2:hover {
    	text-decoration: underline;
    }
    </style>
    </head>
    
    <body>
    <div id="edit_btn"><a href="#">Edit Profile Picture</a></div>
    <ul id="button_ul">
    <li>
    <a id="link1" href="#">Upload Picture</a>
    </li>
    <li>
    <a id="link2" href="#">Remove Picture</a>
    </li>
    </ul>
    </body>
    </html>

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,061
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi,

    Quote Originally Posted by anushn View Post
    i wan' to hide #button_ul div when click outside of div anywhere
    Sorry to be picky, but there isn't a <div> with an id of "button_ul".
    There is a <ul> with this id. Is this what you are referring to?

    To rephrase your question:
    When you click on the "Edit Profile Picture" button, you want it to slide down.
    When you click anywhere outside of the "Edit Profile Picture" button, you want it to slide back up.
    Is that correct?


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •