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


Firing up Ubuntu with the 4th Fox

Firefox 4 (stable) was released yesterday (March 22 , 2011), So I decided to write an article on how to install firefox 4 on Ubuntu the easy way.

Now if you goto mozilla.com to download the latest version on linux you prompted to download a file called  firefox-4.0.tar.bz2

but many people don’t know how install this file , well the easier method is to download the latest version from Firefox stable PPA

but before you do this make sure to uninstall any beta versions.

Open terminal and type the following commands
First thing to do is add the Firefox stable PPA

sudo add-apt-repository ppa:mozillateam/firefox-stable

then before we can install firefox we need to update the PPA

sudo apt-get update

Finally we can install Firefox

sudo apt-get install firefox

And thats it , firefox will now download and install itself , Simple and Easy !


FLEX ible Builder !

I recently attended a 2 Symposiums at some colleges whose name I don’t want to mention, I was a participant in Web Designing Competition in both . In the first one , I really did not plan , I just made a mash up with jQuery , but in the Second one, I put some effort into planning and I designed a really cool website with jQuery UI , I deserved  at least a 2nd  prize , but my tough luck would have it , I didn’t win anything !

I noticed then winners of both the competitions were students who created something very basic with Flash , My creating was comparatively complex and had more features , but Students who did Flash got real preference.

I set out to Solve this , I Applied to the program that adobe was offering Flex Builder 4 for free to students ,and I got a reply with a free serial Key .

AdobeEmail

Then I set out to Learn Flash under flex SDK 4.1.

This was a bit more difficult than I Thought , but I Finally managed to Understand MxML and Action Script .

Armed with this Knowledge I made a Simple Calculator (http://j.mp/ewBMmM )

UseLessCalc1

Being a guy who Likes Open Source stuff , I have made the source code available for free.

Just Right Click  –> View Source

Calc3

In view source mode you get to see the source code and also to download a Zip version .

A nice Feature that is easily built with Flex Builder .

image

I was surprised to Learn How simple Action Script really is .

Action Script ,JavaScript ,Java , C++ … all these languages are like cousins , You Know one , the other is really similar .

MxML on the other hand is pure XML , but its very easy with Autocomplete Enabled.

So the First Step of My Flash Learning Process is officially complete.

Now I can officially add this to my Resume` .


Firefox 4 and Firefox 3 Running Simultaneously

I found a way to run Firefox 4 Beta and Firefox 3 simultaneously .

Now you may ask why … well the answer is that I wanted to check out Firefox 4 but at the same time keep working with Firefox 3 because of the add-ons FF4 & 3


The new and redesigned WebApplinkPage

WebAppLinks 

image


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 »


How to Make Chromium Portable , Partially !

I have been using Chromium web browser for some time now , and I must say it is really good , and most of the time its pretty stable , but one thing I really hate is that it saves my user profile at

C:\Users\<Username>\AppData\Local\

Now to solve this I tried many techniques , and I found out that the most simplest and easiest solution was the best , so here it is .

Read the rest of this entry »


Downloading Chromium

I recently decided to get rid of branding  in my current favorite web browser ,Google chrome ….. so I visited the chromium project website .Nowhere on the page could i find an option to download chromium binaries , all that was available was source code and instructions on how to build it for different platforms .

Then after some 15 mins of searching i found this, the list of  latest chromium snapshots .

so to download the latest build open the folder with the highest number , and download the file called

“mini_installer.exe”

after downloading the file its pretty simple , just install it and you are ready to Go!

For those who don’t already Know Chromium browser is the same as Google chrome but without the Google branding , Also Chromium is Open Source .

Be advised the latest versions of chromium are beta version and they might be unstable .


Update:New Snapshots are released Almost daily , and there is no auto updater present in chromium, so make sure you manually update as often as possible.


Chrome Or Chromium The choice

I’ve Always been a fan of google chrome ever since it released , but i could never let go of my Firefox fixation.

Chrome Vs Chromium

The main reason Firefox was so good was because of the extensions .

When chrome got extensions I immediately switched google chrome and put Firefox as secondary .

But there was still few things that bothered me about chrome ,

1.GoogleUpdate.exe

2.You can’t install chrome where ever you want , it always installs in “C:\Users\%UserName%\AppData\Local\”

The first one didn’t bother me much cause I could easily remove it ,

but the second one really bothered me .

So i switched to Portable Google chrome .

Then I stumble across this article , Now I am rethinking google chrome usage !

Now its up to you to decide whether to use Google chrome or not .

Update : I’ve stopped using Chrome and switched to Chromium.