Reputation: 2166
I have a responsive image that changes it's size (width and height) according to horizontal and vertical orientation. I want to set the position of an element based on the height of the image. When I grab the height of the image through jQuery $(".div-inner img").height()
, it returns the height of the image. Now when I change the orientation, the height's value remains the same although the actual image changes in size. Looks like I cannot get the new height without page refresh. Is there a way to get the new height through jQuery without refreshing the page?
Upvotes: 0
Views: 745
Reputation: 3293
1) Capture the window.onresize event
window.onresize = function (event) {
var height = $(".div-inner img").height();
//Do your thing
}
The downside of using this is that ANY resize is called. So this will probably fire a million (not literally) times on a typical browser resize. So you need to combine with a timout so it only can fire every few seconds.
So really it would be something like this.
var resizeTimeout;
window.onresize = function (event) {
clearTimeout(resizeTimeout);
resizeTimeout = setTimeout(function () {
// Alert when browser resized
alert ('Resized');
// DO YOUR THING
}, 1000);
};
2) Use orientation change (switching from Portrait to Landscape in mobiles and back again). Downside is it won't do anything thing in a desktop / laptop browser that is resized because no orientation is changed..
window.addEventListener("orientationchange", function() {
// Alert the orientation value
alert(window.orientation);
}, false);
Upvotes: 1