How to Create a Twitter Like Retweet Links

Twitter 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>&nbsp;
        			&perp;
        			<em>Retweet</em>&nbsp;
        		</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

Typing தமிழ் (Tamil) on Ubuntu Linux

To type a indic language on Linux you need to do some work before you get it working and before we start I am assuming that you are using ubuntu Linux 10.04 or higher .

The first thing you need is to install ibus 

so to install ibus open terminal and type

sudo apt-get install ibus


sudo apt-get install ibus-m17n

after installing ibus and m17n go to System->Administration->Language Support in the Gnome menu

Select keyboard input system as ibus

Click on Install/Remove Languages -> Select Tamil -> Select all the Components ->Apply the changes.

Then go to System->Preferences->Keyboard Input Methods 

Goto Input Method Tab , Select an Input method and then choose Tamil -> Tamil-phonetic and click Add

Enable Show icon on System tray 

then your preferred shortcut keys .

Choose Tamil from the keyboard icon in the notification area

and now you can type தமிழ் (Tamil) !!

நண்றி வணக்கம் !

 

Post you comments and Suggestions in the section below .


Serving Servlets !

When staring web developement now a days many people  start with PHP , Ruby on Rails , or something like that , but there was a Time when Servlets were King .

Servlets are still very Prominent and are also very powerful, and sometimes better than any other web development platform.

To get started with servlets using just Tomcat is very easy , but using Eclipse along with it Required a small bit of effort .

I spent 20 minutes on learning how to configure Eclipse to work with Tomcat 7

So here is a Tutorial for the same .

So Lets get Started…..

The Downloads

2 Things have to be downloaded

  1.  Eclipse IDE for Java EE Developers
  2. Apache Tomcat 7

The Process

I am writing this tutorial for Linux but the concept is the same for Windows and Mac .

After Downloading

Extract Eclipse and tomcat into a folder

After Extracting Eclipse ,

Run Eclipse

open Window->Preferences 

Choose Server->Runtime Environments

Click Add 

Choose Apache Tomcat v7.0

Click Next

Choose the location where Tomcat was extracted 

Click Finish

Now the Server has been successfully added .

The Project

Create a new Dynamic Web Project

After Creating the project

Right click on the project  select New->Servlet

Now you can create your Servlet and run it in eclipse with Tomcat ,  so what are you waiting for  get coding!!


Learning to code Win32 Native apps

I have been trying to learn how to write native win32 apps for sometime , I don’t know how this happened but I never came across these most obvious Websites that I should have checked out .

Oh well its better late than never as they say .

http://msdn.microsoft.com/en-us/ff380143

http://msdn.microsoft.com/en-us/visualc/bb496952.aspx


How-To Create A Cool Html Page to link to Web Apps in 10 minutes

image

When Google Chrome Rolled out it added the new feature of creating application shortcuts , but you had to have

different shortcuts for different apps like Gmail, Calendar , Facebook … etc . So I created a HTML page using which I can Link to other Apps.

Creating just a HTML Page is very easy ,but I wanted more than Just 4 links that I can click, I needed Animated effects and Icons , so I made it using JQuery .

Click Here to check out the Demo .

Read the rest of this entry »