CODEWITHSUNDEEP
javascriptjquery
Scorpioniz
Scorpioniz

Reputation: 1449

jquery do not hide div if clicked div

Have problem. have side floated menu like this: closed opened

<div class="customize" style="display: block; margin-right: 0px;">
<span class="open_button opened"><i class="fa fa-paint-brush"></i></span>
<div class="customize_block">
    <div class="input_square">
        <h5>Font Family</h5>
        <select id="font" class="form-control">
            <option value="arial">Arial</option>
            <option value="Halvetica">Halvetica</option>
            <option value="Times new roman">Times new roman</option>
        </select>
    </div>
    <div class="input_square">
        <h5>Select font color</h5>
        <input type="text" id="pick1"  class="pick_color" placeholder="Select" value="#fff">
        <span id="pick_box1" class="color_box" style="background-color:#fff"></span>
    </div>
    <div class="input_square">
        <h5>Inner background color</h5>
        <input type="text" id="pick2"  class="pick_color" placeholder="Select" value="#fff">
        <span id="pick_box2" class="color_box" style="background-color: #fff"></span>
    </div>
    <div class="input_square">
        <h5>Outer background color</h5>
        <input type="text" id="pick3"  class="pick_color" placeholder="Select" value="#fff" >
        <span id="pick_box3" class="color_box" style="background-color: #fff"></span>
    </div>
</div>

javascript code: 

$(".open_button").click(function() {
    if ($(this).hasClass("opened")) {
        $(".customize").animate({
            marginRight: '-=431px'
       }, 1000);
        $(this).removeClass("opened");
    } else {
         $(".customize").animate({
            marginRight: '+=431px'
       }, 1000); 
        $(this).addClass("opened");
    }

});

and some extra js code for that if click outsite that div to hide it.

$(document).mouseup(function (e){
        var container1 = $(".customize");
        if(click == 0){
            if (!container1.is(e.target) && container1.has(e.target).length === 0){ // if the target of the click isn't the container...
                if($('.open_button').hasClass('opened')){
                    $('.open_button').trigger('click');
                }
            }
        }
    });

The problem is that in that input's i'm using jquery colorpicker plugin wich have extra div like: 

<div class="colorpicker dropdown-menu colorpicker-visible"></div>

and I can't stop hiding function mouseup if clicked somewhere in that last div with class colorpicker colorpicker-visible

Upvotes: 2

Views: 124

Answers (2)

Nishit Maheta
Nishit Maheta

Reputation: 6031

check that color selector id or class and take it as var container2 = $("colorpicker selector"); and apply same condition as container1

you face a issue because color-picker container is not created in side "customize" div. color-picker container created with absolute position using script.

  $(document).mouseup(function (e){
    var container1 = $(".customize");
    var container2 = $("color picker id or class");
    if(click == 0){
        if ((!container1.is(e.target) && container1.has(e.target).length === 0) && (!container2.is(e.target) && container2.has(e.target).length === 0)){ // if the target of the click isn't the container...
            if($('.open_button').hasClass('opened')){
                $('.open_button').trigger('click');
            }
        }
    }
});

Upvotes: 2

Fen1kz
Fen1kz

Reputation: 1110

I bet it's some kind of

$(document).mouseup(function (e){
    if ($(e.target).parents(".customize").length === 0) {
        if ($('.open_button').is('.opened')) {
            $('.open_button').trigger('click');
        }
    }
});

here's the quick dirty fiddle: https://jsfiddle.net/kqj6g6p4/

Upvotes: 0

Related Questions