How to Create a Twitter Like Retweet Links
Posted: September 3, 2011 Filed under: browser, Internet, Original Article, Techno irrelevency ., Tutorial, Web 2.0 | Tags: css, html, internet, javascript, jquery, tutorial, twitter, web, webapps Leave a commentTwitter is one of the most visited social networking sites , and one of the factors in their success is the intuitiveness of the user interface .
In this tutorial We are going to learn how to create a twitter like mouse over effect for retweet , favorite links
To achieve this effect we are going to be using HTML, CSS and jQuery .
First the HTML :
<body></pre> <div class="<span class=">TweetContainer"></div> <pre> <div class="Tweet"> <span class="TweetAuthor"> <p><strong>JamesBond007</strong>:-</p> </span> <span class="TweetText"> I am #Bond, #James Bond ! @JamesBond007 </span> </div></pre> <div class="<span class=">TweetActions"></div> <pre> <em>Favorite</em> ⊥ <em>Retweet</em> </div> </div> </body>
We create a Container DIV and 2 separate DIVs one for the Tweet and another for the TweetActions. The actual Tweet content is put inside the Tweet DIV and TweetActions contains Favorite and ReTweet .
Next The Styling
<style> .TweetContainer { margin: 15 auto; width: 500px; height: 70px; background: #C7EEFE; padding: 30px; border-radius: 15px; font-family: Arial,sans-serif border-color: #B7EEFE; border-width:medium; } .TweetActions { position: relative; left: 300px; cursor: pointer } </style>
And now comes the jQuery Code
<script> $(document).ready(function(){ //Hide the Favorite and Retweet Buttons $('.TweetContainer').find('.TweetActions').hide(); //Trigger the Mouse over action $('.TweetContainer').mouseenter(function(){ /* * Show the Retweet and Favorite buttons for the Current * Tweet */ $(this).find('.TweetActions').show(); //Highlight the Current Tweet by changing the background Color $(this).css({ 'background':'#C7FFFE', }); }); //Trigger the mouse leave action $('.TweetContainer').mouseleave(function(){ /* * Hide the Retweet and Favorite buttons for the Current * Tweet */ $(this).find('.TweetActions').hide(); //Change the background color of the Current Tweet to normal $(this).css({ 'background':'#C7EEFE', }); }); }); </script>
Putting it all together we get
Live DEMO
To get the full Source code just save the Demo Page as html and open it with a text editor .
As always comments and Suggestions are welcome .
Please Post your comments below