jquery screen with hide/show - javascript

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 ??

Makes 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.com/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.com/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.com/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.

Related

How to remove fix postion when window is scrolling in mobile size window in scrollToFixed.js plugin?

I use scrollToFixed.js for scroll my div with fix postion .but I want to when I see the page in mobile device I remove position fix when I scroll to bottom of page.how I can do it?I write some code but it does not work correctly.
<div class="header" style='height:50px;border:1px solid;'></div>
<div class="container-fluid">
<div class="row">
<div class="col-md-3 col-sm-4">
<div class="profileRight" style='height:550px;border:1px solid;'>
name:Jack
</div>
</div>
<div class="col-md-9 col-sm-8 profile-info">
<div style='height:1550px;border:1px solid;'>
content</div>
</div>
</div>
</div>
$( '.profileRight' ).scrollToFixed( {
marginTop: $( '.header' ).outerHeight(),
limit: function () {
var limit = $( '.footer' ).offset().top-480;
return limit;
}
} );
$( document ).scroll( function () {
var winWidth = $( window ).width();
if ( winWidth < 767 ) {
$( '.profileRight' ).css( "position", "static" );
}
} );
You can use css instead of js, like:
#media only screen and (max-width: 767px) {
.profileRight{
position: static;
}
}
Well the first question is what metric you want to use to target what you call "mobile". If like in your code, and the previous commenter suggests, you are fine with "mobile" meaning simply a narrower browser window than 767px, even if the user is on a desktop computer, then a media query will do the trick, but keep in mind there are other methods of checking to see if the browser is actually mobile/touch, see What is the best way to detect a mobile device?.
For your case with scrollToFixed.js, the issue is that the plugin adds the position:fixed style "inline" on the element, so in order for a media query to have more specificity, you would sadly have to use an !important flag in the declaration matched by the media query.
#media only screen and (max-width: 767px) {
.profileRight{
position: static !important;
}
}

Hide sidebar when viewport is too small

I'm hidding the sidebar with a button.
But when the view get's under 991px I want to hide the sidebar to have more space for my site.
How can i do this? If I put the code inside the if it will always be toggling. If the size is bigger than 991px it should show the sidebar again
$('#sidebar-btn').click(function () {
$('#sidebar').toggle('visible');
$('.content-wrapper, .full-page-wrapper').toggleClass('content-wrapper full-page-wrapper');
});
//toggle sidebar when width is too small
var browserWidth = $(window).width();
if(browserWidth <= 991 ) {
}
You can use plain CSS for that (EDIT: if you want to toogle classes you need JS).
if(!($(window).width() <= 911)) {
$('.content-wrapper').toggleClass('content-wrapper');
$('.full-page-wrapper').toggleClass('full-page-wrapper');
}
#media screen and (max-width: 911px) {
#sidebar {
display: none;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<section id="sidebar" class="content-wrapper full-page-wrapper">AAAAAAAAAA</section>
You could try with css as follow :
#media (min-width:991px) {
//Do your css things
}
Else you can catch resize event
Use jQuery to get the width of the window.
if ($(window).width() < 960) { alert('Less than 960'); } else { alert('More than 960'); }

How to make an image a link when screen becomes small

I'm building a web page to learn about responsive web development and have run into a problem with my links. When the page width is small I would like to add hyperlinks to my images however when it becomes large I would like to take them off the images and put them on another element. Is there a way to do this with HTML, CSS and/or JavaScript?
For more context please take a look at this slideshow where I have added a breakpoint at screen width 450px. When the screen is wider, the hyperlink is on the "Read More" button, however I would like it to be on the image when the "Read More" button disappears.
If you wanted to use jQuery, you could do something like this:
Demo
JS:
$(document).ready(function() {
moveLink();
});
$(window).resize(function() {
moveLink();
});
function moveLink() {
if ($(window).width() >= 450) {
$("#myImage").unwrap();
$("#myText").wrap('<a href="https://www.stackoverflow.com">').show();
} else {
$("#myText").unwrap().hide();
$("#myImage").wrap('<a id="myLink" href="https://www.stackoverflow.com"></a>');
}
}
HTML:
<img id="myImage" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150">
<br>
<span id="myText">Read More</span>
Example using media queries (minimize the window to be less than 600px, you will see the link, otherwise you will see the image):
https://jsfiddle.net/89ptv9mt/
#media (max-width: 600px) {
.logo {
display : none;
}
.altText {
display : block;
}
}
#media (min-width: 601px) {
.logo{
display : block;
}
.altText {
display : none;
}
}
<img class="logo" src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png" alt="MDN">
MDN

