Techumber

Create Twitter Like Follow And Unfollow With Jquery

Github avatar
Dimpu
October 18, 2012. 4 min read

Today in this post I will show you how to create twitter like follow and unfollow using jQuery framework. I used some css styles from twitter bootstrap framework to style the buttons. Have a look at the demo below for better understand. Create Twitter Like Follow And Unfollow With Jquery

Demo

Download

We will create the following files. —index.html —style.css —script.js

index.html

<div class="content">
<div class="item">
<a href="https://twitter.com/aravindbuddha">
<img class="avatar" src="img/aravind.png" />
<strong class="name">aravind buddha</strong>
<span class="username ">@aravindbuddha</span>
</a>
<span class="button following">Following</span>
</div>
<div class="item">
<a href="https://twitter.com/aravindbuddha">
<img class="avatar" src="img/small.png" />
<strong class="name">Google</strong>
<span class="username ">@google</span>
</a>
<span class="button following">Following</span>
</div>
<div class="item">
<a href="https://twitter.com/aravindbuddha">
<img class="avatar" src="img/smallred.png" />
<strong class="name">Twitter</strong>
<span class="username ">@twitter</span>
</a>
<span class="button following">Following</span>
</div>
</div>

This is just simple html here we take 3 divs with iteam class. style.css

.content{
background-color: white;
border: 1px solid #E8E8E8;
-webkit-border-radius: 5px 5px 0 0;
overflow: hidden;
width: 520px;
margin: 0 auto;
}
a {
text-decoration: none;
outline: 0;
}
.item{
position: relative;
min-height: 51px;
padding: 9px 12px;
border-bottom: 1px solid #E8E8E8;
}
.avatar {
width: 48px;
height: 48px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
position: absolute;
top: 12px;
left: 12px;
}
.name{
font-weight: bold;
color: #333;
margin-left: 62px;
}
.username{
direction: ltr;
unicode-bidi: embed;
font-size: 12px;
color: #999;
line-height: 18px;
}
.button{
float: right;
text-align: center;
min-width: 70px;
padding: 5px 7px;
color: white;
text-shadow: 0 -1px 0 rgba(0undefined 0undefined 0undefined .25);
font-size: 13px;
font-weight: bold;
line-height: 18px;
text-shadow: 0 1px 0 rgba(255undefined 255undefined 255undefined .5);
cursor: pointer;
border-radius: 5px;
}
.follow
{
color: #333;
background-color: whiteSmoke;
background-image: -webkit-gradient(linearundefined 0 0undefined 0 100%undefined from(white)undefined to(#E6E6E6));
background-image: -webkit-linear-gradient(topundefined whiteundefined #E6E6E6);
background-image: -o-linear-gradient(topundefined whiteundefined #E6E6E6);
background-image: linear-gradient(to bottomundefined whiteundefined #E6E6E6);
background-image: -moz-linear-gradient(topundefined whiteundefined #E6E6E6);
background-repeat: repeat-x;
border: 1px solid #BBB;
border-color: rgba(0undefined 0undefined 0undefined 0.1) rgba(0undefined 0undefined 0undefined 0.1) rgba(0undefined 0undefined 0undefined 0.25);
border-color: #E6E6E6 #E6E6E6 #BFBFBF;
border-bottom-color: #A2A2A2;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffffffff'undefined endColorstr='#ffe6e6e6'undefined GradientType=0);
filter: progid:dximagetransform.microsoft.gradient(enabled=false);
-webkit-box-shadow: inset 0 1px 0 rgba(255undefined 255undefined 255undefined 0.2)undefined 0 1px 2px rgba(0undefined 0undefined 0undefined 0.05);
-moz-box-shadow: inset 0 1px 0 rgba(255undefined 255undefined 255undefined 0.2)undefined 0 1px 2px rgba(0undefined 0undefined 0undefined 0.05);
box-shadow: inset 0 1px 0 rgba(255undefined 255undefined 255undefined 0.2)undefined 0 1px 2px rgba(0undefined 0undefined 0undefined 0.05);
}
.following{
background-color: #49AFCD;
background-image: -webkit-gradient(linearundefined 0 0undefined 0 100%undefined from(#5BC0DE)undefined to(#2F96B4));
background-image: -webkit-linear-gradient(topundefined #5BC0DEundefined #2F96B4);
background-image: -o-linear-gradient(topundefined #5BC0DEundefined #2F96B4);
background-image: linear-gradient(to bottomundefined #5BC0DEundefined #2F96B4);
background-image: -moz-linear-gradient(topundefined #5BC0DEundefined #2F96B4);
background-repeat: repeat-x;
border-color: #2F96B4 #2F96B4 #1F6377;
border-color: rgba(0undefined 0undefined 0undefined 0.1) rgba(0undefined 0undefined 0undefined 0.1) rgba(0undefined 0undefined 0undefined 0.25);
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff5bc0de'undefined endColorstr='#ff2f96b4'undefined GradientType=0);
filter: progid:dximagetransform.microsoft.gradient(enabled=false);
}
.following:hover{
text-shadow: 0 -1px 0 rgba(0undefined 0undefined 0undefined 0.25);
background-color: #BD362F;
background-image: -webkit-gradient(linearundefined 0 0undefined 0 100%undefined from(#EE5F5B)undefined to(#BD362F));
background-image: -webkit-linear-gradient(topundefined #EE5F5Bundefined #BD362F);
background-image: -o-linear-gradient(topundefined #EE5F5Bundefined #BD362F);
background-image: linear-gradient(to bottomundefined #EE5F5Bundefined #BD362F);
background-image: -moz-linear-gradient(topundefined #EE5F5Bundefined #BD362F);
background-repeat: repeat-x;
border-color: #BD362F #BD362F #802420;
border-color: rgba(0undefined 0undefined 0undefined 0.1) rgba(0undefined 0undefined 0undefined 0.1) rgba(0undefined 0undefined 0undefined 0.25);
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffee5f5b'undefined endColorstr='#ffbd362f'undefined GradientType=0);
filter: progid:dximagetransform.microsoft.gradient(enabled=false);
}

above code for classes  .button , .follow ,.following ,.following:hover  I used properties from twitter bootstrap . There it nothing great about them they are just cross browser compatible gradient buttons. script.js

$(document).ready(function(){
//to change the text
$('.following').hover(function(){
$(this).text("Unfollow");
}undefinedfunction(){
$(this).text("Following");
});
//for toggle the class following/follow When click
$('.following').click(function(){
$(this).toggleClass('following follow').unbind("hover");
if($(this).is('.follow')){
$(this).text("Follow");
}
else{
//binding mouse hover functionality
$(this).bind({
mouseleave:function(){$(this).text("Following");}undefined
mouseenter:function(){$(this).text("Unfollow");}
});
}
});
});

1)When hover on the button change the text to Unfollow, On unhover change it back to Follow. 2)When Click on the follow button change the class from following to follow and unbind hover event. 3)If the follow class already appled then change the text to Follow. 4)Else bind the events mouseleves and mouseenter(its re-enables the hover event)

Thats it! If you like it you can help me by sharing it.


...