Hello, for those wondering, if you want to know whenever you click
outside a div and byt outside i mean everywhere but the div like you
want to display an error message :
<html>
<head>
<title>test error click outside</title>
<style type="text/css">
p.error {
position:absolute;
top:40%;
left:30%;
width:40%;
</style>
</head>
<body>
blaeblalbl<p>dsqdsq</p><span>fsqf</span>
<div id="one">fsqfqsf</div>
<p class="error"><span>ERROR :</span> <em>Click outside this paragraph
to close it, you can even click on me !</em></p>
<div clas="fslfqs"></div>
<!-- THIS IS THE PART THAT YOU WANT TO LOOK AT ;) -->
<script type="text/javascript">
$(document).bind('click', function(e) {
var $clicked=$(e.target); // get the element clicked
if($clicked.is('.error') || $clicked.parents().is('.error')) {
// if
the element clicked is the one we're looking for or if the element has
a parent that we're looking for then we clicked the right place !
console.log('BULLSEYE !'); // here you should do
anything
} else { // we're outside the error paragraph, no matter where
but
we're outside !
console.log('you clicked outside the error paragraph,
congrats !'); //here you should close the message :)
}
});
</script>
</body>
</html>
This works in FF, IE7 (expect for the console.log thing ...), didnt
tested it in ie6 etc... But think it works.
If you just want to close it then :
<script type="text/javascript">
$(document).bind('click', function(e) {
var $clicked=$(e.target); // get the element clicked
if( ! ( $clicked.is('.error') ||
$clicked.parents().is('.error') ) )
{
$('.error').hide();
}
});
</script>
Let me know if that work for you
On 2 mai, 20:35, Aleksandr <[EMAIL PROTECTED]> wrote:
> Everything is working now.
> Thanks to all.
> Last version of code is:
>
> $(document).ready(function(){
> $("#link").click(function(){
> if ($("#divLoginBox1").is(':hidden'))
> $("#divLoginBox1").show();
> else{
> $("#divLoginBox1").hide();
> }
> return false;
> });
>
> $('#divLoginBox1').click(function(e) {
> e.stopPropagation();
> });
> $(document).click(function() {
> $('#divLoginBox1').hide();
> });
> });
>
> On May 2, 7:29 pm, "Josh Nathanson" <[EMAIL PROTECTED]> wrote:
>
> > Looks like you are missing a semicolon which will choke IE:
>
> > $("#link").click(function(){
> > if ($("#divLoginBox1").is(':hidden'))
> > $("#divLoginBox1").show();
> > else{
> > $("#divLoginBox1").hide();
> > }
> > return false;
> > }) <-- ADD SEMICOLON HERE
>
> > -- Josh
>
> > ----- Original Message -----
> > From: "Aleksandr" <[EMAIL PROTECTED]>
> > To: "jQuery (English)" <jquery-en@googlegroups.com>
> > Sent: Friday, May 02, 2008 11:00 AM
> > Subject: [jQuery] Re: Hide/Close div when clicked outside of it.
>
> > > I am now have this jQuery code and it is working in FireFox, Safari
> > > and Opera but not in IE 6, 7:
>
> > > $(document).ready(function(){
> > > $("#link").click(function(){
> > > if ($("#divLoginBox1").is(':hidden'))
> > > $("#divLoginBox1").show();
> > > else{
> > > $("#divLoginBox1").hide();
> > > }
> > > return false;
> > > })
>
> > > $('#divLoginBox1').click(function(e) {
> > > e.stopPropagation();
> > > });
> > > $(document).click(function() {
> > > $('#divLoginBox1').hide();
> > > });
> > > });
>
> > > On May 2, 6:00 pm, sawmac <[EMAIL PROTECTED]> wrote:
> > >> try this
>
> > >> $('#divLoginBox1').click(function(e) {
> > >> e.stopPropagation();});
>
> > >> $(document).click(function() {
> > >> $('#divLoginBox1').hide();
>
> > >> });
>
> > >> --dave
