1stwebdesigner

Create a Stylish Tweet Book with Jquery and CSS

Posted: 16 Aug 2012 06:00 AM PDT

Twitter is a popular social networking service used by millions of users to share text-based content. It has been described as the “SMS of the Internet.” We love to tweet links and ideas we are interested as well as follow other people with similar interests. Everyone loves to follow a lot of people and hence there is a possibility of missing the most important tweets.

So in this tutorial I am going to create a stylish Tweet book to keep your best friends and view their Tweets. As you complete this tutorial you will gain knowledge in working with jQuery and CSS to create a stylish book design. You will also learn to work with the Twitter API using jQuery and AJAX. So let’s get started.

Once you open the demo click on the button with the arrow to open the book. Then click on a letter to load friends. Then click view button to get the recent tweets.

Demo | Download

Structuring Tweet Book Components

Before we start any project we need to plan what we need and how we’re going to do things. So let’s list the layout components of our Tweet Book.

Cover Page – This will be the initial book cover with logo, title, letters and open button.
Twitter Friends List – This section will have the list of Twitter users and their profile picture inserted into an array.
Friends Tweets – This section will have profile information on the left side and tweets on the right side.

Designing Cover Page

This is the section which will be displayed initially. Other then the ‘open book’ button, we don’t have any jQuery or Twitter API related functionality here. So let’s see how to design a book cover using CSS.

<div class='tweet_books'>      <div  id="startup_page">         <div class="tb_cover_outer">              <div class="tb_cover_letters">                 <div class="tb_cover_letter">A</div>                 <div class="tb_cover_letter" style="background: #8791d9;">B</div>                 <div class="tb_cover_letter" style="background: #3bcbd0;">C</div>                 <div class="tb_cover_letter" style="background: #da5c83;">D</div>             </div>              <div class="tb_cover_inner">                 <div class="tb_cover_bar"></div>                 <div class="tb_cover_img"><img src="bird.jpg" /></div>                 <div class="tb_cover_title">Tweet Book</div>                  <div class="tb_cover_open"><div class="arrow_left"></div></div>             </div>         </div>     </div>  </div>

We create a DIV with the class tweet_books as the main container of the Tweet Book.
Then we have 2 DIV elements called tb_cover_outer and tb_cover_inner. This will be the back section of the cover and front section of the cover respectively.
You can see that the letter bar has the class tb_cover_letters and is placed between the inner and outer cover. This is because we want to show the letters between the front and back cover like a bookmark.
Then we have the Twitter Bird, Title, Open button and shaded bar on the left inside the inner cover.

Following is the necessary styles for the cover page.

  <style>      @font-face {          font-family: 'HelveticaNeueLT Com 65 Md';          src: url('fonts/HelveticaNeueLTCom-Md.ttf');          src: local('fonts/HelveticaNeueLT Com 65 Md'), url('fonts/HelveticaNeueLTCom-Md.ttf') format('truetype');      }      body{          background-image: url('back.jpg');          font-family: 'HelveticaNeueLT Com 65 Md';      }      ul{          list-style:none;          font-weight: bold;      }      .tweet_books{          height: 650px;          margin: 40px auto;          width: 937px;      }      .letter:hover{  	cursor:pointer;      }      .tb_cover_close:hover{          cursor:pointer;      }      .tb_cover_open:hover{          cursor:pointer;      }      /* Cover Page      */      #startup_page{          margin: 0px 0 50px 380px;          position: absolute;      }      .tb_cover_outer{          background-image: url("coverBackground.png");          border: 1px solid #364258;          border-radius: 0 5px 5px 0;          box-shadow: 0 0 1px 2px #525E7B inset, 0 1px 3px #393891 inset;          height: 620px;          width: 500px;      }      .tb_cover_inner{          background-image: url("coverBackground.png");          border: 1px solid #969AA0;          border-radius: 0 5px 5px 0;          height: 617px;          position: relative;          top: 1px;          width: 492px;      }      .tb_cover_title{          color: #46536B;          font-family: 'HelveticaNeueLT Com 65 Md';          font-size: 50px;          font-weight: bold;          margin: 0 auto;          padding-left: 30px;          text-shadow: 1px 1px 1px #6E83A3;          width: 325px;      }      .tb_cover_bar{          background: none repeat scroll 0 0 #5B6C8B;          border-left: 1px solid #7D94B4;          border-right: 1px solid #7D94B4;          box-shadow: 0 0 7px #141313 inset;          float: left;          height: 100%;          margin-left: 20px;          width: 25px;      }      .tb_cover_open{          background: none repeat scroll 0 0 #323D51;          border: 1px solid #262525;          border-radius: 5px 0 0 5px;          box-shadow: 0 0 1px #B1B1B1 inset;          height: 50px;          left: 453px;          position: absolute;          top: 275px;          width: 50px;      }      .tb_cover_letter{          background: none repeat scroll 0 0 #BDDC2F;          border-radius: 0 3px 3px 0;          color: #FFFFFF;          font-family: 'HelveticaNeueLT Com 65 Md';          font-size: 13px;          font-weight: bold;          height: 13px;          left: 484px;          margin: 3px 0;          padding: 3px 3px 3px 2px;          width: 13px;          text-align:center;      }      .tb_cover_letters{          float: right;          left: 6px;          position: relative;          margin-top: 10px;      }      .tb_cover_img{          height: 135px;          margin: 170px auto 10px;          width: 150px;      }      .arrow_right {          float: left;          height: 0;          margin: 12px 15px;          width: 30px;          height: 30px;          background-image: url('sprites.png');          background-position: -2px -25px;      }      .arrow_left {          background-image: url('sprites.png');          background-position: -2px -50px;          float: left;          width: 30px;          height: 30px;          margin: 12px 15px;      }  </style>

