CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Axeem
Axeem

Reputation: 191

Disable(unclickable) background content in jQuery

i have a two div one is absolute position.
here is a code. 

<input type="button" onclick="showdiv()" value="show" >
<div id="div2" style="display:none"> 
   some content
  <a href="anylink">name</a>
  <input type="button" value="click">
</div>
<div id="div1"> 
   some content
  <a href="anylink">name</a>
  <input type="button" value="click">
</div>

Here is jquery code .

function showdiv(){
   $('#div1').fadeTo("slow",0.15);
   $('#div2').show();   
}

When I click on show button it fadeTo the div1 and show the div2. but problem is that div1 link and button also clickable and the link and button of div2 is not click able.
How can i disable background link.

Upvotes: 1

Views: 2967

Answers (3)

androidavid
androidavid

Reputation: 1259

$('#div1').unbind('click').click(function(e){
   e.preventDefault();
});

Can be done if there are any onclick-listeners on the #div1directly. In newer jquery versions you could do

$('#div1').off('click').click(function(e){
   e.preventDefault();
});

But then again I would not recommend such a solution at all but would rather solve this by using a transparent div that lies above the #div1.

Example:

<div id="div1holder" style="position:relative">
  <div id="div1">
  </div>
  <div id="div1blocker" style="display:none; position:absolute;top:0; left:0; background:transparent;">
  </div>
</div>

Make #div1blockerbehave like #div1considering size and call $('#div1blocker').show() when you need to block it.

function showdiv() {
  var div1 = $('#div1');
  $('#div1blocker').show().width(div1.width()).height(div1.height());
  $('#div2').show();
}

Of course, you can still use fading then:

function showdiv() {
  var div1 = $('#div1');
  $('#div1blocker').show().width(div1.width()).height(div1.height());
  $('#div2').show();
  div1.fadeTo("slow",0.15);
}

Upvotes: 2

EternalHour
EternalHour

Reputation: 8621

The .fadeTo just changes the opacity of the element and children. There are other measures that need to be taken in order "disable" them.

HTML:

<input type="button" id="showdiv" value="show">
<div id="div1">some content <a href="anylink">name</a>
    <input type="button" value="click">
</div>
<div id="div2" style="display:none">some content <a href="anylink">name</a>
    <input type="button" value="click">
</div>

JS:

This will keep the <div> and content visible, but "disabled".

$("#showdiv").on("click", function () {
    $('#div1').fadeTo("slow", 0.15, function () {
        $('#div1').children().prop('disabled',true);
        $('#div1 a').bind('click', false);
    });
    $('#div2').show();
});

JSFiddle

Upvotes: 1

Gibbs
Gibbs

Reputation: 22964

    $('#div1 a').bind("click", function (e) {
        e.preventDefault();
    });
   $('#div1 input').prop('disabled', false);

Apply css to show it as disabled. fadeTo doesn't cause unbinding events. i have given you general solution.

Upvotes: 1

Related Questions