I have a fiddle here:
http://jsfiddle.net/fJMe9/
window.onresize = function (e) {
console.log("Page resized");
};
And every time I resize the window I get two logs to the console
It's a well known bug (perhaps relating to event bubbling? I say well known, but that's other people who know it, not me :P ). Use a setTimeout to check the last time the window was resized to avoid this.
Try:
window.onresize = function (e) {
console.log(e);
};
you'll see the event fires every time you drag the browser window
Depends on implementation: maybe 2 times, the first for tell you the window is being resized and the second for windows finished resizing.
Related
I have two event handlers defined:
window.onresize = repositionElements;
scrollElement.onscroll = handleScrollBusiness;
Now, when I resize the window, I do not want my onscroll event to fire (which it ususally does during resizing). So I thought I temporarily set some isResizing variable to true and only set it back to false after a timeout. In the onscroll function I would then first of all check, if isResizing is false and only then proceed.
However, now during testing this, I realized that when I start to resize the window, it both fires a scroll and resize event, but it fires the onscroll event first, so my onresize has no chance to disable the scroll function, since it only gets fired after the scroll function has started to execute.
Is there any way around this? Can I globally change the order of these two events? If not, what other way would there to disable the onscroll event immediately once I start resizing?
I am looking for an answer in vanilla JavaScript. Also I am new to this, so if I have some logical flaws in my way to approach this, please let me know.
Thank you!
Since you haven't posted an example code of your problem, I'm not sure if what I'm about to write helps you or not.
You could try to defer the execution of onscroll handler by wrapping it's code inside a zero-length timeout, which effectively moves the execution of that piece of code to the end of current execution stack.
Here's an example:
window.onscroll = function () {
setTimeout(function () {
// your code here...
}, 0);
}
window.onresize = function () {
// your code here...
// should be executed before onscroll handler
}
You can use RxJs Observable for this:
var resizeOb$ = Rx.Observable.fromEvent(window, 'resize');
var scrolOb$ = Rx.Observable.fromEvent(window, 'scroll')
.takeUntil(resizeOb$);
scrolOb$.subscribe(function(event){
/* handle scroll event here */
});
resizeOb$.subscribe(function(event){
/* handle resize event here */
});
This will efficiently handle the situation for you.
I want javascript/Jquery to execute a piece of code once the window is being resized. Is there any way to do this? I believe I read something like $(window).change (I could have written that so wrong but I'm learning) Though it misses any indicator that tells it when the window size changes.
Thanks in advance!!
Your can use .resize() function.
Bind an event handler to the "resize" JavaScript event, or trigger
that event on an element.
Use it like this:
$(document).ready(function(){
$( window ).resize(function() {
console.log("Fired!");
});
})
You can listen for the window.resize() function :
$(function(){
$(window).resize(function(){
// Your window was resized, do something here
});
});
It's worth noting that this will be fired for any minor change, so if you are expecting it to occur frequently, you may want to employ an approach similar to this related discussion that uses a delay to detect when the resize has completed and then it will fire the event.
This question relates closely to the stack overflow question "window.resize event firing in Internet Explorer".
The Issue:
I am attempting to fix a resizing issue in Internet Explorer 8. Currently, the resize function gets called repeatedly causing IE to essentially lock up - the user can no longer use buttons that call Javascript actions.
Previous Attempt(s):
var resizeTimeout;
var resizeHandler = function() {
clearTimeout(resizeTimeout);
//$(window).unbind('resize', resizeHandler);
//window.removeEventListener('resize');
window.removeEventListener('resize', resizeHandler, false);
scrollHandler();
setTimeout("$(window).resize(resizeHandler);", 100);
return true;
}
//$(window).resize(resizeHandler);
window.addEventListener('resize', resizeHandler, false);
Problems: It appears that window cannot implement addEventListener or removeEventListener and unbinding jQuery doesn't stop IE from continuing to freak out. It works fine in all other browsers.
Desired Behavior: The goal here is really to get IE to stop repetitively executing code so other functions like onclick events work.
Does anyone know how I can remove the resize event after it's been added or simply make IE stop being retarded. (<-- Extra points if you can make IE not be retarded.)
Resolution: Inside of the scrollHandler function a variable was not declared using the var prefix. Adding var made all the evil fairies go away.
I think you're going about this the wrong way. What you should be doing is using that timeout to block the invocation of "scrollHandler()" until the window resizing activity has paused for a little while (like the 100ms delay you're using).
var resizeTimeout;
function resizeHandler() {
cancelTimeout(resizeTimeout);
resizeTimeout = setTimeout(scrollHandler, 100);
}
$(window).resize(resizeHandler);
Trying to do DOM updates (which I assume to be what goes on inside "scrollHandler") in a "resize" handler is really not a good idea in any browser. By doing that, you won't need to get rid of the "resize" handler at all.
edit — OK now I see that that's effectively what you were trying to do. I still think it's a lot simpler this way.
I have a problem with Firefox scrollTop value and onscroll event. This works great in IE, Safari and Chrome but Firefox seems to lag.
I tried to update some background position with the onscroll event, but when I take the handle and drag it up and down quickly, Firefox stops updating the scrollTop value and it causes some lag in my app.
You can try this code and look in the Firefox console when dragging the handle and you will see the values something stops the updating :
function SaveScrollLocation () {
console.log(document.documentElement.scrollTop);
}
window.onscroll=SaveScrollLocation ;
Any idea how to make Firefox respond more quickly?
There are two ways to handle this - throttle (execute the function with a set interval) and debounce (execute the function after the specified time has passed since the last call). You'll probably want to use throttling in your situation.
A simplified solution may look something like this (Updated: see it at http://jsfiddle.net/yVVNU/1/):
window.onscroll=catchScroll;
var timeOutId = 0;
var jitterBuffer = 200;
function catchScroll()
{
if (timeOutId) clearTimeout (timeOutId);
timeOutId = setTimeout(function(){SaveScrollLocation()}, jitterBuffer);
}
function SaveScrollLocation () {
console.log(document.documentElement.scrollTop);
alert('scrolled');
}
You can also use this jQuery plugin: http://benalman.com/projects/jquery-throttle-debounce-plugin/
$(window).scrollTop() worked for me
Wouldn't the behavior of dragging the window up and down quickly be considered abnormal?
In my view, I wouldn't want to be saving the state if the user is doing that. I'd rather wait until the window has been in the same spot for at least 250ms before recording it's position. The minor variances in position while the user is slamming the scrollbar up and down are probably not very important to the user, know what I mean?
With a little setTimeout magic, couldn't you sidestep this issue AND make your script a little lighter on the browser UI by not firing the SaveScrollLocation until it clear the scroll location is WORTH saving?
Firefox does not (or did not used to) fire the onscroll event as frequently as the other browsers. see here
Interestingly the scrollTop does update at the correct frequency so you can probably use another event such as mousemove. What i did was something like this :
on first scroll event, start listening to mouse move events - update whatever it is you want to based on the scrollTop which does update correctly. After a short timeout has elapsed after an onscroll, stop listening for mouse move events.
var last = +new Date;
function SaveScrollLocation () {
var now = +new Date;
if (now - last > 50) {
// ...
last = now;
}
}
window.onscroll = SaveScrollLocation ;
I'm writing a Firefox extension. I'd like to have my code executed whenever a new tab opens.
I've tried this:
for (var i=0; i<Application.windows.length; i++) {
var w = Application.windows[i];
w.events.addListener("TabOpen", function(event){
alert( 'tab #'+w.activeTab.index +' opened');
});
}
It doesn't work right if windows.length > 1. For example, we have two windows. I open new tab and event fires 2 times, for every window. I wanna only one event call for current window.
Without FUEL: https://developer.mozilla.org/en/Code_snippets/Tabbed_browser#Notification_when_a_tab_is_added_or_removed. I like that better than using Application.activeWindow, since from looking at the code there's no guarantee activeWindow always refers to the same window that your code is executing in. (If they are different, you'll end up with weird hard to reproduce problems).
The reason your original code didn't work was that you're presumably putting your code in a script for an overlay to the main browser window. Such code is executed in every instance of the browser window the user opens. So when you open the second window, the loop executed again and added a second listener for the 1st window and the first (only) listener to the 2nd window.
Answer to my own question:
window.addEventListener('load', function(){
var w = Application.activeWindow;
w.events.addListener("TabOpen", function(event){
alert( 'tab #'+w.activeTab.index +' opened');
});
}, false);
no way i didnt that works i akways attached it to gbrowser, this is how i do it:
https://gist.github.com/Noitidart/8673632
where i attach domContentLoad i also attach TabOpen