How to Create a Twitter Like Retweet Links
Posted: September 3, 2011 Filed under: browser, Internet, Original Article, Techno irrelevency ., Tutorial, Web 2.0 | Tags: css, html, internet, javascript, jquery, tutorial, twitter, web, webapps Leave a commentTwitter 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>
⊥
<em>Retweet</em>
</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
FLEX ible Builder !
Posted: March 20, 2011 Filed under: browser, Flash, Techno irrelevency . | Tags: 4.0, action, actionscript, builder, c++, calculator, designing, flash, flex, java, javascript, jquery, MxML, open, opensource, resume, script, sdk, source, Symposium, web Leave a commentI 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 .
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 )
Being a guy who Likes Open Source stuff , I have made the source code available for free.
Just Right Click –> View Source
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 .
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
Posted: January 15, 2011 Filed under: How-To, Uncategorized | Tags: color, colour, generator, javascript, jquery, random Leave a commentThe 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
Posted: September 10, 2010 Filed under: browser, Chrome/chromium, How-To, Internet, Original Article, Techno irrelevency ., Tutorial, Web 2.0 | Tags: apps, calender, chrome, css, facebook, gmail, google, html, javascript, jquery, tutorial, web, webapps, wordpress 2 Comments
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 .
Gautam's β∟Ω₲ /Beta.log/ 