Develop Reference

jQuery function on window events (load and resize)

I'm not sure how to use the order of the window events load and resize on jQuery to make it work when resizing. The first function is used to get the total width except the scrollbar width, because the CSS is using the device width, but the JS is using the document width.
The second function adds a style when the total screen width is between 768px and 1024px, and it should work when I load the page at any screen, after resizing, etc. I'm doing a lot of tests and I think the problem is about the window events order.
For being more specific about the problems, it doesn't remove the style when I load the page at 900px and I expand it to > 1024px! Or by the contrary, it doesn't add the style when I load the page at 1300px and I shorten the width to 900px.
I think it's 'cause of the load and resize events order, but I'm not totally sure. Or maybe I'm not doing the correct declaration of the variable into the resize.
The code:
function viewport() {
var e = window, a = 'inner';
if (!('innerWidth' in window )) {
a = 'client';
e = document.documentElement || document.body;
}
return { width : e[ a+'Width' ] , height : e[ a+'Height' ] };
}
$(document).ready(function(){
var vpwidth=$(window).width();
$(window).on('resize', function(){
var changeWidth = (($('.main-content .wrap').width() * 96.3)/100) - 312;
if(vpwidth >= 768 && vpwidth <= 1024) {
$('.contentleft, .contentright').css('width', changeWidth + 'px');
} else {
$('.contentleft, .contentright').removeAttr('style');
}
}).resize();
});

I believe the issue is that you're not re-calculating the vpwidth on resize, So the value you got when the page was loaded will be used every time window is resized.
try
$(document).ready(function(){
$(window).on('resize', function(){
var vpwidth=$(window).width(); // get the new value after resize
var changeWidth = (($('.main-content .wrap').width() * 96.3)/100) - 312;
if(vpwidth >= 768 && vpwidth <= 1024) {
$('.contentleft, .contentright').css('width', changeWidth + 'px');
} else {
$('.contentleft, .contentright').removeAttr('style');
}
}).resize();
});

