10

I'm trying to avoid using innerHTML because it causes my browser to crash, probably due to the 250 milliseconds refresh rate.

Anyway, I would rather have some content in an hidden <div> and make the <div> visible only if a certain condition is met. What's the best approach to go around this?

Basically, what I'm doing now is..

setInterval(function () {
    if (serverReachable()) {
        .... // lines of code
        .... // lines of code
    var changeIt = document.getElementById('change')
    changeIt.innerHTML = '';
           timeout = setInterval(function(){window.location.href = "Tracker.html";},5000);
        }
    } else {
        clearTimeout(timeout);
        timeout = null;
    var changeIt = document.getElementById('change')
    changeIt.innerHTML = 'offline';
   }
}, 250);

This will crash my browser, because I'm not using innerHTML to print "offline" but a whole <div>. I want to have this <div> hidden, and instead of using innetHTML, to simply unhide if a condition is met (in this case, no internet connection).

1
  • I would change the setInterval() to a recursively called setTimeout() - this shouldn't be crashing your browser. Certainly the inner setInterval should be a setTimeout - one time event.
    – MrWhite
    Dec 30, 2012 at 17:48

5 Answers 5

12

Then use CSS to hide and unhide the div. You can do something like this:

    changeIt.style.visibility = 'hidden';

to make the div disappear. And

   changeIt.style.visibility = 'visible';

to show it again.

1
  • 4
    @EliUnger: It should be noted that hiding an element with visibility still occupies the space on the page, whereas display = 'none' essentially removes it - which you use is dependent on your situation.
    – MrWhite
    Dec 30, 2012 at 17:51
7

Set the display CSS property of the div to none.

https://developer.mozilla.org/en-US/docs/CSS/display

Example of setting it programmatically with Javascript: http://jsbin.com/ezanuv/1/edit

5
  • I'm aware of the display property - but how can I set the DIV to display: none if a condition is met? Basically, using JavaScript.
    – Homie
    Dec 30, 2012 at 17:40
  • @EliUnger, I've added an example. There are many ways to do it; this is one. (Note that querySelector is just a way to get a DOM element; getElementById works just as well.)
    – jonvuri
    Dec 30, 2012 at 17:42
  • @EliUnger: changeIt.style.display = 'none';
    – MrWhite
    Dec 30, 2012 at 17:43
  • Thx, looks like you and Vincent have the same answer :-) I appreciate your help.
    – Homie
    Dec 30, 2012 at 17:52
  • @EliUnger, Actually, we don't. See w3d's comment on Vincent's answer.
    – jonvuri
    Dec 30, 2012 at 18:12
6

I prefer using css display property. I have a running code which I wrote recently. Its very simple and scalable as well.

  <HEad>
    <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
    <script> 
       $(document).ready(function() {
         $.setDisplay = function (id){
           if($("#" + id ).css('display') == 'none'){
             $("#" + id ).css('display', 'block');
           }
           else
           if($("#" + id ).css('display') == 'block'){
             $("#" + id ).css('display', 'none');
           }
         }

         $('*[id^="divheader"]').click(function (){
            $.setDisplay($(this).data("id"));
         });
       });
     </script>
  </HEad>        

<div id='divheader-div1' data-id='div1'>
  This is the header Click to show/unshow
</div>
<div id='div1' style='display: block'>
  <div>
    <label for="startrow">Retail Price:</label>
    <input type="text" name="price" id="price" value=""><small></small>
  </div>
</div>

<div id='divheader-div2' data-id='div2'>
 This is the header Click to show/unshow
</div>
<div id='div2' style='display: none'>
 <div>
   <label for="startrow">Division:</label>
   <input type="text" name="division" id="division" value=""><small> </small>
 </div>
</div>
3

You could either set the display property to none or the visibility property to hidden.

0
0

The best way is to set the display none for hidden and block for visible

//the element is the div you want to hide or display

element.style.display = (element.style.display == "block") ? "none": "block";

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

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

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