ansaurus

Question

Answer 1

+1 A:

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 2009-10-25 10:52:25

Could you please provide an example markup for this?

chris 2009-10-25 10:53:51

You want something like $('#myLink').click(ShowHide);

John McCollum 2009-10-25 10:56:43

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 2009-10-25 10:57:58

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 2009-10-25 11:03:47

Why not use onclick? Seems to me this provides an easier way to find which handlers are bound to which elements.

recursive 2009-10-25 15:55:00

because using onclick directly goes against separation of content from events and sometimes hurts accessibility as well.

dusoft 2009-10-25 16:34:13

Answer 2

+2 A:

<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 2009-10-25 14:49:34

Ajaxe 2009-10-25 14:58:12

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 2009-10-25 15:00:55

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 2009-10-25 16:18:49

ansaurus

tags:

views:

answers:

Jquery Show Hide Function

related questions