Hide Element On Window Resize
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.
Post a Comment for "Hide Element On Window Resize"