I have a small piece of Javascript that checks what the browser's width is on load and, depending on the result, runs a piece of jQuery. This to display a different menu on mobile devices
However, it CAN happen a user starts with a very small browser on his desktop, running the jQuery (and therefore the mobile menu). If he then resizes to full-screen, the menu doesn't change, because the check on the browser's width doesn't run again.
The question: How do I adapt the Javascript so it checks every time the browser is resized?
My code:
if (window.innerWidth <= 992) {
jQuery(document).ready(function($) {
$(".main-menu").hide();
$(".mobile-nav-button").click(function() {
$(".main-menu").slideToggle(500);
});
});
}
else {
jQuery(document).ready(function($) {
$(".mobile-nav-button").hide();
$(".mobile-cart-button").hide();
});
}
You can use a resize function wrapper like this:
function resize(){
// do all your stuff here
}
And then call it once on page load, and recall it on every resize event:
$(document).ready(function(){
resize();
$(window).resize(resize);
});
Instead of the wrapper you could also use an anonymous function ($(window).resize(function(){/*Do stuff here*/})), but then you can't call your function on page load and you'd have to repeat yourself.
Your specific case
In your specific case you'd have to take out the document readys. Heres how it should look:
function resize(){
// First we need to show all, then we will selectively hide based on page width
$(".main-menu, .mobile-nav-button, .mobile-cart-button").show();
if (window.innerWidth <= 992) {
$(".main-menu").hide();
// also, because you bind a click event here, you'll need to unbind it every time
// otherwise it will be executed multiple times after a couple of resizes
// (you could also do what #david does and move this into the document.ready below)
$(".mobile-nav-button").off("click").click(function() {
// slideToggle will toggle display of an element, but because its wrapped in click()
// it only gets executed onclick, not resize. Also, you don't want animation on resize.
$(".main-menu").slideToggle(500);
});
} else {
$(".mobile-nav-button").hide();
$(".mobile-cart-button").hide();
}
}
$(document).ready(function(){
resize();
$(window).resize(resize);
});
A snippet
Below is a snippet with the code working. I reduced the width to 700 pixels so I could see the effects at a smaller screen difference (because that how the snippet editor looks) but it all works.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="mobile-nav-button">Mobile Nav Button</div>
<div class="mobile-cart-button">Mobile CART Button</div>
<div class="main-menu">MAIN MENU</dov>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
function resize(){
$(".mobile-nav-button, .mobile-cart-button, .main-menu").show();
if (window.innerWidth <= 700) {
$(".main-menu").hide();
$(".mobile-nav-button").off("click").click(function() {
$(".main-menu").slideToggle(500);
});
} else {
$(".mobile-nav-button").hide();
$(".mobile-cart-button").hide();
}
}
$(document).ready(function(){
resize();
$(window).resize(resize);
});
</script>
</body>
</html>
you can use
jQuery(document).ready(function($) {
$(".mobile-nav-button").click(function() {
$(".main-menu").slideToggle(500);
});
$(window).resize(function()
{
if (window.innerWidth <= 992) {
$(".main-menu").hide();
}
else {
$(".mobile-nav-button").hide();
$(".mobile-cart-button").hide();
}
));
$(window).resize();
));
Just call resize function on pageLoad
$(document).ready(function($) {
$(window).resize(YourFunctionName);
$(window).resize();
});
function YourFunctionName() {
// Here is your code which you want to run automatically on page resize.
}
Related
My users book an appointment on our website which changes the height of an iframe when the iframe has changed height I want to hide the above the iframe automatically. This is what I have so far the limitation is it only works on the following events but I want it to hide the dynamically rather than on page re-size or scroll as these events dont take place
$(window).on('load resize scroll', function() {
if ($(".remove-text").height() >= 582) {
$("#execphp-30, #execphp-47, #execphp-48").hide();
} else {
$("#execphp-30, #execphp-47, #execphp-48").show();
};
});
I use the iframeresizer js plugin to detect dynamically update the height of the iframe
<script>
jQuery(function($) {
$(window).on('DOMSubtreeModified', function() {
if ($(".remove-text").height() >= 582) {
$("#execphp-30, #execphp-47, #execphp-48").hide();
} else {
$("#execphp-30, #execphp-47, #execphp-48").show();
};
});
});
</script>
I'm working on a website with two banners- one for mobile and one for desktop. In order to have both banners functioning I had to write an if statement that a past of the dsktop javascript is only executed if the desktop banneris set to display:block in the css.
This works fine, but the only problem is when the user resizes the window the if statement doesn't get executed- they have to reload the page to do that.
this is the code :
var wait = setInterval(function () {
if (!$(currentBanner, loading).is(":animated")) {
clearInterval(wait);
loading.stop().fadeOut(300, function () {
if ($('#banner').css('display') == 'block'){
setTimeout(function() {
bannerInit();
}, 800);
startInterval();
if (initialLoad) {
initialLoad = false;
next.slideDown();
previous.slideDown();
}
}
});
}
Does anybody know how I can trigger the if statement not only on page load but also on resizing of the window?
Like this:
// on document ready
$( document ).ready(function() {
/* your function/code here */
});
// on page load, all elements finished e.g images etc
$(window).load(function() {
/* your function/code here */
});
// on page resize
$(window).on('resize', function(){
/* your function/code here */
};
Or vanilla JS:
// page load
window.onload = function() {
/* your function/code here */
};
// resize
window.addEventListener("resize", myFunctionOnResize);
This is the code. It works fine on Firefox.
var imageGrad = $('.cuadro-azul-consejo'),
image = $('.img.foto');
function resizeDiv () {
imageGrad.height(image.height());
$(document).ready(function() {
$("img.foto").each(function() {
$('.cuadro-azul-consejo').css("height",$(this).innerHeight());
$('.cuadro-azul-consejo .outter-azul').css("height",$(this).innerHeight());
});
})
}
resizeDiv();
$(window).resize(function() { resizeDiv(); });
The code takes the height from the image and applies on the div, but when the page loads, the div takes 0px height. I have to resize the window to make it work.
What am I missing?
your $(document).ready(function() is inside the function, create the function and call it on document ready and window resize
I am using skroller.js. But after using this jquery, Touch is not working on the mobile version of my site.
You want something like this?
Check this DEMO : http://jsfiddle.net/aq5vb/4/
Try to resize the result frame see what happens when the window's size reaches 960px.
JQUERY
$(document).ready(function(){
doThisScript();
});
$(window).on('resize', function () {
doThisScript();
});
function doThisScript() {
$('.content').html('Your current width is '+$(window).width());
if($(window).width() >= '960'){
// add your scripts here
$('.content').css({'background':'green'});
}
else{
$('.content').css({'background':'white'});
}
}
I try to unload function if browser window less than 944px. I start to write this
$(window).resize(function() {
if ($(window).width() >= '944') {
$(window).load(function() {
$('#slider').nivoSlider();
});
} else {
alert($(window).width());
if ($(window).width() <= '944') {
$(window).unload(function() {
$('#slider').nivoSlider();
});
}
}
});
but i stuck. I want if the user enters, verify resolution and if more than 944px to load jquery function, however if browser is resize or less resolution than 944px, function will be unload.
i have a different solution for your problem; you can prepare a new slider mask (just like slider but without nivoSlider functions) for <944px window width, when browser width <944px niveSlider will be hide and your mask will be seen.
check it out:
$(window).resize(function() {
windowWidth = $(this).width();//you need to use this for changable values
if ( windowWidth > 943) {
$('#sliderMask').hide();
$('#slider').show();
$(window).load(function() {
$('#slider').nivoSlider();
});
} else if ( windowWidth < 944) {
$('#slider').hide();// hide your nivoSlider
$('#sliderMask').show();// show your basic slider mask
}
});
please note that: you need to use $(this) to get current value.
here is jsfiddle example for you; check the console log from your browser's developer panel