homepage Welcome to WebmasterWorld Guest from 54.226.191.80
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
jquery clickoutside event
jquery clickoutside event
chrissim




msg:4433173
 10:44 am on Mar 25, 2012 (gmt 0)

hi,

i need someone help me on the jquery event how to closed if i clicked outside the page.


$(function() {
// hide all the sub-menus
$("span.toggle").next().hide();

// add a link nudging animation effect to each link
$("#jQ-menu a, #jQ-menu span.toggle").hover(function() {
$(this).stop().animate( {
fontSize:"17px",
paddingLeft:"10px",
color:"#808080"
}, 300);
}, function() {
$(this).stop().animate( {
fontSize:"14px",
paddingLeft:"0",
color:"#D3D1D1"
}, 300);
});

// set the cursor of the toggling span elements
$("span.toggle").css("cursor", "pointer");

// prepend a plus sign to signify that the sub-menus aren't expanded
$("span.toggle").prepend("+ ");

// add a click function that toggles the sub-menu when the corresponding
// span element is clicked
$("span.toggle").click(function() {
$(this).next().toggle(1000);

// switch the plus to a minus sign or vice-versa
var v = $(this).html().substring( 0, 1 );
if ( v == "+" )
$(this).html( "-" + $(this).html().substring( 1 ) );
else if ( v == "-" )
$(this).html( "+" + $(this).html().substring( 1 ) );
});
});

 

chrissim




msg:4433721
 11:22 pm on Mar 26, 2012 (gmt 0)

Can someone help me to how to create event clickoutside that close the menu if it's open ? Anyone?

enigma1




msg:4435829
 11:05 am on Apr 1, 2012 (gmt 0)

you hook the top html for the click event to close the menu
$('html').click(function(e) {
// Add conditionals and close menu here
});

and you prevent any event propagation of the menu container to the parent handlers so they're not notified since you handle clicks inside the menu container (so the previous code - above won't be informed to close whatever you need to close.
$('#menu').click(function(e) {
e.stopPropagation();
});

chrissim




msg:4435837
 11:45 am on Apr 1, 2012 (gmt 0)

hi enigma1,

Can you show me how cos im a bit blur on this topic.Care to show me the complete work on this issue.

Thanks

enigma1




msg:4435845
 1:21 pm on Apr 1, 2012 (gmt 0)

Here is a complete document so you can test it. Just setup the jquery link to be valid and play around with it to see what I mean.

<!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" dir="ltr" lang="en">
<head>
<script language="javascript" type="text/javascript" src="jquery.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
$('html').click(function() {
alert('Click outside menu container');
});
$('#menu').click(function(e) {
e.stopPropagation();
alert('Stopped propagation');
return false;
});
});
</script>
</head>
<body>
<div id="menu" style="width: 100px; height: 100px; background: #F00; text-align: center;">Menu Area</div>
</body>
</html>

You can see the alerts coming up depending where you click.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved