O'Reilly logo

Programming Social Applications by Jonathan LeBlanc

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Styling the Message and Window

We’ve explored how to create message windows using simple text constructs to populate their content, but if this messaging system is to have any real value, we need to be able to customize it as we see fit. So, next we’ll cover ways to apply custom styling to the message window’s content as well as the message window itself.

Styling message content

In addition to plain text, a message window accepts an HTML DOM node structure as its content. Since the message window will not exist in the DOM, the new node will be appended to the window.

Using our dismissible message gadget as our base, we can revise the Content section to use a DOM node we create instead of the text message specified:

<Content view="canvas">
   <![CDATA[
   <script type="text/javascript">
   //create div node for message
   var msgNode = document.createElement("div");
   msgNode.innerHTML = "See <a href='http://mysite.com'>My Site</a> for more details";

   //set mouse events on message content
   msgNode.onmouseover = function(obj){ obj.style.color = "#da1d1d";  }
   msgNode.onmouseout = function(obj){ obj.style.color = "#000";  }

   //create new dismissible mini-message
   var message = new gadgets.MiniMessage(__MODULE_ID__);
   message.createDismissibleMessage(msgNode);
   </script>
   ]]>
</Content>

We first create the DOM node, a div, which will house our message. We ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required