jQuery resize event not firing - javascript

For whatever reason the following:
$(function() {
$(window).resize(function() {
alert("resized!");
});
});
only fires an event when the page is loaded. Resizing the browser window does nothing in both Safari and Firefox. I have not tried it on any other browsers.
Any ideas or workaround?

I think your alert is causing a problem try this instead
$(window).resize(function() {
$('body').prepend('<div>' + $(window).width() + '</div>');
});
jsfiddle

it is best to avoid attaching to events that could potentially generate lots of triggering such as the window resize and body scroll, a better approach that flooding from those events is to use a timer and verify if the even has occurred, then execute the proper action, something like this:
$(function() {
var $window = $(window);
var width = $window.width();
var height = $window.height();
setInterval(function () {
if ((width != $window.width()) || (height != $window.height())) {
width = $window.width();
height = $window.height();
alert("resized!");
}
}, 300);
});
another advantage doing it using timer is you have full control of how often to check, which allows you flexibility if you have to consider any additional functionality in the page

works in any browser:
http://jsbin.com/uyovu3/edit#preview
$(window).resize(function() {
$('body').prepend('<div>' + $(window).width() + '</div>');
});

5 years later...
The only browser I have this problem with, is Chrome; I don't have Safari.
The pattern I noticed is that it works when I inline the code:
<script type="text/javascript">
$(window).resize(function(e) { console.log("resize inline", +new Date()) });
</script>
but not when I put it in a separate Javascript file that I load with:
<script type="text/javascript" src="/js/resized.js"></script>
where the script contains
console.log('script loaded');
$(window).resize(function(e) { console.log("resize in script file", +new Date()) });
I can only guess this is some kind of "protection" built in by the Chrome development team, but it is silly and annoying. At least they could have let me bypass this using some "same domain policy".
Update for a while I thought using $(document).ready() fixed it, but apparently I was wrong.

try
$(document).resize(function(){ ... };);
I think its the document that fires the resize consistently across browsers. But I'm not at work now to check what I usually do.

Try this code.
window.addEventListener("resize", function(){
console.log('yeap worked for me!');
})

Standart
$(window).bind("resize",function(){
console.log(window.innerWidth);
})
For Wordpress
jQuery(window).bind("resize",function(){
console.log(window.innerWidth);
})

I was with the same problem, saw all kind of solutions and didn't work.
Making some tests I noticed that the $(window).resize, at least in my case, would only trigger with $(document).ready() before it. Not $(function()); nor $(window).ready();
So my code now is:
$(document).ready(function(){
$(window).resize(function(){
// refresh variables
// Apply variables again
});
});
...and even an alert work!

Related

Something blocks addEventListener(type, handler) to work in DOM

I'm learning Vanilla JS and DOM, and I'm testing some codes in console. I have a question.
Step 1) Navigate to website "http://rehub.wpsoul.com" in chrome.
Step 2) Open a console.
Step 3) Write down below code in console.
var neww = window.open('/')
neww.addEventListener('click', function() {
alert('hi');
})
This code is not working. However, if I change the event type from 'click' to 'scroll', it does work well.
What makes it hinder to work in DOM?
Whenever I tested this code, some websites does not work event type, 'load' like this website.
I've had a headache for this for a few days. I would like to know the reason and principle of DOM and JS.
I need your help, thanks! :)
As you are opening a new window and its DOM is not yet available or ready, the event is not getting bind. Please try following code:
var neww = window.open('/')
neww.addEventListener('load', function() {
neww.document.body.addEventListener('click', function() {
alert('hi');
});
});

javascript doesn't run in IE8/9 but does when viewing console

I have a script that works fine in everything but IE8/9. The weird thing is, when I open the developer tools and console in IE to deb, and then refresh the page as it says to, the script runs fine. What am I missing? Any idea what IE doesn't like about this script?
One other note - the script doesn't load until the window loads as I need to measure the height of images, so maybe that is part of the problem?
Thanks for any help
$(window).load(function(){
function offsetElement(element, container){
if ( $(window).width() > 767 ) {
$(element).each(function(index,value){
var snapImage = $(this),
snapImageHeight = snapImage.height(),
containerHeight = snapImage.closest(container).outerHeight(),
topOffset = (containerHeight - snapImageHeight) / 2;
$(this).css({ 'top' : topOffset });
});
}
}
offsetElement('.snapshot', '.event');
offsetElement('.dot', '.event');
function activeSnap(){ return offsetElement('.snapshot', '.event'); }
function activeDot(){ return offsetElement('.dot', '.event'); }
$(window).resize(function(){
activeSnap();
activeDot();
});
});
$(window).load() should be using the built in onload function so that shouldn't be the problem. It could be your jQuery version, jQuery 2.X does not support Internet Explorer 6, 7, or 8. Make sure you're using jQuery 1.X for compatibility
Use $(document).ready() instead of $(window).load().
which over of jQuery are you using? have you try using window.onload
see if IE works with it? – jasonslyvia 35 mins ago
Thanks #jasonslyvia, all I did was replace $(window).load for window.onload and it works fine now.