The issue is because you are not recalculating the width (vpwidth) on resize function.
It is initialized and set on page load itself and hence doesn't change when the window is resized causing the style to not be added or removed.
You need to re-assign the value to the variable from within the resize function.
$(window).on('resize', function(){
var vpwidth=$(window).width();
}
Demo Fiddle

Change li height on browser width resize

I made a little script to change the height of a group of li-elements to the one with the most content.
The code works fine, but it should also work by resizing the browser width.
I need to know why it doesn't reload by changing the browser width ?
Here is my Code :
//changes slider hight to the hight of the li with the most content
function heightChange() {
var max = -1;
$(".feedback li").each(function() {
var h = $(this).height();
max = h > max ? h : max;
});
$(".feedback li").css("height", max);
};
// start by open site
heightChange();
// load function by resizing of the browser window
$(window).bind("resize", function(){
heightChange();
});

You need to reset your height before setting it again. Demo
$(window).on("resize", function(){
$(".feedback li").css("height", "auto");
heightChange();
});
Otherwise will height() just return the specified value;
Also, .on() is the preferred way to bind and event, as of jQuery 1.7

Resize iframe to content with Jquery

I'm trying to resize an iframe dynamicly to fit its content. To do so I have a piece of code:
$("#IframeId").height($("#IframeId").contents().find("html").height());​
It doesnt work. Is it because of cross-domain issue? How do I get it to fit? Please take a look at Fiddle: JsFiddle
ps I have set the html and body of the link height:100%;

You just need to apply your code on the iframe load event, so the height is already known at that time, code follows:
$("#IframeId").load(function() {
$(this).height( $(this).contents().find("body").height() );
});
See working demo . This demo works on jsfiddle as I've set the iframe url to a url in the same domain as the jsfiddle result iframe, that is, the fiddle.jshell.net domain.
UPDATE:
#Youss:
It seems your page for a strange reason don't get the body height right, so try using the height of the main elements instead, like this:
$(document).ready(function() {
$("#IframeId").load(function() {
var h = $(this).contents().find("ul.jq-text").height();
h += $(this).contents().find("#form1").height();
$(this).height( h );
});
});

Not sure why #Nelson's solution wasn't working in Firefox 26 (Ubuntu), but the following Javascript-jQuery solution seems to work in Chromium and Firefox.
/**
* Called to resize a given iframe.
*
* #param frame The iframe to resize.
*/
function resize( frame ) {
var b = frame.contentWindow.document.body || frame.contentDocument.body,
cHeight = $(b).height();
if( frame.oHeight !== cHeight ) {
$(frame).height( 0 );
frame.style.height = 0;
$(frame).height( cHeight );
frame.style.height = cHeight + "px";
frame.oHeight = cHeight;
}
// Call again to check whether the content height has changed.
setTimeout( function() { resize( frame ); }, 250 );
}
/**
* Resizes all the iframe objects on the current page. This is called when
* the page is loaded. For some reason using jQuery to trigger on loading
* the iframe does not work in Firefox 26.
*/
window.onload = function() {
var frame,
frames = document.getElementsByTagName( 'iframe' ),
i = frames.length - 1;
while( i >= 0 ) {
frame = frames[i];
frame.onload = resize( frame );
i -= 1;
}
};
This continually resizes all iframes on a given page.
Tested with jQuery 1.10.2.
Using $('iframe').on( 'load', ... would only work intermittently. Note that the size must initially be set to 0 pixels in height if it is to shrink below the default iframe height in some browsers.

What you can do is the following:
Within the iFrame use document.parent.setHeight(myheight) to set the height within the iFrame to the parent. Which is allowed since it is a child control. Call a function from the parent.
Within the parent you make a function setHeight(iframeheight) which resizes the iFrame.
Also see:
How do I implement Cross Domain URL Access from an Iframe using Javascript?

Just do it on the HTML tag, works perfect
$("#iframe").load(function() {
$(this).height( $(this).contents().find("html").height() );
});

As the answer to the question use an already outdated jquery (load has been deprecated and replaced with .on('load',function(){}), below is the latest code for the answer in the question.
Note that I use the scrollHeight and scrollWidth, which I think will load much nicer than using Height and Width like the answer provided. It will totally fit, without scroll anymore.
$("#dreport_frame").on('load',function(){
var h = $('#dreport_frame').contents().find("body").prop('scrollHeight');
var w = $('#dreport_frame').contents().find("body").prop('scrollWidth');
$('#dreport_frame').height(h);
$('#dreport_frame').width(w);
})

Adjust height of an iframe, on load and resize, based on its body height.
var iFrameID = document.getElementById('iframe2');
var iframeWin = iFrameID.contentWindow;
var eventList = ["load", "resize"];
for(event of eventList) {
iframeWin.addEventListener(event, function(){
if(iFrameID) {
var h = iframeWin.document.body.offsetHeight + "px";
if(iFrameID.height == h) {
return false;
}
iFrameID.height = "";
iFrameID.height = iframeWin.document.body.offsetHeight + "px";
}
})
}

At end, I come with this cross-domain solution that work also for resize...
(resize not triggering : Auto resize iframe height when the height of the iframe contents change (same domain) )
Iframe :
(function() {
"use strict";
var oldIframeHeight = 0,
currentHeight = 0;
function doSize() {
currentHeight = document.body.offsetHeight || document.body.scrollHeight;
if (currentHeight !== oldIframeHeight) {
console.log('currentHeight', currentHeight);
window.parent.postMessage({height:currentHeight}, "*");
oldIframeHeight = currentHeight;
}
}
if (window.parent) {
//window.addEventListener('load', doSize);
//window.addEventListener('resize', doSize);
window.setInterval(doSize, 100); // Dispatch resize ! without bug
}
})();
Parent page :
window.addEventListener('message', event => {
if (event.origin.startsWith('https://mysite.fr') && event.data && event.data.height) {
console.log('event.data.height', event.data.height);
jQuery('#frameId').height(event.data.height + 12);
}
});

I get $(image).width() == 0 even when placed inside $(window).load

I want to resize images that are bigger than the window, but I keep getting 0 width and height when I try to get the image size. I read somewhere that it could be because images aren't necessarily loaded at (document).ready so image functions should go under (window).load, but it's no use. I'm a real newbie when it comes to jquery and javascript so I could be doing something wrong.
This is how my javascript file looks:
//<!--
$(document).ready(function(){
...
});
$(window).load(function () {
$(".lightbox img").each(function() {
var width = $(this).width();
var max_width = $(window).width()-30;
var height = $(this).height();
var max_height = $(window).height()-30;
if(width > max_width || height > max_height) {
if(height > width) {
height = max_height;
width = Math.ceil(width / height * max_height);
} else {
width = max_width;
height = Math.ceil(height / width * max_width);
}
}
$(this).attr("width",width);
$(this).attr("height",height);
});
});
//-->
Thanks in advance.

Take a look at this project that provides a callback when images have loaded.
Another reason you could be getting no dimensions is an invisible element (parent or self).

Try $(this).css("width") instead of attr

When the window loads, the images haven't necessarily loaded yet. JavaScript can't get an image's dimensions until is has completely loaded, and until then, you get a computed value of zero.
Bearing this in mind, a repeating loop might help. (Warning: haven't tested)
var width = 0;
while (!width) {
width = $(this).width();
}
Watch out for infinite loops, though.

Resize images along with browser size but different % for Landscape and Portrait HTML

I've looked around but am unable to find information on this exact topic and I'm hoping I can get some help.
On my right side of the browser in a table I have an image that can be clicked through with the clickable link. They are landscape and portrait images. The Landscape images are at 900 x 700 pxl and the Portrait images are at 540 x 700. I want the landscape images to only max out at 900 x 700 and shrink accordingly with the browser sizing.
I have been able to have the images resize with the code below.
img src="jpegs/pict1.jpg" width="100%" alt="" name="slideImage"/
I have the images in the java script:
<script type="text/javascript">
var image = new Array("jpegs/pict1.jpg", "jpegs/pict2.jpg",
"jpegs/pict10.jpg",
"jpegs/pict9.jpg"
)
But, the portrait images gets skewed up to 900 width as well even though I want them to stay at 540 x 700 max and shrink accordingly. Is there code that can be added to make that happen?

To shrink the elements you must use a eventHandler on the resize event, get the clientWidth and Height and resize through javascript how much you need to resize. I could give some more relevant code if you could tell exactley the max and minimum size you need and also the maximum and minium resolution on which could be supported this script.
window.$getView = function() {
var ret = {
width : 0,
height : 0,
element : null
};
if( typeof window.innerWidth != 'undefined') {
ret.width = window.innerWidth;
ret.height = window.innerHeight;
ret.element = window;
} else if( typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth != 0) {
ret.width = document.documentElement.clientWidth;
ret.height = document.documentElement.clientHeight;
ret.element = document.documentElement;
} else {
ret.width = document.getElementsByTagName('body')[0].clientWidth;
ret.height = document.getElementsByTagName('body')[0].clientHeight;
ret.element = document.getElementsByTagName('body')[0];
}
return ret;
}
window.addEventListener("resize",resizeHandler);
resizeHandler : function(evt) {
document.getElementById('someImage').style.width = window.$getView().width/10+'px';
document.getElementById('someImage').style.height = window.$getView().height/10+'px';
}
the $getView function is a cross browser function to get the width and height of the page. the resizeHandler has the math formula to resize the element(s) you want. In here you could add your own percentage of the page and set a min and max width or height.