I want to a div to be hidden it the screen size is bigger than 700px and shown only if the screen size is less than 700 px;
Here is the code i'm trying to implement with using jQuery 3
jQuery(document).ready(function() {
if ((screen.width>701)) {
$(".mobile-section").css('display', 'none'); $(".yourClass").hide();
}elseif ((screen.width<=699)) {
$(".mobile-section").css('display', 'block');
}
});
It's not working --- am I doing anything wrong ??
I want to a div to be hidden it the screen size is bigger than 700px and shown only if the screen size is less than 700 px;
Here is the code i'm trying to implement with using jQuery 3
jQuery(document).ready(function() {
if ((screen.width>701)) {
$(".mobile-section").css('display', 'none'); $(".yourClass").hide();
}elseif ((screen.width<=699)) {
$(".mobile-section").css('display', 'block');
}
});
It's not working --- am I doing anything wrong ??
Share Improve this question edited Mar 16, 2017 at 11:05 Lelio Faieta 6,6949 gold badges47 silver badges84 bronze badges asked Mar 16, 2017 at 11:01 The Naga TankerThe Naga Tanker 4411 gold badge4 silver badges18 bronze badges 1- 2 use css media query – David Commented Mar 16, 2017 at 11:03
4 Answers
Reset to default 5Makes no sense really to use javscript/JQuery here if that is all you want try with CSS media queries like
.mobile-section {
display: none;
background-color: orange;
}
@media screen and (max-width: 700px) {
.mobile-section {
display: block;
}
}
<div class="mobile-section">
hello mobile section
</div>
Check out this fildde and resize the viewable area
width()
is a function supported by jQuery
providing the width
property of e.g. document
or window
elements. In your case it refers to the document
.
http://api.jquery./width/
An explanation of the difference between jQuery's .width() and screen.width would be good - screen.width
is a native DOM property and it returns the width of the whole screen, e.g. if you have a monitor with 1920x1200 resolution, screen.width
will return 1920
.
$(document).ready(function() {
if (($(this).width() > 701)) {
$(".mobile-section").css('display', 'none');
$(".yourClass").hide();
}
else {
$(".mobile-section").css('display', 'block');
}
});
Use media queries, no JavaScript required.
@media only screen and (min-width: 700px) {
#hideMe{
display:none;
}
}
<div id="hideMe">This should only be displayed on smaller than 700px screens</div>
You can read about media queries here: https://www.w3schools./css/css_rwd_mediaqueries.asp
Try this,
// Returns width of browser viewport
$( window ).width();
// Returns width of HTML document
$( document ).width();
$(document).ready(function() {
if ($(window).width() > 701) {
$(".mobile-section").css('display', 'none');
} else if ($(window).width() <= 700) {
$(".mobile-section").css('display', 'block');
}
});
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="width : 100px; height:100px;border:solid 1px red;" class="mobile-section">
</div>
Hope this helps.