How to reload document by resizing?

Why this code doesn't work:
$(window).resize(function() {
document.location.reload();
});
Try the following code:
$(window).bind('resize',function(){
window.location.href = window.location.href;
});
Reference:
http://forum.jquery.com/topic/anyone-know-how-to-refresh-reload-page-on-browser-resize
The resize event fires many times (depending on the browser) as you resize...there's probably a much better way to solve your problem (at least, I can't imagine that constantly reloading the page would be an optimal solution...).
For example if you're doing this to get your $(document).ready() code to run again? In that case for example you can use a named function. For example:
function myFunc() {
//do stuff
}
$(myFunc); //run on DOM ready
$(window).resize(myFunc); //run when resizing

$(window).load(function()-how it works with FF

I have a jquery code.
$(window).load(function() {
document.title = $("#myid").text(); //not working in FF
});
Here I have used $(window).load(function() because in the #myid I am getting value through another javascript, if I use ready(), its giving me error. so I am first loading the window then start reading value.
Now in IE, after the window loads itself , I am getting the value of document.title,
but for FF its coming as blank.undefined.
Why? any idea or alternate sln.
It might be a rendering/timing issue.
How are you setting the #myid text? Im assuming you are running this code on page load?
Personaly on another note, i like to use the shorthand version of jQuery DOM ready, this might also fix your problem too.
jQuery(function(){
document.title = jQuery("#myid").text();
});
And i would make sure that you call it at the end of the body or ideally in the head tag.
I think it is possible that firefox triggers ready and load at the same time when it loads quickly (localhost, small experiment page with one div, etc.)
Why not put the title setting in the ready function right after getting it? If You put it in a div, You can put it in the title too.
I didn't check this code and it isn't a good way, but maybe it help you...
If your code isn't working in Firefox only, you can check browser by Javascript and execute my code for Firefox only.
<script type="text/javascript">
var timerId = 0;
function checkElement() {
// If don't work: try .html() or $("#myid").text() != undefined or smth like this
if($("#myid").text()) {
document.title = $("#myid").text();
clearInterval(timerId);
}
}
$(document).ready(function() {
timerId = setInterval('checkElement()', 500);
});
</script>

jQuery iframe scroll event (IE)

Can't listen to the scroll event in Internet Explorer 7.
I've tried:
$("#myIframe").scroll(function() { alert('hi'); })
Works for FF:
$($("#myIframe").contents().get(0)).scroll(function() { alert('hi'); })
Getting keypresses work:
$($("#myIframe").contents().get(0)).keydown(function() { alert('hi'); })
As much as I love jQuery. I can't get this to work. However, I tried this in plain old javascript and it worked just fine in IE, FF,Safari and Chrome.
<script type="text/javascript">
window.onload = function() {
var frm = document.getElementById("myIframe").contentWindow;
frm.onscroll = function(){
alert("EUREKA");
}
}
</script>
EDIT: The following works in FF, Safari and Chrome when using window.load(). When using document.ready it only works in FF. For whatever reason it doesn't work in IE8 in either event.
$(window).load(function(){
$($('#myIframe').contents()).scroll(function(){
alert('frame scrolled in jquery');
});
});
I know it's an old thread, but some people could find it useful.
$(document).scroll() can be replaced by $(window).scroll(), and it has worked for me so far.
Try this:
2 things must happen before you can traverse the dom of a nested browsing context.
You need to know that the iframe exists, taken care of with the document ready event.
And you need to make sure that the iframe has loaded.
ie:
$(document).ready(function(){
// #page is the id of the iframe
$('#page').load(function(){
// $(this)[0].contentWindow is the window of your nested browsing context/ iframe
$($(this)[0].contentWindow).scroll(function(){
console.log($(this).scrollTop());
});
});
});
One thing to note is that this will definitely not work cross browser in Firefox.
Put this on the parent:
var childScrollHandler = function () {
alert('Scrolling going on');
}
And then put this on the iframe content:
$(document).bind('scroll', function(ev){
parent.childScrollHandler(ev);
});
replace $(document) by whatever element you are trying to listen into.

Categories