i have this side tab panel where i when i click on it, it will activate a external div, during that time, i want the underlying div to have all their events like hover over dropdown menu deactivated and stuff, basically they can't click on the underlying div to change page while the popup div activated.

This is my fiddle: / , for now i only changed the opacity, but user still can hover over the dropdown and change page while popup panel is on, i tried stuff like

$(".container").attr('disabled', 'disabled'); but it doesn't work

Also i have

$(function() {
   $("#toggle").click(function() {
        $(".log").html("panel sliding out");
        $("#toggle_content").animate({width:'toggle'},350);
        $(".container").css("opacity", 0.3);

        $(".container").click(function() {
            $(this).unbind("click");
            $(".log").html("panel hide success");
            $("#toggle_content").hide();
            $(".container").css("opacity", 1);
        }); 
    });

});

how can i edit the code so that when i click on the tab, it will open, and when i click on it again, it will close with opacity returning to normal?

In case you are confused, basically i am trying to solve: 1) how to disable background div(disable dropdown expanding on hover) while popup div is activated 2) how to click on the tab again to return everything to normal.

i have this side tab panel where i when i click on it, it will activate a external div, during that time, i want the underlying div to have all their events like hover over dropdown menu deactivated and stuff, basically they can't click on the underlying div to change page while the popup div activated.

This is my fiddle: http://jsfiddle/10xr2uah/ , for now i only changed the opacity, but user still can hover over the dropdown and change page while popup panel is on, i tried stuff like

$(".container").attr('disabled', 'disabled'); but it doesn't work

Also i have

$(function() {
   $("#toggle").click(function() {
        $(".log").html("panel sliding out");
        $("#toggle_content").animate({width:'toggle'},350);
        $(".container").css("opacity", 0.3);

        $(".container").click(function() {
            $(this).unbind("click");
            $(".log").html("panel hide success");
            $("#toggle_content").hide();
            $(".container").css("opacity", 1);
        }); 
    });

});

how can i edit the code so that when i click on the tab, it will open, and when i click on it again, it will close with opacity returning to normal?

In case you are confused, basically i am trying to solve: 1) how to disable background div(disable dropdown expanding on hover) while popup div is activated 2) how to click on the tab again to return everything to normal.

• javascript
• jquery
• html
• css

Share Follow edited Nov 5, 2014 at 5:59 esqew 44.8k2828 gold badges131131 silver badges171171 bronze badges asked Nov 5, 2014 at 5:58 DevonDevon 15911 gold badge22 silver badges1515 bronze badges 2

• have you checked for $("item").prop("disabled", true); ? It works most of the time. – Mostafa Talebi Commented Nov 5, 2014 at 6:09
• try to use jquery's on & off. api.jquery./off – SKG Commented Nov 5, 2014 at 6:26

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

You can use container's pseudo element :before to make a visual overlay. This way you don't have to add new elements to HTML:

.container.overlay-disable:before {
    content: '';
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(220, 220, 220, .6);
}

JS:

$("#toggle").click(function () {
    $(".log").html("panel sliding out");
    $("#toggle_content").animate({
        width: 'toggle'
    }, 350);
    $(".container").addClass("overlay-disable");
    $(".container").click(function () {
        $(".log").html("panel hide success");
        $("#toggle_content").hide();
        $(".container").removeClass("overlay-disable");
    });
});

Demo: http://jsfiddle/10xr2uah/3/

when i have s similar situation i created a simple overlay that covers the tab panel and stops triggering events over the tab

HTML

 <div class="container">
          <div class="overlay"></div> // create a overlay
        <div class="log_container sixteen columns">
            <p class="two column">Log:</p>

JS

$(function () {
        $("#toggle").click(function () {
            $(".log").html("panel sliding out");
            $("#toggle_content").animate({
                width: 'toggle'
            }, 350);
            $('.overlay').show();
        });
    });

CSS

.overlay {
     position: absolute;
    top: 0px;
    left: 0px;
    width: 960px;
    height: 65px;
    z-index: 100;
    display: none;
    opacity: 0.7;
    background-color: white;
    }

UPDATED FIDDLE

for (let x of temp0.querySelectorAll('*')) {
  x.disabled = true;
}

where temp0 is your div.

Try this:

http://jsfiddle/10xr2uah/2/

HTML

<div class="mask"></div>

CSS changes

.mask{
    background:rgba(255,255,255,0.3);
    position:absolute;
    left:0;
    right:0;
    top:0;
    display:none;    
}

And changes for JS are as follows

$(function() {
  $('.mask').height(parseInt($('.log_container').height()+$('#navigation').height()));
   $("#toggle").click(function() {

        $(".log").html("panel sliding out");
        $("#toggle_content").animate({width:'toggle'},350);
        $('.mask').show();

        $(".container").click(function() {
            $(this).unbind("click");
            $(".log").html("panel hide success");
            $("#toggle_content").hide();                
            $('.mask').hide();
        }); 
    });

});