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

The most Impressive doodle by Google

This the most amazing use of Web technologies by Google and the best part is that this animation is not FLASH . I wish they would release the Source Code to this .

EDIT :

The Doodle was not an Animated GIF , but instead it was a Large PNG sprite consisting of each individual frame  and some JavaScript and CSS Magic , which makes it Even More Impressive !!

http://www.google.com/logos/2011/graham11-hp-sprite.pngEDIT 2 :

The Animated Doodle was created by Cartoonist Ryan Woodward , and here is the official Video .


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` .


Random Color for Web Page Background

The simplest way to set a random color as a background is to generate a random color hash and set it using Css

So here is the code for that .

<html>
    <head>
<script type="text/javascript">// <![CDATA[
src</span>=”https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js”>
// ]]></script>
    <script>
        $(document).ready(function()
        {
            $(‘body’).css(‘background-color’,RandomColorHash());
        });
        function RandomColorHash()
        {
            var list=[ '0',  '1',  '2',  '3',  '4',  '5',  '6', '7',  '8', '9',  'A',  'B',  'C',  'D',  'E',  'F' ],Color=’#';
            for(var i=0;i<6;i++)
            {
                Color+=list[
                            Math.floor(
                                        Math.random()*list.length
                                        )
                            ];
            }
            return Color;
        }
    </script>
    </head>
    <body>
    </body>
</html>

The above code uses jQuery but this can also be done in JavaScript.


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 »