CODEWITHSUNDEEP
jqueryresponsive-design
user1448031
user1448031

Reputation: 2166

Responsive website: How to get the new value from jQuery when orientation changes?

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

Answers (1)

James
James

Reputation: 3293

You have a few options.

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

Related Questions