Programming Social Applications

Positioning the Message Windows

Displaying a message to your gadget users is a great way to inform them of pertinent changes, upsell items for in-app purchases, and more. Many times, you’ll want to position those windows in a specific spot in your application to prevent the default pop-up location from being used and supplemental content from being covered.

There are a few methods available for positioning single windows or all windows at once.

Positioning a single message

If you have multiple mini-message windows that you want to position at different locations, or if you only have a single message in the gadget that you would like to position, then it may be easiest to position one window at a time.

In addition to allowing plain text for the content of a message window, the createDismissibleMessage() method also accepts a DOM node reference that denotes the window’s HTML-based content.

Again taking the dismissible message gadget sample as our foundation, we can change the Content section to dictate the position on the page that a message window should be displayed, based on where the DOM node is placed:

<Content view="canvas"> <![CDATA[ <style type="text/css"> #msgWindow{ width:200px; float:right; } </style> <div id="msgWindow"> <b>This is my message header</b><br /> Visit <a href="http://www.mysite.com">my site</a> for more details. </div> <script type="text/javascript"> //create new mini-message object var message = new gadgets.MiniMessage(__MODULE_ID__); //get the message node and ...