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
Related
I am super new to Javascript/JQuery, and I'm having trouble figuring out how to do this. I want to add it to a responsive site that I am working on in class.
I have a hamburger menu set up that hides/shows my menu, which works great. The thing is I only want the Javascript to run on a screen width of 414px or less. My menu is to be hidden until I click the hamburger.
For screens 415px, and above I don't want it to hide my menu, or show the hamburger and "X". I can hide the "X" and the hamburger easily enough with media queries if needed, but I still need my menu to display.
I tried to add an event loader, but must have done something wrong, as everything turned on (X, hamburger, & menu), and clicking did nothing. Please help me figure out how to make this work. I am super green at this, so any pointer would be greatly appreciated. Thanks ahead of time
// Hamburger menu
$(document).ready(function () {
$(".cross").hide();
$(".menu").hide();
$(".hamburger").click(function () {
$(".menu").slideToggle("slow", function () {
$(".hamburger").hide();
$(".cross").show();
});
});
$(".cross").click(function () {
$(".menu").slideToggle("slow", function () {
$(".cross").hide();
$(".hamburger").show();
});
});
});
You can use Jquery width() to get the current page width, and use it as a condition.
$(document).ready(function() {
WindowWidth = $(window).width();
if (WindowWidth < 415){
do logic...
}
else {
do other logic...
}
}
But remember that people often resize their screens so you need to handle that as well.
$(window).resize(function () {
WindowWidth = $(window).width();
if (WindowWidth < 415){
do logic...
}
else {
do other logic...
}
}
Based on #m4dm0nk3y
I usually extract the common code in a function and call it on ready, and then on resize.
function alignStuff() {
WindowWidth = $(window).width();
if (WindowWidth < 415) {
console.log('small');
} else {
console.log('large');
}
}
$(document).ready(function() {
alignStuff();
})
$(window).resize(function() {
alignStuff();
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
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>
a simple question.
I am writing a plugin that will add and remove classes based on the current window size but right now i cant even trigger the resize event correctly.
So my code
(function(jq) {
jq(window.jQuery, window, document);
}(function($, window, document) {
$(function() {
var $window = $(window).width();
function resize() {
if($window < 768)
{
console.log("Less than 768");
}
else {
console.log("more than 768");
}
}
$(window)
.resize(resize)
.trigger('resize');
});}));
this code produces always the same value, for example if i load the screen when its less than 768px it will log less than 768, and if i do full screen it will log more than 768px. any help?
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 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.
}