Summaries
Recurring Entities Referenced In These Posts
People: My Life (1x), James Doohan (1x), Gordon Cooper (1x), Michael Brito (1x)
Companies: Google Inc. (1x), Titan (1x), Flickr (1x), YouTube (1x), Digg (1x), img (1x)
Welcome back for part 3 of a series of posts on how to build a SocialBrowse like service with CloudShout... When we last left off we had accomplished the following tasks: Set up our test environment Created a new app at CloudShout Set up the basis of our JS code Coded the methods to attach small icons by all text links on page Coded the methods to open the link sharing dialog And we last left off with 2 hours and 15 minutes invested into the project... The goals I set out when i began coding for this session where: Create sidebar widget Have links share to all my friends Build a commenting system Icons by the links in pages should changed based on who shared them Create the Sidebar Widget In the previous post, we attached icons to all links on the page... We are doing that here too, but for cleanliness, we stored the JSON data in the this.elms object and reference it here through this.elms.links this.elms = { links: { elm: "div", parent_elm: this.info.id + "_content", content: { type: "html", value: "" }, atts: { id: this.info.id + "_links", className: "itkp_rc" }, styles: { position: "absolute", overflow: "hidden", top: "5px", left: "5px", width: "156px", height: "205px", backgroundColor: "#fff", fontSize: "10px", fontFamily: "verdana", color: "#666" } } } this.elms is my JSON DOM elements repository that I ' ll keep my element information stored in... But note, I ' m only putting it in there for myself, the following for loop is where we send it to our friends... Since I ' m not my own friend (sad, i know), I ' ll never get the message of a new link... Following, we will look at the "change_link_to()" function: this.create_link_record = function(friend, id, url, title, comment, comment_count, links_count, shared_at){ var div = itku.id(this.info.id + "_links") var a = "" a += " table cellpadding= ' 4 ' cellspacing= ' 0 ' border= ' 0 ' width= ' 100% ' onmouseover= ' this.style.backgroundColor=\"#e9f6fb\" ' onmouseout= ' this.style.backgroundColor=\"#fff\" ' " a += " tr " a += " td width= ' 24 ' valign= ' top ' img src= ' " + this.user_icon(friend) + " ' width= ' 24 ' height= ' 24 ' /td " a += " td style= ' font-family:verdana;font-size:10px;color:#666 ' " a += " [ span id= ' " + this.info.id + "_link_count_for_" + id + " ' " + links_count + " /span ] " a += " a name= ' " + this.info.id + "_link ' href= ' " + url + " ' " + title + " /a br/ " a += " span style= ' color:#666;font-size:9px; ' " + shared_at + " /span br/ " a += " " + comment + " br/ " a += " span onclick= ' " + this.info.id + ".show_comments(\""+this.user_icon(friend)+"\",... We now have the ability to: Share a link with friends Display these links to our friends Chat about the links in real time Have visual que ' s as to who ' s shared a link (the icons by the links) Not bad, and development time for the above is 4 hours... … View Post »
Entities This Post References
Companies: img (+)
Links To: http://this.incoming_link (-), http://this.style.backgroundColor (+), http://this.create_comment_header (+), http://this.incoming_comment (+), http://this.format_comment (+), http://this.scroll_comment_area (+), http://itkp.new_widget (-), http://itkp.new_float (+), http://this.elms.comments_header (+), http://this.elms.comments_holder (+), http://this.elms.comments_input (+), http://this.send_comment (+), http://_share_icon.png (+), http://div.scrollHeight (+)