Now I’ll explain the most important properties in the above code from the design perspective.

Positioning of the letter bar is important. So I have positioned it relatively to the outer cover. You can change the left and top values for class tb_cover_letters to adjust the letter bar between inner and outer covers.
CSS box-shadow property is used to create the shaded bar on the left of the book cover. Adjust the spread distance to get different shades.
You can adjust the color and text-shadow of tb_cover_title class to get the text effects on Title.

Once the above section is completed you should have the cover page of the Tweet Book as shown below.

Tweet Book Cover Design

Creating Twitter Friends List

In this section we are going to create the screen to show the list of Twitter friends with their profile images. Once the book is opened we cannot show the list of users since we haven’t clicked on a letter yet. So we have to show a default message to users. Let’s get started on the design.

We are going to position all 3 sections of the Tweet Book one above the other using the same coordinates and keep the other 2 sections hidden. Following is the HTML code for the friends list page and should be inserted after the cover page code.

  <div class="book_cover" id="followers_page">          <div class="book_pages" style="left: 3px; width: 862px;"></div>          <div class="book_pages" style="left: 5px; width: 858px;"></div>          <div class="book_pages" style="left: 7px; width: 854px;"></div>          <div id="followers_page_rows" class="book_pages" style="left: 9px; width: 850px;">              <div class="page_left">                  <div class="followers_message">Click On a Letter To Load Friends</div>              </div>              <div class="page_bind"><span class="top"></span><span class="bottom"></span></div>              <div class="page_right"></div>          </div>      </div>

List page is named as followers_page and has a class called book_cover.
Then we have 4 DIV elements with the class book_pages. The last DIV will be used to display our content and the first 3 are used to style the book to show that it has more pages.
Inside the element with the ID followers_page_rows, we have 3 sections called page_left,page_bind and page_right. page_left and page_right will act as the 2 pages shown on a book when it’s opened. page_bind will contain the effects to show shading and image.
Inside the page we provide a message asking the users to click on a letter to start.

Then we need to add the code for letters bar and close button as shown below. This code should be included after the friends list page.

  <div class="letters">          <div class="letter">A</div>          <div class="letter" style="background: #8791d9;">B</div>          <div class="letter" style="background: #3bcbd0;">C</div>          <div class="letter" style="background: #da5c83;">D</div>      </div>      <div class="tb_cover_close"><div class="arrow_right"></div></div>

You can find the CSS style for this section under the section Book Pages Styles and Followers Page Styles in the style.css file in project files folder. I am not including the CSS for this section here as its long and contains easy to understand styles.

Initially the letter bar and close button will be hidden. So you should have a something like the following in your demo.

You can see that the book screen is shown and our book cover design is displayed under the book screen. So initially we want to hide the book screen and show book cover. Then once user clicks on open button book cover should be hidden and book screen should be opened. So let’s move onto some jQuery stuff for handling those functionalities.

      $(document).ready(function(){      	$("#profile_page").hide();          $("#followers_page").hide();  	$(".tb_cover_open").live("click",function(){              $("#startup_page").fadeOut("slow");              $("#followers_page").fadeIn("slow");              $(".letters").css("display","block");              $(".tb_cover_close").css("display","block");          });      });

First we keep the cover page visible and hide the other 2 pages using the jQuery hide function.
Next we assign a click event to the open button on the book cover to call a jQuery function.
Inside the function we hide the cover page using fadeOut and display the friend list screen using fadeIn.
Also we have shown the letters and close button which is hidden initially.

