Think In Geek

In geek we trust

Handling resizing in Adobe Air with HTML

If you develop a widget with Adobe AIR using HTML and Javascript, you may want to resize some elements of the HTML page depending on the size of the widget, thus having to resize them when the user decides to resize the widget. However, there’s a little trick on using the RESIZE event of the air.Event object.

The trick is that when the event is raised, and you execute some method on the corresponding event handler, the widget won’t have the correct size yet, so if you use the window.nativeWindow.width or window.nativeWindow.height values there you’ll be getting erroneus results.

The solution is quite easy, though. You just have to let the HTML engine to adjust everything he needs to sort out the new sizes and get those attributes after that. How do you do that? By putting your code in a setTimeout call with 0 milliseconds timer. Here you can find an example (assuming use of jQuery):

$(document).ready(function() {
    window.nativeWindow.addEventListener(air.Event.RESIZE, onResize);
});
 
function onResize() {
    var nativeWin = window.nativeWindow;
    setTimeout(function(){
    var width = nativeWin.width;
    var height = nativeWin.height;
    }, 0);
} //Here the values are correct

Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn

, , ,

Leave a Reply

Your email address will not be published. Required fields are marked *