Fire jQuery script onLoad and window resize - javascript

Here is where I'm at:
onResize = (function($) {
//Do stuff
});
$(document).ready(onResize);
$(window).bind('resize', onResize);
The script calculates the width of it's containing div and then lays out a gallery accordingly. It runs onload correctly (no matter the window width ) but doesn't seem to fire on resize. The issue? Creates layout problems with my media Queries.

Your code runs correctly in Chrome.

Justin W Hall, I tried this in my chrome console:
onResize = (function($) { console.log('resized') });
console.log('resized')
});
$(document).ready(onResize);
$(window).resize(onResize);
and it worked just fine.
ps. If you run this code, you'll notice that onResize function fires two times (showing 2 'resized' messages) when you resize the window.

Related

How to call javascript function before the page is fully loaded

I want to zoom out to 85 % before the page is fully loaded. Now the code has a problem that the zoom only works if the page is fully loaded.
I try to put it to the head of html, but it doenst works.
Can you help me?
Here is my code:
window.onload = function zoom(){ document.body.style.zoom = "85%" }
Place this just after the opening body tag.
<script>
document.body.style.zoom = "85%";
</script>
Without the code being wrapped in a function that is a callback to the window.onload event, it will execute as soon as it is encountered.
You can use DOMContentLoaded event. It is fired when the document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.
For example
document.addEventListener('DOMContentLoaded', () => {});
Thanks very much. It works but somehow I have to wait until the page is fully load, then I can see that it zoom out to 85 %. So the picture looks like it jumping.
document.addEventListener('DOMContentLoaded', () => {});

How can I resize the iframe without page refresh?

