SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast rgf207's Avatar
    Join Date
    Feb 2006
    Location
    Maryland
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Hide a div by clicking outside (jquery)

    I have a table that display users in a database. When a user clicks on the usergroup a dropdown div will appear with a selection of available usergroups. I would like that div to hide again when the user clicks outside that div

    here is the code for the div

    HTML Code:
    <tr id='10003'>
    
    <td><a href='index.php?frame=main&m=member&a=edituser&id=10003'>tstUser-0</a></td>
    	<td>	
    		<div class='container'>
    		<span id='usergroup-10003' class='user-ajax-hover'>Registered Users</span>
    		<div id='ugselect-10003' class='userpopup'>
    			<h4>Change Usergroup</h4>
    			<ul>
    			<li><a href='#' id='4'>Administrators</a></li>
    <li><a href='#' id='3'>Moderators</a></li>
    <li><a href='#' id='2'>Registered Users</a></li>
    </ul>
    		</div>
    		</div>
    I have no problem displaying the hidden div but i can't get it to close when the user clicks outside.

    Any ideas?

  2. #2
    SitePoint Enthusiast
    Join Date
    Sep 2010
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've done a bit of messing around, and there may be an easier way to do this but here's what I've come up with:

    In your jQuery file do something like this in your $(document).ready() function:

    Code:
    $(document).click(function(e){
         var elem = $(e.target).attr('id'); //this should give you the clicked element's id attribute
         if(elem !== 'ugselect-10003'){
             $('#ugselect-10003').slideUp('slow'); //or however you want to hide it
         }
    });
    I haven't tested all of that but I think the idea is there if you want to mess around with it. I did try the first part (checking the clicked element's id) and that worked for me.

  3. #3
    SitePoint Enthusiast rgf207's Avatar
    Join Date
    Feb 2006
    Location
    Maryland
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by sd_javascript View Post
    I've done a bit of messing around, and there may be an easier way to do this but here's what I've come up with:

    In your jQuery file do something like this in your $(document).ready() function:

    Code:
    $(document).click(function(e){
         var elem = $(e.target).attr('id'); //this should give you the clicked element's id attribute
         if(elem !== 'ugselect-10003'){
             $('#ugselect-10003').slideUp('slow'); //or however you want to hide it
         }
    });
    I haven't tested all of that but I think the idea is there if you want to mess around with it. I did try the first part (checking the clicked element's id) and that worked for me.
    Thanks for the reply. I've actually decided to take a different route. Instead of closing when you click outside, I've decided to include a close "X" in the upper right corner which, when clicked, triggers the dive to hide


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
  •