CODEWITHSUNDEEP
javascripthtmlcssweb
apebeast
apebeast

Reputation: 368

Hide element on window resize

I've attempted to build a table that appears when the window is a certain size. Now I want to work it to be more responsive by making the table hidden once a window reaches a certain size. I've seen window.onresize(), but I'm not sure how to implement it with the following code.

 if (iedom||document.layers){
    with (document){
        document.write('<table style="display:block" border="0" cellspacing="0" cellpadding="0"><td>')
        document.write('</td></table>')
    }
 }

Upvotes: 0

Views: 3665

Answers (2)

areddy
areddy

Reputation: 67

By using jQuery:

$( window ).resize(function() {
  // Adding table when window resized to below 500px
  if($(this).width() <= 500){
    $( "body" ).append( "<table id='dynamicTable'><tr><td>Table created</td></tr></table>");

  }else if($(this).width() > 500){
    // Removing table from DOM when window resized to above 500px
    $( "#dynamicTable" ).remove();
  }

});

Upvotes: 1

Bobby Shark
Bobby Shark

Reputation: 1074

By using a CSS class. Something like :

.myClass {
   display:block;
}
// width > 768px
@media screen and (max-width: 768px){ 
  .myClass{
    display:none;
  }
}

// width < 768px
@media screen and (min-width: 768px){ 
  .myClass{
    display:none;
  }
}

Upvotes: 1

Related Questions