I have some swf embedded in iframe but only if the page is refreshed the iframe is resized, then if I select other one then will show as all swf not only the animation the background as well. This is what I am using
if ( 'resizeIframe' === $('#onPlayAction').val() ) {
var ifrEl = $('div.player-container iframe.page-iframe')[0];
$(ifrEl).show();
ifrEl.src = htmlPageBrowserUri;
ifrEl.onload = function() {
ifrEl.width = ifrEl.contentWindow.document.body.scrollWidth;
ifrEl.height = ifrEl.contentWindow.document.body.scrollHeight;
}
}
There are three ways to do this.
You can change the size on every window resize
$(window).on('resize', function (){
ifrEl.width = ... ;
ifrEl.height = ... ;
})
You can use some jQuery plugins like iFrame Resizer
You can use some nifty css tricks. Go search for responsive iframes using css and you will find a ton of good answers.
I hope this all helps you.
I suspect the issue with your code might be thses two lines :
ifrEl.src = htmlPageBrowserUri;
ifrEl.onload = function() {
The problem being that the first line set s the frame address, but second line sets the onload event immediately, probably before the page has loaded ? So when the page does load, the line setting onload event has already run & so doens't get set.
I don't quite understand the text in your question (sorry!) but the code below successfully resizes an iframe - it's run 'onload' in the frame's page:
<body onload="setParent()">
In case it's relevant, the iframe itself has attributes:
<iframe id="neckfinishframe" style="width:100%;overflow-x:hidden" src=".. etc">
In my case I'm only concerned about height. Width is 100%.
In the iFrame page, this code runs from the onload event to amend the iframe height to be whatever the height of the page is, plus a bit. This is intended to avoid showing a set of scroll bars within the iframe.
function setParent() {
// runs onload in iframe page
// in my case I have to run it from the frame page because I need to know the page rendered height in order to set the iframe height
var f;
try {f = parent.getElementById("neckfinishframe")} catch (e) {};
if (f != null) f.style.height=(this.document.body.scrollHeight+30)+"px";
}
Note - I haven't tried this cross- browser but I know it works in IE.

window.content.mozInnerScreenY value is not working in Firefox 33.1

I am writing a Mozilla extension to calculate the Y Screen off-set by using this "window.content.mozInnerScreenY" API. After upgrading firefox to 33.1 version I am not able to view Mozilla in a maximized window, though selecting to view in Maximized window it gets back to smaller window size. Just to double check i commented this line of code in extension's logic ,then window sizing works good.
Why the above value is not working for me. kindly help me to troubleshoot this issue.
code is as bellow:
**var appcontent = document.getElementById("appcontent");
var myExtension = {
init: function() {
// The event can be DOMContentLoaded, pageshow, pagehide, load or unload.
if(appcontent)
{
appcontent.addEventListener("resize", this.onmyPageResize, false);
}
},
onmyPageResize: function(aEvent) {
screenY= window.content.mozInnerScreenY;
//Process screenY
}
}
window.addEventListener("load", function load(event){
window.removeEventListener("load", load, false); //remove listener, no longer needed
myExtension.init();
},false);**
This change worked for me.
i made a very minor change in the above code :
const screenY = window.content.mozInnerScreenY.
i just changed screenY as const type since window.content.mozInnerScreenY is a read-only value.
This change fix the issue.

Can it be determined if window.resizeTo will work?

Inside the Javascript console, if I execute:
m = window.open(location.origin);
m.resizeTo(400, 400);
The window will resize, but if I just execute:
window.resizeTo(400, 400);
then nothing happens. I understand the reason for this behavior. How can I detect situations where window.resizeTo will do nothing?
Approach 1:
You can use the window.opener property. If it's null, then you did not open that window and thus cannot resize it.
window.parent is intended more for iframes and the like.
Such as:
if (m.opener) {
m.resizeTo(400, 400);
} else {
// You did not create the window, and will not be able to resize it.
}
Approach 2:
ajp15243 brings up a good point, so one thing you could do is listen to the resize event and see if your resizeTo worked:
var resizeFired = false;
...
var triggeredResize = function() {
resizeFired = true;
m.removeEventListener('resize', triggeredResize);
}
m.addEventListener('resize', triggeredResize, true);
m.resizeTo(400, 400);
if (resizeFired) {
// Your resize worked.
}
I haven't been able to fully test this, but it's one potential approach nonetheless. For IE8 and below you may need to use attachEvent instead. Also as #Wesabi noted, the resize may fire for other events (and may fire if the user is resizing the window as the listener as attached), so it's best to execute this is the shortest time span possible.
Approach 3:
Another approach would be to call m.resizeTo(400, 400) and then check the window size to see if the current size is equal to what you set it to:
m.resizeTo(400, 400);
if (w.outerWidth != 400 && w.outerHeight != 400) {
// Your resize didn't work
}
The easiest thing to do would be checking if the window has a parent. if !window.parent, it means it's the main window which cannot be resized with JS, else you have your resize case.
Edit: Igor posted it before I found it: you want m.opener() not window.parent
MDN is a great JavaScript resource: https://developer.mozilla.org/en-US/docs/Web/API/Window.resizeTo
Since Firefox 7, it's no longer possible for a web site to change the default size of a window in a browser, according to the following rules:
You can't resize a window or tab that wasn’t created by window.open.
You can't resize a window or tab when it’s in a window with more than one tab.
SO, you need to detect if you are a child window:
https://developer.mozilla.org/en-US/docs/Web/API/Window.opener
if (window.opener) {
console.log('I can be resized');
} else {
console.log('I cannot be resized');
}

Why does IE8 hangs on jquery window.resize event?

I discovered a problem that seems to reproduce always when opening a piece of html and javascript in IE8.
<html>
<body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(window).resize(function() {
console.log('Handler for .resize() called');
});
});
</script>
<div id="log">
</div>
</body>
</html>
Loading this file in IE8 and opening Developer Tools will show that the log message is printed continuously after one resize of the browser window.
Does anyone has an idea why? This is not happening in IE7 or IE9, nor in other browsers (or at least their latest versions).
UPDATE
One solution to prevent the continuos trigger of resize() is to add handler on document.body.onresize if the browser is IE8.
var ieVersion = getInternetExplorerVersion();
if (ieVersion == 8) {
document.body.onresize = function () {
};
}
else {
$(window).resize(function () {
});
}
But this does not answer my question: is the continuous firing of resize() a bug in IE8?
If "show window contents while dragging" is switched on, you will be inundated with resize events. I guess you're testing IE8 on a separate Windows machine which has this effect enabled (Display Properties -> Appearance -> Effects...).
To counteract this, you can wrap & trap the resize events to tame them: http://paulirish.com/demo/resize
This article says Chrome, Safari & Opera suffer from this too.
I only see the issue you are describing if an element on the page is resized (as described in this question). Your example doesn't work for me, but I assume for you it is appending the console message in the log div that you have there, which means that it is resizing the div and triggering the window resize event.
The answer that Lee gave is correct, but the method in the link didn't work for me. Here's what I did:
var handleResize = function(){
$(window).one("resize", function() {
console.log('Handler for .resize() called');
setTimeout("handleResize()",100);
});
}
handleResize();
This way, the handler is unbound as soon as it fires, and is only re-bound after you've finished all your actions that might re-trigger a page resize. I threw in a setTimeout to provide additional throttling. Increase the value in case your scripts need more time.

Categories

Resources