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 certa

Solution 1:

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;
  }
}

Solution 2:

By using jQuery:

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

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

});

Solution 3:

I had an experience with this subject that took me about an hour to solve. I share it with anyone who needs to hide an element on screen resize, specially when your element has a long css style: you have to rewrite the styles when screen resizes. for example when you have

.myClass {
    border-radius: 40px;
 }

for primary style and after resizing @media screen and (min-width: 768px), you want just 2 corners to have border-radius, you can't write:

.myClass {
    border-top-right-radius: 40px;
    border-bottom-right-radius: 40px;
 }

I was thinking that the primary style removes completely and the secondary style applies while screen resizes, that was completely wrong, exactly the same styles will be replaced and others won't. in my example, if I would like to have just 2 corner of my block to have border-radius, I have to first remove all corners border-radius and then apply the border-top-right-radius and border-bottom-right-radius, so this will apply:

.myClass {
    border-radius: 0px;
    border-top-right-radius: 40px;
    border-bottom-right-radius: 40px;
 }

but the previous won't. I hope you understand and help you to solve your problems faster.