1

I am using the jQuery function

function ShowHide(){
  $(".login").animate({"height": "toggle"}, { duration: 1000 });
}

and the link to show hide the .login div is:

onclick="ShowHide(); return false;"

But this link only toggles the div to show and hide, but I want it to also hide when the user clicks off the div, I have a page wrapper in place but just need some help with jQuery.

chris
  • 11
  • 2

3 Answers3

2
<html>
    <head>
    <script type="text/javascript" src="jquery-1.3.2.js"></script>
    <style>
        .login-div { width: 100px; height: 100px; margin:auto; border: solid 1px black; position: relative; background-color: #aeaeae;  display:none;}
        .parent-div { width: 300px; height: 300px; margin:auto; border: solid 1px #aeaeae; position: relative;}
        .footer { margin-bottom: 0px; margin-top:auto; margin-left:auto; margin-right:auto; height:40px; width:200px; position:relative; display:none;}
    </style>
    <script>
        $(window).load(function(){
            var DEBUG = 0;
            var count = 0;
            $('.parent-div').bind('click', function(e){
                e.preventDefault();
                e.stopPropagation();
                DEBUG==1?console.log('Target: '+$(e.target).attr('class')):'';
                DEBUG==1?console.log('Show Hide: '+(count++)):'';
                //ShowHide();
                var target_class = $(e.target).attr('class');
                if(target_class == 'link'){
                    $(".login-div").animate({"height": "toggle"}, { duration: 1000 });
                    $('.footer').toggle();
                }
                else{
                    $(".login-div").animate({"height": "hide"}, { duration: 1000 });
                    $('.footer').hide();
                }
            });
        });
    </script>
    </head>
    <body>
        <div class="parent-div">Parent Box:<br/>
            <a href="#" class="link">ShowHide</a>
            <div class="login-div">Child Box:</div>
            <div class="footer">click out side the gray box & inside the Parent-box
        </div>
    </body>
</html>


I rigged up the above based on my understanding of your requirement, check out the code. this should do your job. Here I am using "click" event bubbling in java script and have a event listener bound to parent-div class element. this same can be attached to <body/> if the scope of elements is to be increased.

Ajaxe
  • 647
  • 1
  • 5
  • 16
  • If you are using firebug & FF u can set DEBUG = 1 – Ajaxe Oct 25 '09 at 14:58
  • 1
    event bubbling and propagation gets complicated, if you have multiple onclick events on the page and attach onclick event on the body, but the example should help you. – dusoft Oct 25 '09 at 15:00
  • I agree with dusoft, going higher on the DOM will result in more calls to the 'click' handler on 'body', also somewhere in 'bubbling' chain on one of the child elements may `event.stopPropagation()` wherein the required handler is never called and DIV in question never hides/shows. Event handling chains have to be considered. – Ajaxe Oct 25 '09 at 16:18
1

you need to put event on body element to hide it, if you want user clicking anywhere else to hide it.

ps: please, do not use onclick in the html elements! - use event manager in jquery for that (e.g. sth. in the lines of addevent (click, function) )

dusoft
  • 11,289
  • 5
  • 38
  • 44
  • 1
    You want something like $('#myLink').click(ShowHide); – John McCollum Oct 25 '09 at 10:56
  • I appologise as i am very new to Jquery and am at beginner stage, and I understand using onlick in html is bad practice, and would really appreciate it, if you could show me an example of the best practice method, thanks very much – chris Oct 25 '09 at 10:57
  • 1
    No problem :) There's a good primer here: http://stackoverflow.com/questions/621574/jquery-why-unobtrusive-javascript-document-ready-function-rather-than-onclick – John McCollum Oct 25 '09 at 11:03
  • Why not use onclick? Seems to me this provides an easier way to find which handlers are bound to which elements. – recursive Oct 25 '09 at 15:55
  • 1
    because using onclick directly goes against separation of content from events and sometimes hurts accessibility as well. – dusoft Oct 25 '09 at 16:34
0

EVEN EASIER

Rather than establish a specific div to click on to hide the element, you can simply establish all elements that are not part of the "show me" element to hide when clicked on.

Example of what I mean, in your javascript section, under your ready code place the following:

$("body *").not('.login, .login *').fadeOut(1000);
// This tells jquery to get all elements, in the body, not containing the
//     class login or any subelement of it 
// The fade out is just a simple jquery hide animation set to 1 second in this 
//     example but you can hide it however you want

and see how it works out for ya.

SpYk3HH
  • 22,272
  • 11
  • 70
  • 81