Welcome

From OpenSocial Directory

Thumbnail

Application Details Description Welcome message from profile owner (version 1.0). Showing names and pictures of specified number of profile owner's friends. Demonstrates usage of prototype, jquery and jcarousel libraries and OpenSocial wrappers from Chris Chabot, modified by Jevgenijs Sallinens (see http://www.chabotc.com/generic/second-step-into-the-open-social-world). Publisher Deal Of Fun Author Jevgenijs Sallinens Code http://www.dealoffun.com/opensocial/welcomeorkut10.xml Genre Test Containers Ning

Image:Example.jpg==Reviews== Add a Review
Template:Welcome Reviews

[edit] Comments

Leave a comment
Your Name: Heading: Comment:

[edit] Code

View Code

  <?xml version="1.0" encoding="UTF-8" ?> 
  <Module>
  <ModulePrefs title="Welcome" description="Welcome message from profile owner (version 1.1). Showing names, pictures and profiles of specified number of profile owner's friends." author="Jevgenijs Sallinens" author_location="Riga, Latvia" screenshot="http://www.dealoffun.com/opensocial/images/welcome.png" thumbnail="http://www.dealoffun.com/opensocial/images/welcome.png">
  <Require feature="opensocial-0.5" /> 
  <Require feature="dynamic-height" /> 
  <Require feature="analytics" /> 
  </ModulePrefs>
  <UserPref name="maxfriends" display_name="Maximal number of friends" default_value="25" /> 
  <Content type="html">
  <![CDATA[ 

 <script type='text/javascript' src='http://www.dealoffun.com/opensocial/js/osClassBasic.js'></script>
 <script type="text/javascript" src="http://www.dealoffun.com/opensocial/lib/jquery-1.2.1.pack.js"></script>
 <script type="text/javascript" src="http://www.dealoffun.com/opensocial/lib/jquery.jcarousel.pack.js"></script>
 <link rel="stylesheet" type="text/css" href="http://www.dealoffun.com/opensocial/lib/jquery.jcarousel.css" />
 <link rel="stylesheet" type="text/css" href="http://www.dealoffun.com/opensocial/skins/skin.css" />

  
    <style type="text/css">
      .person { 
        font-family: arial,helvetica,sans-serif;
        font-size: 10pt;
        color:#767C7F;
        background: #FFFFFF;
        font-weight:bold;
        width: 332px;
        height: 40px;
        margin: 0px;
        padding: 0px;
        vertical-align: top;
      }
     .person2 { 
        font-family: arial,helvetica,sans-serif;
        font-size: 10pt;
        text-align:center;
        color:#767C7F;
        background: #FFFFFF;
        font-weight:bold;
        width: 332px;
        height: 40px;
        margin: 0px;
        padding: 0px;
        vertical-align: top;
      } 
      .photo {
        vertical-align: middle;
        border:1px 
        solid #767C7F; 
      }
    </style>
    <div id="viewer" class="person"></div>
    <div id="owner" class="person2"></div>
    <div> <ul id="ofphotos" class="jcarousel-skin-ie7"> </ul></div>

    <script>

 /* Welcome message from profile owner (version 1.1). 
   Demonstrates usage of prototype, jquery, jcarousel libraries and generic OS library osClassBasic.js,
    based on Chris Chabot's library (see http://www.chabotc.com/generic/second-step-into-the-open-social-world)."
    Written by Jevgenijs Sallinens, 11/27/07
    (c) 2007 Jevgenijs Sallinens / dealoffun.com 
    Usage: -- restricted to non-commercial, non-syndicated usage unless given written permission.
*/
 
      function renderViewer(person, elem) {
        var dom_photo;
        elem.appendChild(document.createTextNode('Hey,'));
        elem.appendChild(document.createTextNode(' '));
        elem.appendChild(document.createTextNode(person.name));
        elem.appendChild(document.createTextNode(' '));
        dom_photo = document.createElement("img");
        dom_photo.className = "photo";
        dom_photo.src = person.thumb;
        dom_photo.width = "33";
        dom_photo.height = "33";
        dom_photo.title="You";
        elem.appendChild(dom_photo);
     }
     
     function renderOwner(person, elem) {
        var dom_photo;
        elem.appendChild(document.createTextNode('Welcome from'));
        elem.appendChild(document.createTextNode(' '));
        elem.appendChild(document.createTextNode(person.name));
        elem.appendChild(document.createTextNode(' '));
        dom_photo = document.createElement("img");
        dom_photo.className = "photo";
        dom_photo.src = person.thumb;
        dom_photo.width = "33";
        dom_photo.height = "33";
        dom_photo.title="Profile Owner";
        elem.appendChild(dom_photo);
        if (maxfriends > 0){ elem.appendChild(document.createTextNode(' and'));}
     }


     function ofLoadCallback(carousel, state) {
         var i;
         for (i = carousel.first; i <= carousel.last; i++) {
           if (carousel.has(i)) {continue;}
           if (i > maxfriends) {break;}
           carousel.add(i, mc_getItemHTML(ofriends[i-1]));
         }
     }

     function mc_getItemHTML(person) {
          return '<a href="' + person.profile + '" target="_blank"  title="' + person.name + '"><img src="' + 
          person.thumb + '" width="33" height="33" class="photo" /></a>';
     }
     var ofriends = [];
     var prefs = new _IG_Prefs();
     var maxfriends = prefs.getInt("maxfriends");
    // creating OpenSocial class  

    OSClass.prototype.onInitialize = function() {
          document.getElementById('viewer').innerHTML = 'Processing ...';
        }
 
    OSClass.prototype.onComplete = function() {
           var viewer = this.viewer;
           var owner = this.owner;
           document.getElementById('viewer').innerHTML = '';
           if (viewer.name === "Anonymous" ||  viewer.id === owner.id) {}
           else {renderViewer(viewer, document.getElementById("viewer"));}
           ofriends = this.ownerFriends;
           if (ofriends.length < maxfriends) {maxfriends = ofriends.length;}
           renderOwner(owner, document.getElementById("owner"));
           if (maxfriends > 0) {
             jQuery('#ofphotos').jcarousel(
             {
               size: maxfriends,
               itemLoadCallback: {onBeforeAnimation: ofLoadCallback}
             });
           } 
        }
     OSClass.prototype.onError = function(error) {
        document.getElementById('viewer').innerHTML = 'Some problems: ' + error;
    }        
    OSClass.prototype.options_viewer = true;
    OSClass.prototype.options_owner = true;
    OSClass.prototype.options_viewerFriends = 0;
    OSClass.prototype.options_ownerFriends = maxfriends;
    
    
    var app = new OSClass;

</script> 
 <script>
    _IG_Analytics("UA-2647700-1", "/welcomeorkut10");
  </script>
  

  ]]> 
  </Content>
  </Module>

Page Rating