0
    $(function () {
    $("#clickme").click(function () {
        if($(this).parent().hasClass("popped")){
        $(this).parent().animate({right:'-280px'}, {queue: false, duration: 500}).removeClass("popped");
    }else {
        $(this).parent().animate({right: "0px" }, {queue: false, duration: 500}).addClass("popped");}
    });


    $(document).on('click',function(e){
        if($('#slideout').hasClass("popped")){
        $('#slideout').animate({right:'-280px'},{queue:false,duration: 500}).removeClass("popped");
        }
    });

    $('#slideout').on('click',function(e){
        e.stopPropagation();
    });

});

<div id="slideout">
    <div id="slidecontent">
        Yar, there be dragonns herre!
    </div>
    <div id="clickme">
    </div>
</div>

Its for slide out a div. But when i use this scripts, on zooming the website- the horizontal scroller not displayed. How can it solve? Thanks.

2 Answers 2

0

You can try something like this:-

 $(document).on('click',function(e){
        if($('#slideout').hasClass("popped")){
        $('#slideout').animate({right:'-280px'},{queue:false,duration: 500}).removeClass("popped");
        }
    });

JS FIDDLE

0
$(document).on('click',function(e){ /* Hide on Outside Click*/
    if($('#slideout').hasClass("popped")){
        $('#slideout').animate({right:'-280px'},{queue:false,duration: 500}).removeClass("popped");
    }
});

$('#slideout').on('click',function(e){ /*Ignore 'Hide on Outside Click' on clicking #slideout element*/ 
    e.stopPropagation();
});

This code should work

Your final code will be :

$(function () {
    $("#clickme").click(function () {
        if($(this).parent().hasClass("popped")){
        $(this).parent().animate({right:'-280px'}, {queue: false, duration: 500}).removeClass("popped");
    }else {
        $(this).parent().animate({right: "0px" }, {queue: false, duration: 500}).addClass("popped");}
    });


    $(document).on('click',function(e){
        if($('#slideout').hasClass("popped")){
        $('#slideout').animate({right:'-280px'},{queue:false,duration: 500}).removeClass("popped");
        }
    });

    $('#slideout').on('click',function(e){
        e.stopPropagation();
    });

});

JS FIDDLE

7
  • I added it like this. but the div not slide out on outer click.
    – Aneesh
    Jul 18, 2013 at 9:11
  • It is working fine here :jsfiddle.net/yHPTv/939 . I am testing it on Firefox v22.0 and you?
    – Lekhnath
    Jul 18, 2013 at 9:17
  • Works fine on chrome (up to date) Jul 18, 2013 at 9:46
  • Which version of jquery neded for this? I am using this <script src="ajax.googleapis.com/ajax/libs/jquery/1.5/…>
    – Aneesh
    Jul 18, 2013 at 9:49
  • @Aneesh I think 1.7 or higher but not sure. Anyway I have tested it on v1.9.1 . But I am sure that it works well on latest jquery version.
    – Lekhnath
    Jul 18, 2013 at 9:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.