Disable div when loading does not work, why?

Question

I want to disable the div when loading, and then enable it when botton is clicked. Or in other words, I want it to be invisible when it loads and loads it when clicked by the user.

Frist, is this the right strategy to load a div into shutdown mode, then enable it or add it to the body after loading?

Secondly, here is my code, I checked a lot of similar questions, my browser is chrome-plated, and yet it does not work, I don’t know why you can help me with this?

<div class="test_dis" style="left:170px; top:128px;" > this is a test to see if i can disable it on load or not <div>child </div> </div> $(document).load(function(e) { // shall it be on Load or Ready ? //.attr("disabled","disabled"); both are not working ! $('.test_dis').attr('disabled',true); }); 

Thank,

Answer 1

It does not work because you cannot disable the div element. This only works for form elements.

HTML specification :

"The following elements support a disabled attribute: BUTTON, INPUT, OPTGROUP, OPTION, SELECT, and TEXTAREA."

For elements in which work is disabled, you must set the HTML attribute so that this element is disabled already when it is created, instead of disconnecting it after it is created. Example:

  <input type="text" name="Info" disabled="disabled" /> 

The ready event occurs before the load event, so any adjustments you cannot make directly to the HTML elements you must make in the ready event. The ready event occurs when the document is loaded, and the load event occurs when all content on the page is also loaded (images et.c.).

Answer 2

hide it?

 $(document).ready(function() { $('.test_dis').hide(); }); 

Answer 3

Hiding it will work, but it will need a container with the same dimensions and positioning, for example.

 <div class="test_dis_container" style="left:170px; top:128px;" > 

Then add the function to the container so you can show the div on click:

  $(document).ready(function() { $('.test_dis').hide(); $('.test_dis_container').click(function() { $('.test_dis').show(); } });