Programming Social Applications

Dynamically Setting the Height of a Gadget View

The JavaScript definitions for setting a dynamic height allow the gadget developer to automatically resize the user’s current view. Many social networking containers that host gadgets define a maximum gadget height by default and do not automatically resize it once the content in the view has changed. This can lead to excessive whitespace or cropped content, frustrating developers and users alike. The Content sections of a gadget XML file do provide a parameter for preferred_height, which the developer can use to specify the initial height in pixels of the particular view, but that parameter does not allow for dynamic resizing of the view when content changes.

There are two steps for executing a call to dynamically resize the current view’s height to the current height of the application content:

1. Within the ModulePrefs node of the gadget spec file, add a Require element to enable the dynamic-height JavaScript library.

   • Include: <Require feature="dynamic-height"/>

2. When you wish to dynamically resize the height of the current view, call the adjustHeight() method of the gadgets.window object.

   • Method call: gadgets.window.adjustHeight();

It is important that you call this method immediately after the application content has changed, such as right after making an AJAX request for new content and embedding it into the page:

<Module title="Module to make AJAX request and dynamically resize view"> <ModulePrefs> <Require feature="dynamic-height" /> ...