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?
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>
in this demo if you click inputs in dark blue area (NUMARANI GONDER) you gonna see nothing happend but if you click on responsive mode (less than 768px) u gonna see modal has been opening it's okey this is the thing that I want but if u click again on dekstop mode black element has been opening
I'm using bootstrap modal and my JS Codes
var $window = $(window),
$nogonder = $('.add-modal');
$(window).on('resize', function () {
if ($window.width() < 768) {
$nogonder.on("click",function(){
$("#parallaxPopup").modal('show');
})
}else{
$("#parallaxPopup").modal('hide');
$("#rezervasyonPopup").modal('hide');
$("#popupCheckin").modal('hide');
};
});
Cause:
Notice that it only happens if hit the case where the window is < 768 and then you resize it to be larger. If you start large it is fine.
This is because you are not unbinding the event.
Solution:
var $window = $(window),
$nogonder = $('.add-modal');
$(window).on('resize', function () {
if ($window.width() < 768) {
$nogonder.on("click",function(){
$("#parallaxPopup").modal('show');
})
}else{
$nogonder.off("click");
$("#parallaxPopup").modal('hide');
$("#rezervasyonPopup").modal('hide');
$("#popupCheckin").modal('hide');
};
});
I'm trying to give an alert to the user once the window().width() is smaller then 950px. My JS looks like:
$(document).ready(function() {
function checkWidth() {
var windowSize = $(window).width();
if (windowSize < 950) {
alert("test");
console.log("screen width is less than 950px");
}
}
// Execute on load
checkWidth();
// Bind event listener
$(window).resize(checkWidth);
});
But nothing happens, not even my console.log().
Any suggestions? Thanks!
You have a UTF-8 BOM Character at the end of the code, that keeps it from working. Copy this code, which is exactly same as yours but free from the character. Make sure you are using a good editor like Sublime Text 2.
$(document).ready(function() {
function checkWidth() {
var windowSize = $(window).width();
if (windowSize < 950) {
alert("test");
console.log("screen width is less than 950px");
}
}
// Execute on load
checkWidth();
// Bind event listener
$(window).resize(checkWidth);
});
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.
}
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