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

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 »