I already looked for the .resize() jquery function but the jquery .resize() only triggers when the window is being resized, what i wanted was a trigger that shoots when the width changes for example, instead of changing the browser width the user clicks in the button to maximize and the function fails to trigger, i have a function that fires a function on resize(), is there any function that is like on("windowwidthchanges") ?
You can detect both events and just execute code when it's a width change:
var width = $(window).width();
$(window).resize(function(){
if($(this).width() != width){
width = $(this).width();
console.log(width);
}
});
I've checked Chrome, Firefox and IE11. All 3 browsers trigger the alert when the maximize button is clicked.
$(window).resize(function(){ alert("resized"); });
What, specifically, are you trying to do that this doesn't work for you?
You can move the code to a named function and call it on resize and when clicking the button.
Or, you can trigger the resize when clicking the button:
$("button").on("click", function(){
$(window).trigger("resize");
});
Examples: http://jsfiddle.net/cde7fwrb/
EDIT: I see you were talking about the browser maximise button. Oh well....
Related
I am trying to trigger an event in a web browser on a desktop
$(window).trigger('resize');
The issue is on mobile it doesn't seem to be triggering. Is there an alternative method for mobile?
I am using tablesaw plugin for grids. When the screen is small in size, the columns will not fit and as such a swipe will be provided to move between them. When I sort them, all the columns gets squeezed and shown on the small screen, but after I trigger the resize event, an event in the plugin will get called that will fix them. On the mobile, this event doesn't exist I guess and I'm not targeting the orientation.
a variation of this (JavaScript/JQuery: $(window).resize how to fire AFTER the resize is completed?)
this will run on resize and orientchange.
var waitForFinalEvent=function(){var b={};return function(c,d,a){a||(a="THISPAGE");b[a]&&clearTimeout(b[a]);b[a]=setTimeout(c,d)}}();
var fullDateString = new Date();
$(document).ready(function(){
$.resized = function(){
waitForFinalEvent(function(){
//function to run
}, 300, fullDateString.getTime())
}
window.addEventListener("orientationchange", function() {
$.resized();
});
$(window).resize(function () {
$.resized();
});
$.resized();
});
window.dispatchEvent(new Event('resize'));
I'm using Bootstrap 3 and creating an if statement with JQuery to make my navbar collapse when anything on the body is clicked, but only when the browser width is less than 992px. When the browser is 992px or wider, I want this function to be ignored. My function below is working as expected, except for the fact that "test" gets logged to the console when the body is clicked on all browser widths when it should only do so when it is less than 992px. Is something wrong with my if statement below?
if ($(window).width() < 992) {
$('body').click(function() {
console.log("test");
$('.navbar-collapse').collapse('hide');
});
};
I updated my code to have the if statement inside of the function, as seen below. It still functions properly and only logs "test" to the console on the correct browser width, but I'm wondering if this is a bad way to do it as the browser will be checking its width on every click even when I don't want it to. Is that a bad way of doing things? Is it better practice to try to get the first code I posted to work?
$('body').click(function() {
if ($(window).width() < 992) {
console.log("test");
$('.navbar-collapse').collapse('hide');
};
});
The second method is the way to go. The first one will only bind the click event if the width is less than 992 when that block of code initially executes.
What if the user resizes the browser after the initial decision to bind/not bind has been made? That's why you need to check the width on every click.
If you bind your click event handler using .bind(), you can use the .resize() event to only have the handler bound when the screen is under your desired width. The .unbind() function does the job. For example:
var collapseNavbar = function() {
console.log("test");//remove when done with testing
$('.navbar-collapse').collapse('hide');
}
$(window).resize(function() {
if($(window).width() < 992) {
$('body').bind('click',collapseNavbar);
} else {
$('body').unbind('click',collapseNavbar);
}
});
This way the check for window width is only done while/after resizing, and not on every click.
The bound function can be named as you wish, just make sure it is indeed named so unbinding can work properly. As the documentation says:
By naming the handler, we can be assured that no other functions are accidentally removed.
I'm not sure if the resize event is raised when the page is loaded, though. You might need to add a little snippet to ensure the behavior is present for a browser window which starts at a width lower than 992px (i.e. if you refreshed the page after resizing, or if you're viewing it on a smartphone). Something like this should do it:
$(document).ready(function() {
if($(window).width() < 992) {
$('body').bind('click',collapseNavbar);
}
});
I am using one click function() to render some chart on my project.
The code is as below
$('.abc').click(function() {
checkGraph();
});
But when i resize the window then this click event is not firing. Means my chart us not getting rendered.
I tried some of the things as below but none worked
Approach 1
$(document).on('click','.abc',function(){
checkGraph();
});
Approach 2
var crclick = (function(){
$('.abc').click(function() {
checkGraph();
});
});
crclick();
$(window).resize(function(){
console.log("Window resized New");
crclick();
});
In approach 2, i am getting console output but click function is not working.
The resize and click events are separate. If you want both to call checkGraph, bind them individually to call checkGraph(). If you were binging to events to the same element you could do it in once call.
$('.abc').click(function() {
checkGraph();
});
$(window).resize(function(){
checkGraph();
});
I wouldn't do the .trigger method mentioned in other answers, it's not very clear code, with potential other consequences.
Why would click fire on a resize? You are only assigning the handler.
Later you can click it using $(".abc").click(); or $(".abc").trigger("click");
Be aware you likely want to only click AFTER a resize
https://stackoverflow.com/a/15170104/295783
use on window resize. You are just binding the click on resize.
$(window).resize(function(){
checkGraph();
});
I'm trying to execute a javascript function ONLY if the width is bigger than 1200pixels.
The code I need to execute works, but the check for the screen size doesn't:
window.addEventListener("resize", function(){
if (document.documentElement.clientWidth > 1203) {
<<<some other code that's working>>>
}
}, true);
All this code is in a javascript file outside the document.ready function.
EDIT: When you drag your screen window around, it isn't working like normal css queries. This is the problem. It works if you refresh your page, but if you change the width of your browser, then it doesn't adjust, it needs the reload right now.
That's my issue.
You need to add an else clause to get the behaviour you want. Otherwise the resize event will only work going one way, as you described.
window.addEventListener("resize", function(){
// fire when above 1203
if (document.documentElement.clientWidth > 1203) {
console.log('Greater!');
}
// fire when below 1203
else {
console.log('Smaller!');
}
}, true);
Here's a link to the fixed jsfiddle that planet260 wrote: http://jsfiddle.net/4dnemh2j/4/
Here's my example again: https://jsfiddle.net/9n5hmpua
The problem is the true you're passing to addEventListener.
See the useCapture section here: EventTarget.addEventListener
Events which are bubbling upward through the tree will not trigger a listener designated to use capture
So you want:
window.addEventListener("resize", function(){
if (document.documentElement.clientWidth > 1203) {
<<<some other code that's working>>>
}
}, false); <----change here
You can use jQuery to achieve this
$( window ).resize(function() {
console.log($( window ).width());
var windowwidth = $( window ).width();
if (windowwidth > 500) {
console.log("Greater than 500");
/*Do your work here*/
}
});
I have a little code snippet here:
$(window).resize(function() {
if ($(window).width() <= 768) {
$('.menu-item-810').click(function () {
$('.squares').slideDown(2000);
});
}
});
That says when the browsers window width is less than or equal to 768px, when you click on the element that has a class of .menu-item-810, slideDown the .squares element.
That is what I want, and it does work.. but only 99.8% correctly.
When the screen width is larger than 768px, the .squares element has a different jQuery effect, it fades in and out, instead of sliding. I needed it to slideDown instead, when in tablet/mobile view, so I wrote the above snippet.
Like I said, it all works, but say I've opened any browser, resized it to 768px or less width, browsed to the site and then click on .menu-item-810. Nothing happens. It's only when I then manually resize the browser again, by any amount, that the jQuery fires. So if I've just resized the browser again, and then click .menu-item-810, the .squares element slides down like expected, but only if I manually resize the browser. I thought that the jQuery would be listening from the start if I wrapped that snippet in $(document).ready() but that doesn't work either, it just has the same behavior as without.
Anyhoo, any help is as always massively appreciated. Hopefully I'm just missing something simple.
Thanks guys!
Actually, this makes no sense? The resize event handler fires thousands of times when the window is resized, and binding a click event handler inside the resize handler will get you thousands of click handlers.
Attach one single click handler, and check the windows width inside it
$('.menu-item-810').click(function () {
if ($(window).width() < 768) {
$('.squares').slideDown(2000);
}
});
Once your javascript has loaded, it needs a resize event to fire in order to trigger your code. - it doesn't know if the window has been resized prior to the handler being initialised.
Put the same snippet in your document.ready() function to do an initial check for window size:
$(document).ready(function() {
if ($(window).width() < 768) {
$('.menu-item-810').click(function () {
$('.squares').slideDown(2000);
});
}
});
In the order of your code, it is first checking the window size, and only then, if it is small, adds your event handler.
It sounds like what you want is to always call the event handler, and then change the action depending on the side.
$(window).resize(function() {
$('.menu-item-810').click(function () {
if ($(window).width() <= 768) {
$('.squares').slideDown(2000);
}
});
});
Actually, now that i think some more, you don't even need to set the handler upon resize. Just set it on document load, and check the size when it gets clicked.
$(document).ready(function() {
$('.menu-item-810').click(function () {
if ($(window).width() <= 768) {
$('.squares').slideDown(2000);
}
});
});