Here is the line of code you can use to add a class or ID to an element in your webpage when a user hovers over it (for example: if you want to add a class called “active” to an li element with a class called “top-nav” in the div called “menu” when a user hovers over it):
<script>
$('#menu li').hover (
function(){ $('.top-nav').addClass('active')},
function() {$('.top-nav').removeClass('active')}
)
</script>
Here are the codes I use to create a custom Twitter feed for my websites which includes retweets.
First you will want to insert the Javascript that makes the whole thing work. Copy and paste this line of code into your website, preferably just before the closing <body> tag:
<script src="http://twitter.com/javascripts/blogger.js" type="text/javascript"></script> <script src="http://api.twitter.com/1/statuses/user_timeline.json?screen_name=thelibzter&include_rts=1&callback=twitterCallback2&count=6" type="text/javascript"></script>
Replace the words THELIBZTER in the above example with your own Twitter username. Change the number 4 after “count” to the number of tweets that you want to display.
Next, copy and paste the following html into the web page where you want the Twitter widget to display:
<div id="twitter"> <div id="twitter_t"></div> <div id="twitter_m"> <div id="twitter_container"> <ul id="twitter_update_list"></ul> </div> </div> <div id="twitter_b"></div> </div>
And, finally, copy and paste the following CSS into your website’s stylesheet:
#twitter {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
width:430px;
border:1px solid #c9c9c9;
}
#twitter_t {
width:405px;
height: 44px;
background:#c68aeb url(yourimagehere);
color:#fff;
text-shadow:.5px .5px #333;
font-size:18px;
font-family:Candara;
padding-top:20px;
padding-left:25px;
}
#twitter_m {
width: 400px;
padding: 0 15px;
background:#f7effc;
}
#twitter_container {
min-height:45px;
height:auto !important;
height:40px;
padding-bottom:5px;
padding-top:5px;
}
#twitter_update_list {
width: 413px;
padding: 0;
overflow: hidden;
font-family: Georgia;
font-size: 14px;
font-style: italic;
color: #31353d;
line-height: 16px;
font-weight:bold;
margin-left:-13px;
}
#twitter_update_list li {
width: 400px;
list-style: none;
padding:15px;
border-bottom: dotted 1px #ccc;
}
#twitter_update_list li a {
color:#631891;
text-decoration: none;
}
#twitter_update_list li a:hover {
color: #31353d;
}
#twitter_b {
width: 430px;
height: 29px;
background:#c68aeb url(yourimagehere);
}
Of course, you will probably want to edit the CSS codes for your Twitter widget.
And that, my friends, is all it takes to create a custom Twitter widget for your website! 
Have fun, and let me know if you run into any issues.
FURTHER READING:
If you want to remove the time stamp from the tweets in your custom Twitter feed, please check out this post – http://icode4you.net/creating-a-custom-twitter-feed-how-to-remove-the-time-stamp-from-tweets.
Make sure you also check out another post I wrote that has the styles for several different custom Twitter widgets that are all ready to incorporate into your website!
And here is a link to a post that provides the codes and instructions on how to create a Twitter feed of the search results for a certain term.
Here is the simple code I use to create a Twitter feed which includes avatars for a website:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Twitter feed with avatars</title>
<style type="text/css">
body {
background: #333333;
}
.twtr-widget {
float: left;
width: 300px;
margin: 50px 0 0 80px;
padding: 0 0 15px;
background: #fafafa;
/*** cross browser box shadow ***/
-moz-box-shadow: 0 0 2px #fff;
-webkit-box-shadow: 0 0 2px #fff;
-ms-filter: "progid:DXImageTransform.Microsoft.Glow(color=#ffffff,strength=3)";
filter:
progid:DXImageTransform.Microsoft.Shadow(color=#ffffff,direction=0,strength=3)
progid:DXImageTransform.Microsoft.Shadow(color=#ffffff,direction=90,strength=3)
progid:DXImageTransform.Microsoft.Shadow
(color=#ffffff,direction=180,strength=3)
progid:DXImageTransform.Microsoft.Shadow
(color=#ffffff,direction=270,strength=3);
box-shadow: 0 0 2px #fff;
/*** kind of cross browser rounded corner ***/
-webkit-border-radius: 3px;
-khtml-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.twtr-hd {
/*** cross browser rgba ***/
background-color: transparent;
background-color: rgba(255,255,255,0.3);
filter:progid:DXImageTransform.Microsoft.gradient
(startColorstr=#30ffffff,endColorstr=#30ffffff);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient
(startColorstr=#30ffffff,endColorstr=#30ffffff)";
}
.twtr-bd {}
.twtr-widget .twtr-bd .twtr-tweet {
margin: 5px 0 0;
padding: 0 0 5px;
border-bottom: 1px solid #cecece;
}
.twtr-tweet:before {
display: block;
float: left;
margin: -5px 0 0 5px;
font-size: 50px; /* let's make it a big quote! */
color: #bababa;
text-shadow: 0 1px 1px #909090;
font-family: "times new roman", serif;
}
.twtr-ft { display: none; }
</style>
</head>
<body>
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<!-- first box -->
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 4,
interval: 6000,
width: 300,
height: 300,
theme: {
shell: {
background: 'transparent',
color: '#333'
},
tweets: {
background: 'transparent',
color: '#333',
links: '#c10000'
}
},
features: {
scrollbar: false,
loop: false,
live: false,
hashtags: true,
timestamp: true,
avatars: true,
behavior: 'all'
}
}).render().setUser('thelibzter').start();
</script>
You can see a working example of this Twitter feed at http://icode4you.net/wp-content/uploads/2012/02/twitterfeed_with_avatars.html.
Here is the simple Javascript code that I use to auto fill one field of a form with the values of one or more other fields.
Copy and paste this line to the <head> of your web page:
<script type="text/javascript" charset="utf-8">
function updateUsername(){
first = document.getElementById("first").value;
last = document.getElementById("last").value; document.getElementById("username").value = first+" "+last;
} </script>
Next, you simply need to add the correct ID to the three fields in your form. Make sure that the IDs correspond correctly to the Javascript code we just pasted into the header.
For example:
<input type="text" name="some_name" value="" id="first" onkeyup="updateUsername();">
<input type="text" name="some_name" value="" id="last" onkeyup="updateUsername();">
<input type="text" name="some_name" value="" id="username">As you can see, you also need to add this line of code to the field or fields whose value(s) you want to fill the third field:
onkeyup="updateUsername();"And that is all that you need to do. Let me know if you have any questions or run into any issues.