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

The Content Markup

The gadget’s Content section will contain all the gadget markup inline. We will define the style block to add visual appeal to the application and include the DOM containers we’ll drop all of our content in:

<Content type="html"><![CDATA[
   <style type="text/css">
   div#gadget{ font:11px arial,helvetica,sans-serif; }
   div#gadget div.header{ background-color:#858585;
                          color:#fff;
                          font-weight:bold;
                          font-size:12px;
                          padding:5px;
                          margin:5px; }
   div#gadget div#railRight{ width:360px;
                             float:right;
                             border:1px solid #858585;
                             margin:0 0 15px 15px;
                             padding:10px;
                             background-color:#eaeaea; }
   div#gadget div#railRight span{ margin:5px; }
   div#gadget div#railRight div#friendLinks img{ border:0;
                                                 margin:5px;
                                                 width:50px;
                                                 height:50px;
                                                 cursor:pointer; }
   div#gadget div#updates{ margin-left:5px;
                           margin-right:390px; }
   div#gadget div#updates div.header{ font-size:15px;
                                      margin:0; }
   div#gadget div#updates div#profileContent img{ margin:10px; }
   div#gadget div#updates div#profileContent div{ font-size:14px;
                                                  margin:5px 10px; }
   div#gadget div#updates div#profileContent span{ font-weight:bold; }
   </style>

   <div id="gadget">
      <div id="railRight">
         <div class="header">Other Profiles</div>
         <span>Click on an image below to load the profiles of
               your connections</span>
         <div id="friendLinks"></div>
      </div>
      <div id="updates">
         <div class="header">Current Profile</div>
         <div id="profileContent"></div>
      </div>
   </div>

Between the style block and our DOM objects, we are building out an application that consists of two columns ...

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