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
Twitter mouse over effect
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
Advertisements
