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

, , ,

Leave a Reply

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

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four 
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax

This site uses Akismet to reduce spam. Learn how your comment data is processed.