Modifying CSS width with Jquery according to screen width

Hey guys I'm running into some problems with the following code. What I'm trying to do is modify the width of a div via css according to the width of the screen.
<html>
<head>
<script src="../jquery/jquery.js" type="text/javascript"> // Add JQuery Code. </script>
</head>
<body>
<div id="something" style="background-color: black; width: 100px;">hello</div>
<script>
$(document).ready(function() {
if (screen.width = 1024) {
$(#something).css('width':'200px', 'background-color':'blue');
}
elseif (screen.width = 1366) {
$(#something).css('width':'300px', 'background-color':'blue');
}
}
</script>
</body>
You have a few problems.
The width should be checked with range
$(document).ready(function() {
if ($(window).width() >= 1366) {
$('#something').css({ 'width':'300px', 'background-color':'blue' });
} else if ($(window).width() >= 1024) {
$('#something').css({ 'width':'200px', 'background-color':'blue' });
}
});
Edit:
Combined with window.resize, then I think it'll behave exactly what you want.
But you can also consider using css media query to achieve responsive layout.
#media only screen and (min-width:1024px){
.my-style {
background-color: blue;
width: 200px;
}
}
#media only screen and (min-width:1366px){
.my-style {
background-color: blue;
width: 300px;
}
}
Try to use the window's resize event, by the way you are assigning the values inside the if statement,
$(document).ready(function() {
$(window).resize(function(){
var something = $('#something');
if ($(this).width() >= 1366) {
something .css({'width':'200px', 'background-color':'blue'});
}
else if ($(this).width() >= 1024) {
something.css({'width':'300px', 'background-color':'blue'});
}
});
});
Note: your code has lot of syntax errors like passing a undefined var as selector, error with else if etc.. and as well as i received a downvote for that.

Enable/Disable javascript using Media Query

I have a slide where I want to show photos specific for each device. iPhone, iPad, Desktop.
I would like to use something like this to filter each out. Obviously display:none isn't going to work since it's JavaScript, but this is just a general idea of how it should work:
<style type="text/css">
#media only screen and (min-width: 800px) {
#slide-desktop{display:block;}
#slide-ipad{display:none;}
#slide-iphone{display:none;}
}
#media only screen and (min-width: 481px) and (max-width: 799px) {
#slide-desktop{display:none;}
#slide-ipad{display:block;}
#slide-iphone{display:none;}
}
#media only screen and (max-width: 480px) {
#slide-desktop{display:none;}
#slide-ipad{display:none;}
#slide-iphone{display:block;}
}
</style>
<div id="slide-desktop">
<script>
$.vegas('slideshow', {
delay:6000,
backgrounds:[
{ src:'images/slide/desktop.jpg', fade:600 },
]
})('overlay');
</script>
</div>
<div id="slide-ipad">
<script>
$.vegas('slideshow', {
delay:6000,
backgrounds:[
{ src:'images/slide/ipad.jpg', fade:600 },
]
})('overlay');
</script>
</div>
<div id="slide-iphone">
<script>
$.vegas('slideshow', {
delay:6000,
backgrounds:[
{ src:'images/slide/iphone.jpg', fade:600 },
]
})('overlay');
</script>
</div>
If you want to run different scripts based on a media query you can use enquire.js
enquire.js is a lightweight, pure JavaScript library for responding to
CSS media queries.
So, you no need to put anything in a style at all.
If you want to check by the device width you can use simple javascript like this
if(window.innerWidth >= 800)
{
alert('desktop?');
}
else if(window.innerWidth >= 481 && window.innerWidth < 799)
{
alert('ipad?');
}
else if(window.innerWidth < 480)
{
alert('iphone?');
}
But I would not go for this technique.
Check out
What is the best way to detect a mobile device in jQuery?

Categories

Resources