I'm trying to use jQuery to only load certain content if the viewport is above a specified width.
This works, but not quite right. Check out the JsFiddle link at the bottom for a working demo.
Here's what I have so far;
If the viewport is below 500px #wrapper is hidden with a media query.
Above 500px #wrapper is set to visibility: visible;
jQuery is looking for element.is(':visible'). When this happens jQuery loads the image.
Resizing the browser window activates the media query, but not the jQuery.
The jQuery only fires on a page refresh.
I've tried using $( window ).resize(function() but this fires every time the viewport changes size, duplicating the content.
Is there a way to activate jQuery without a page refresh?
The ideal solution would be;
up to 500px load nothing,
when the viewport is resized above 500px load the jQuery.
If the viewport is resized below 500px unload the jQuery content.
HTML
<p>CSS hides <strong>#wrapper</strong> if viewport is below 500 pixels.</p>
<div id="wrapper">
<p>jQuery checks CSS to see if <strong>#wrapper</strong> is visible and loads image on page refresh.</p>
<p>I'm looking for a way to run this function without needing to refresh the page. I've looked into using (resize) function, but this duplicate the content.</p>
CSS
#wrapper {
visibility: none;
display: none;
}
#media only screen and (min-width: 500px){
#wrapper {
visibility: visible;
display: block;
}}
JQuery
$(function() {
var element = $(this).find('#wrapper');
if (element.is(':visible')) {
$('#wrapper').prepend('<img src="http://cache.desktopnexus.com/thumbseg/1134/1134934-bigthumbnail.jpg" alt="Demo image">');
}
JsFiddle link:
https://jsfiddle.net/tu60wbbu/13/
You can use window.matchMedia() instead of $(window).resize() to have your javascript respond to a media query match in your CSS.
https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia
It's fairly well supported across browsers.
http://caniuse.com/#search=matchmedia
If you need to support IE 9 or lower, you might have to fall back to using $(window).resize() for those browsers.
Here is the code for my comment:
$(function() {
var large = false;
var barrier = 1000;
$( window ).resize(function() {
if(!large && $(window).width() > barrier) {
large = true;
$('#wrapper').prepend('<img src="http://cache.desktopnexus.com/thumbseg/1134/1134934-bigthumbnail.jpg" alt="Demo image">');
} else if(large && $(window).width() < barrier) {
large = false;
$('#wrapper img').remove();
}
});
});
Working Fiddle: https://jsfiddle.net/tu60wbbu/14/
I used 1000px as the barrier in the demo.
You should initialize large properly by the window width on load. For demo purposes i used false as initial value.
Sorry for the long time, I was at vaccation :-)
Related
I have an animation that triggers when the page load and it is an image going from right to left, very straightforward. Now, it works very well on desktop but not so good in mobile. Is there any way to apply something like a media queries as it is done with css but for jQuery?
You can actually try to combine CSS media queries and JS, by using a hidden element and setting a specific value for some CSS property like z-index. You can then check the value of this property with JS and set a mobile variable accordingly.
I've found that this works more accurate than trying to get the viewport width in JS. Or at least it makes sure that the point at which the variable is true in JS is exactly the same as when the changes to the CSS occur.
CSS
#test {
display: none;
z-index: 1;
}
#media only screen and (max-width: 400px) {
#test {
z-index: 2;
}
}
JS
(function($) {
var $test,
isMobile = false;
function checkTest() {
if ($test.length) {
isMobile = $test.css('z-index')=='2';
}
}
$(function() {
$test = $('#test');
checkTest();
});
$(window).on('resize',function() {
checkTest();
});
// in the rest of your code you can now simply check if isMobile is true
})(jQuery);
Edit
Preferably you should not be using an extra hidden element just for this purpose. You should usually have some existing element that is altered in some way by the media query and you can check for that. Like a header that is fixed in desktop view but not for mobile, or perhaps a logo that is 200px wide for desktop and only 100px for mobile. You get the idea.
I have a javascript function that is called when the user resizes the window and that does different things depending on whether a CSS media query (max-width) is true. In order to do that, I have a div that is made visible when the media query is triggered. The javascript code then checks the div's visibility (inside the resize event). This works great in Chrome and Firefox, but is giving me minor issues in Safari (7.0.5). If the window is resized and is around the width at which the condition is triggered, the js code is sometimes out of sync with the CSS: when I inspect the div I can see that it's showing (meaning the media query is working correctly), but the js conditional that checks visibility still returns false. The code is pretty simple:
JQuery:
if ($("#is-mobile").css("display") === "none") {
$("#site-nav").show();
} else {
$("#site-nav").hide();
}
CSS:
#is-mobile {
width: 0;
height: 0;
display: none;
}
#media screen and (max-width: 500px) {
#is-mobile {
display: block;
}
}
This mismatch only happens if the CSS width of the window is roughly between 485px and 499px. That makes me thing it's related to the ~15-20px mismatch between $(window).width() and the CSS viewport width that can occur when a vertical scrollbar is visible (see e.g. here). I do have a vertical scrollbar in my window so I wonder if that's what is causing the issues. Ironically, that scrollbar weirdness is why I'm checking the visibility of the div instead of using $(window).width() in the first place!
EDIT: just tested this code in an otherwise empty html (so no vertical scrollbar), and the problem is indeed gone. So must be related to the scrollbar.
I am trying to apply a class name based on the width of the viewport such that it doesn't "flash" before the JavaScript gets loaded and processed.
For example, I have a Bootstrap sidebar that I want to hide by default if the user is on a mobile device. If I just add some logic to document.ready event, then the menu is visible for a split second before disappearing, which is annoying.
To circumvent that behavior, I used document.write to create the open tag for my sidebar:
<script type="text/javascript">
// Prevent flicker of menu before collapsing on small screens
if (window.outerWidth < 768) {
document.write('<aside class="collapse" id="primary-sidebar">');
} else {
document.write('<aside class="collapse in width" id="primary-sidebar">');
}
</script>
...
</aside>
While this resolves the problem, I do get warnings in Firefox about unbalanced trees and I've read that document.write should not really be used in this manner.
Is there another way to add the in width class based on the window size without waiting until after the page is all loaded?
Instead of putting the Javascript in document.ready, put the <script> tag immediately after the element in question.
<aside class="collapse" id="primary-sidebar">
...
</aside>
<script type="text/javascript">
if (window.outerwidth >= 768) {
document.getElementById("primary-sidebar").className = "collapse in width";
}
</script>
While this will briefly display the wrong size, it should resize so quickly that the flicker should be unnoticeable. I put this logic in the desktop version, since the processing should be faster.
You can use:
var aside = document.querySelector("#primary-sidebar");
if (window.outerWidth < 768) {
aside.className = "collapse";
} else {
aside.className = "collapse in width";
}
You're going to cause yourself a lot of stress by using JavaScript to handle things like hiding/showing based on screen size.
The standard way to hide/show things based on screen size is with the #media CSS rule
For example:
#media (min-width: 768px) {
#primary-sidebar {
display:none;
}
}
If you want to prevent your menu from being shown initially, set the element to
display: none;
or
visibility: hidden;
On the other hand you don't need to put it inside $(document).ready(); if your only condition is the width of the window.
I'm building a responsive website using css medias and JQuery.
I created a script to check the page width:
if ($(window).width() < 1240) {
$("#menu").toggle(); //hide menu
$('#body-wrap').toggleClass('shifted'); //puts the body width to 100%
$('#navbar').toggleClass('shifted'); //puts the navbar width to 100%
}
But this code only works when I refresh the page.
How can I do it automatically?
Thanks.
Put it in a resize event.
window.addEventListener('resize', function () {
// Your code
});
You may want to consider using CSS to do this instead, though (look at media queries for that)
You have to add it to the onresize event:
https://developer.mozilla.org/en-US/docs/Web/API/Window.onresize
This event will be called each time when you resize the window, so you can respond to those changes.
But I think a better option would be to use CSS media queries, like so:
#media only screen
and (max-device-width : 1240px) {
#menu {
display: none;
}
}
Example and info on: http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
I'm pretty new to web-development and web-design, and I'm working on a website for a company right now(www.momentium.no). They want to have the background image(s) at the top recognize the browsers window-size, so that the image(s) fills the whole screen and don't show the content below before you scroll down when you load the website.
Could anyone of you check this out? Would be great to get a little bit of help!
Thanks,
Yngvar
Setting the height to 100% using CSS will work, but you'll have to revise your HTML structure in order to maintain it's flow when the window is resized.
Otherwise, you can try the following code snippets:
JS:
var $imageWrapper = $('#background-image'),
$contentSpacer = $('section#wrapper > header'),
// Some buffer value, adjust this to get the rest of the content aligned properly
buffer = 200;
// Set the div height on pageload
$(document).ready(function() {
var windowHeight = $(window).height();
$imageWrapper.height( windowHeight );
$contentSpacer.height( windowHeight );
});
// Change the div height on window resize
$(window).resize(function() {
var $this = $(this),
thisHeight = $this.height();
// Set the height of the image container to the window height
$imageWrapper.height( thisHeight );
$contentSpacer.height( thisHeight - buffer );
});
CSS:
#background-image {
background-size: cover;
// Change this to the minimum height your page will support
min-height: 600px;
}
The rest of the code you have seems correct, so adding these should fix things up. A couple of things to keep in mind here:
The JS isn't placing any limitation on the height being applied here, so the CSS will still apply even if the window is resized to 10px height. Most designs have a minimum height/width before breaking, so using a min-height on your #background-image div might be a good idea.
Check the browser support before implementing, if you need to support one of the unsupported browsers, you'll need to either write a fallback or restructure your code in such a way that it degrades gracefully. IE9+, Chrome21+ and FF26+ should be good enough though.
Looks like you're using a spacer in the main section to ensure that the page content comes in after the main slider. The structure of the page can be modified so that you don't have to modify two element heights. As I mentioned at the beginning, you can probably use the pure CSS solution if you restructure.
You can have 2 solutions :
As Pete says, you can use "background-size" css3, but it will not be compatible for older browser
You can use javascript with $(window).height() and $(window).width
The Only Way is create a repponsive design for your company..all the problem will be solved by responsive design...
Change the image size depends upon the browser window size Other wise
change the image to another one also possible
You can set the height of your "background-image" div to 100%, it will work.
Check this code:
#background-image {
width: 100%;
height: 100% !important;
position: absolute !important;
overflow: hidden;
text-align: center;
background: #000;
}