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" />
   </ModulePrefs>
   <Content view="canvas" preferred_height="300px">
      <![CDATA[
      <div id="updateNode">This is my initial content to be updated</div>
      <button onclick="makeRequest();">Update Page Content</button>

      <script type="text/javascript">
      function makeRequest(){
         //make AJAX request to get new page content using OpenSocial AJAX methods
         osapi.http.get({'href':'http://example.com/sendResp.php'}).execute(function
         (result){

            //update div with new content obtained from request
            document.getElementById('updateNode').innerHTML = result.content;

            //dynamically resize the view height to the new content height
            gadgets.window.adjustHeight();
         });
      }
      </script>
      ]]>
   </Content>
</Module>

Note

The full code for this sample is available at https://github.com/jcleblanc/programming-social-applications/blob/master/chapter_4/setting_gadget_height.xml.

In the preceding example, we start with the Require statement in ModulePrefs, which indicates that we would like to enable the functionality for dynamically resizing the gadget height. This is followed by a Content section, in which we set the canvas view’s starting height to 300px. The Content section has a div node with some starting content and a button with a click event to initiate the data fetch and resize. When a user clicks that button, the makeRequest function will initiate. The first thing the makeRequest function will do is perform an AJAX get request to fetch data from http://example.com/sendResp.php. In this example, that URL returns new HTML content to be embedded within the canvas view. Once that AJAX request completes and returns the result object, we set the innerHTML of the default div to the new content returned, and then immediately make a request to gadgets.window.adjustHeight() to resize the canvas view’s height to the height of the new content. If we didn’t execute the adjustHeight method call, the canvas height would have remained at the 300px that we initially set it to, and our new content would be cropped at that point.