So you should have the following screen once the open button is clicked.

Configuring Friend Details

Now we have to define set of friends to be included in the Tweet Book. I am going to use javascript array to include friends. You can load the friends from database or JSON file by customizing the code.

         var obj = { "Dainis" :"1stwebdesigner",              "Kim Thoenen" :"KeiAiAm",              "manish kumar":"ManishDcs",          };          $.each(obj, function(key, value) {              var letter = key.charAt(0);              letter = letter.toUpperCase();              if(followers[letter]){                  followers[letter] = followers[letter] + "," + value;              }else{                  followers[letter] = value;              }          });

First we define the list of friends with their name and Twitter username in a js array.You can add any number of names as you wish. Then we loop through the array and assigns each friend to a new array with first letter of the name.

Displaying Friends List

Once the user clicks on a letter we are going to animate the letter and make it move to the left of the page and display the users list for the letter with their profile image. So let’s get started.

I am going to use the $(“.letter”).click(function() for this functionality.Explanation is going to be done step by step using small code parts. You can find the complete $(“.letter”).click(function() function inside the index.html of project files.

  	    $("#followers_page").fadeIn("slow");              $("#profile_page").fadeOut("slow");              $(".active_letter").animate({                  left: "0px"              }, 2000 );              $(".active_letter").removeClass(".active_letter");              var letter = $(this).html();              letter = letter.toUpperCase();              $(this).css("z-index","22");              $(this).addClass("active_letter");              $(this).animate({                  left: "-880px"              }, 1000,function() {$(this).css("z-index","1");} );

First we animate the letter on the left back to the letter bar. Initially all the letters will be on the right side.
Then we remove the active_letter class from the previous letter.
Then we add the active_letter class to the clicked letter and animate it to the left hand side.
z-index used to place the letter on top or between the book cover depending on the condition.

Once the above animation is completed we need to load the users list using the code below.

  $("#followers_page_rows .page_right").html("");              $("#followers_page_rows .page_left").html("");              var letterFollowers = (followers.hasOwnProperty(letter)) ? followers[letter] : '';              var url = "https://api.twitter.com/1/users/lookup.json?screen_name="+letterFollowers+"&include_entities=true";              if(letterFollowers != ''){                  $.ajax({                      url : url,                      dataType : "jsonp",                      success : function(data)                      {                          var count = 0;                          $.each(data, function(key, value) {                              count++;                              var html = '<div class="followers_row"><div class="followers_profile_image">\n\                  <div class="followers_profile_image_inner"><img src="'+value.profile_image_url+'" /></div></div>\n\  <div class="followers_profile_name">'+value.name+'</div><div class="followers_profile_view" data-followid="'+value.screen_name+'" >view</div></div>\n\  <div class="seperater"></div>';                              if(count>5){                                  $("#followers_page_rows .page_right").append(html);                              }else{                                  $("#followers_page_rows .page_left").append(html);                              }                          });                      },                      error : function()                      {                          alert("Failure!");                      }                  });              }

First we clear any available content on the left and right side of the page.
Then we get the Twitter usernames of users for the current letter by using the JavaScript array.
We can get information about users by passing Twitter usernames to the following API URL. https://api.twitter.com/1/users/lookup.json
Once the AJAX request is successfully completed, we assign the users to left and right pages of book with their profile image and the view profile button.

Now we have completed the first 2 screens of the Tweet Book and it should look like the following image. In the next section we are going to complete the tutorial by creating the profile information and tweets page.

Designing and Loading Tweets

We are going to create a page which contains the profile image, username and description on the left section and tweets on the right section. Let’s get started with the HTML code for the page.

      <div id="profile_page" class="book_cover">          <div class="book_pages" style="left: 3px; width: 862px;"></div>          <div class="book_pages" style="left: 5px; width: 858px;"></div>          <div class="book_pages" style="left: 7px; width: 854px;"></div>          <div class="book_pages" style="left: 9px; width: 850px;">              <div class="page_left"></div>              <div class="page_bind"><span class="top"></span><span class="bottom"></span></div>              <div class="page_right"></div>          </div>      </div>

Above page section will be similar to the followers page with a different ID called profile_page.

Loading Tweets

Once the view button is clicked we call a jQuery function called $(“.followers_profile_view”).live(“click”,function(). I’ll explain the necessary details about the code in the following section.

  $(".followers_profile_view").live("click",function(){              var screenName = $(this).attr("data-followid");              var url = "https://api.twitter.com/1/users/lookup.json?screen_name="+screenName+"&include_entities=true";              $.ajax({                  url : url,                  dataType : "jsonp",                  success : function(data)                  {                      $("#profile_page .page_left").html("");                      var originalImage = "https://api.twitter.com/1/users/profile_image?screen_name="+data[0].screen_name+"&size=bigger ";                      var html = '<div class="profile_image"><div class="profile_image_inner"><img src="'+originalImage+'" style="width:73px;height:73px" /></div></div>\n\              <div class="profile_name">'+data[0].name+'</div><div class="profile_username">@'+data[0].screen_name+'</div>\n\  <div class="profile_desc">'+data[0].description+'</div>';                      $("#profile_page .page_left").html(html+"<div class='more_tweets' id='back_to_list'>Back</div>");                      $.ajax({                          url : "https://api.twitter.com/1/statuses/user_timeline.json?include_entities=true&include_rts=false&screen_name="+data[0].screen_name+"&count=50",                          dataType : "jsonp",                          success : function(tweets)                          {                              console.log(tweets);                              console.log(url);                              $("#followers_page").fadeOut("slow");                              $("#profile_page").fadeIn("slow");                              var tweetHTML = '';                              $("#profile_page .page_right").html("");                              var keyIndex = 1;                              var sections = 0;                              $.each(tweets, function(key, tweetsValue) {                                  tweetsValue.text = replaceURLWithHTMLLinks(tweetsValue.text);                                  if(keyIndex%5 == 1){                                      sections++;                                      tweetHTML += "<div class='followers_row_section' id='section"+sections+"' >";                                      tweetHTML += '<div class="followers_row"><div class="followers_profile_image">\n\                      <div class="followers_profile_image_inner" >\n\  <img src="'+data[0].profile_image_url+'"></div></div>\n\  <div class="followers_tweet_name">'+data[0].name+'</div><div class="followers_tweet_desc">'+tweetsValue.text+'</div></div><div class="seperater"></div>';                                  }                                  else if(keyIndex%5 == 0){                                      tweetHTML += '<div class="followers_row"><div class="followers_profile_image">\n\                      <div class="followers_profile_image_inner">\n\  <img src="'+data[0].profile_image_url+'"></div></div>\n\  <div class="followers_tweet_name">'+data[0].name+'</div><div class="followers_tweet_desc">'+tweetsValue.text+'</div></div><div class="seperater"></div>';                                      tweetHTML += "<div class='more_tweets' id='more"+sections+"'>More</div>";                                  }                                  else{                                      tweetHTML += '<div class="followers_row"><div class="followers_profile_image">\n\                      <div class="followers_profile_image_inner">\n\  <img src="'+data[0].profile_image_url+'"></div></div>\n\  <div class="followers_tweet_name">'+data[0].name+'</div><div class="followers_tweet_desc">'+tweetsValue.text+'</div></div><div class="seperater"></div>';                                  }                                  keyIndex++;  			    });                              $("#profile_page .page_right").append(tweetHTML);                              $("#profile_page .page_right .followers_row_section").each(function(){                                  $("#profile_page .page_right").prepend(this);                              });                          },                          error : function()                          {                              alert("Failure!");                          }                      });                  },                  error : function()                  {                      alert("Failure!");                  }              });          });

We have to get the username by using the data-followid attribute in the view button we defined earlier.
Next we make the AJAX request to get the information from Twitter as we did earlier. Difference is that we are using only a single username this time.
Once data is received we assign the user profile information to the left side of the page.
Then we make another AJAX request to Twitter API to get the recent tweets by the given user using https://api.twitter.com/1/statuses/user_timeline.json as the URL.
Next we hide the followers list by using fadeOut and display tweet screen with fadeIn functions.
Finally we loop through the tweets received and assigns it to the right hand side of the page.

Now you should be able to view the tweet list of the user as shown in the screen below.

Adding Controls

Finally we need to add some controls to do the following tasks.

Click More button to load next set of tweets.
Click Back button to get to the followers page.
Click the close button to close the book and display book cover.

So we need to include the following JavaScript codes to provide above functionality.

         $(".more_tweets").live("click",function(){              var moreId = $(this).attr("id");              var slideId = moreId.replace("more","section");              $("#"+slideId).fadeOut("slow");          });  	$("#back_to_list").live("click",function(){              $("#profile_page").fadeOut("slow");              $("#followers_page").fadeIn("slow");          });         $(".tb_cover_close").live("click",function(){              $("#followers_page").fadeOut("slow");              $("#profile_page").fadeOut("slow");              $("#startup_page").fadeIn("slow");              $(".letters").css("display","none");              $(".tb_cover_close").css("display","none");          });

Finally we have a cool Tweet Book which can be used to keep track of the tweets of your best friends. Hope you enjoyed the tutorial and try adding other social media profiles and make it a Social Sharing Book.