A simple jQuery effect for filling color over text. There is nothing much to do for this. Just create a UL LI menu, and add one more menu lable in-front of the normal label. Make sure that the alignments of both labels are in same line. And the second thing is to make the width of the top menu label to 0px; so it won’t display at the normal view. Do some css tricks to hide and align the labels inside the LI element. First Label color is Yellow which turns as invisible on normal view, now we can clearly visible the 2^nd menu label.

Demo

HTML

<ul id="mover_menu">
	<li><span class="hitem">Home</span><span class="item">Home</span></li>
	<li><span class="hitem">Portfolio</span><span class="item">Portfolio</span></li>
	<li><span class="hitem">Gallery</span><span class="item">Gallery</span></li>
	<li><span class="hitem">About</span><span class="item">About</span></li>
	<li><span class="hitem">Privacy</span><span class="item">Privacy</span></li>
</ul>

CSS

#mover_menu li{
		margin-right: 10px;
		float: left;
		list-style: none;
		letter-spacing: 0.5px;
		cursor: pointer;
	}

	#mover_menu li span.item {
		color: gray;
		margin: 10px;
		overflow: hidden;
		display: block;
	}

	#mover_menu li span.hitem {
		color: yellow;
		margin: 10px;
		overflow: hidden;
		display: block;
		position: absolute;
		width: 0;
	}

And the final part is to write jQuery Script, assign mouseover event to LI and find the hover items object then apply animation properties. ie Animate the width 0 to span width of .item, so we will get the exact width of the current hover item. And on mouseout event set the width back to 0. The span.hitem ‘s overflow hidden property will help us to show the filling effect.

jQuery

	$(document).ready(function() {

		$('#mover_menu li').mouseover(function(){

			$(this).find('span.hitem').animate({'width':  $(this).find('span.item').outerWidth()}, { queue: false, duration: 600})

		}).mouseout(function(){

			$(this).find('span.hitem').animate({'width': '0'}, { queue: false, duration: 600})

		});
	});

I have tested it in IE 7 but some left padding need to be fixed, and perfectly working in all other browsers such as FF4, Chorme, Safari.

View Demo

HTML

<div id="leftBox">
	<div>GREEN</div>
	<div>BLUE</div>
	<div>RED</div>
</div>

<div id="rightBox">
	<div>GREEN</div>
	<div>BLUE</div>
	<div>RED</div>
	<div>GREEN</div>
	<div>BLUE</div>
	<div>RED</div>
	<div>GREEN</div>
	<div>BLUE</div>
	<div>RED</div>
	<div>GREEN</div>
</div>

jQuery

$(document).ready(function() {
	var main = $('#rightBox div').clone(true);
	$("div#leftBox div").mouseover(function(){

		$("div#rightBox ."+$(this).attr('class')).each(function() {
			$("div#rightBox").prepend($(this));
		});

	}).mouseout(function() {
		$('#rightBox').empty().append(main);
	});
});

Hint
First we will attach mouse over event to the left div elements and select the class name of current item. and store the right div item to variable ‘main’ to restore original order. On each mouse over parse the right div with current left items class name, and add each item as first child of the right div.

Step 1:
Attach events for Focus and Blur to the text filed,

$('input[type=text]').focus(function() {
		// code for focus event
});

Step 2:
Insert if condition check the value of the text field is ‘Search Content’, then clear the text field buy using $(this).val('');

$('input[type=text]').focus(function() {
		if($(this).val() == 'Search Content') $(this).val('');
});

Step 3:
Attach Event for the blur, and add ‘Search Content’ to the text filed if the value is empty.

	$('input[type=text]').focus(function() {
		if($(this).val() == 'Search Content') $(this).val('');
	}).blur(function() {
		if( $(this).val() == '') $(this).val('Search Content');
	});

Step 4:
Wrap everything into the ready state event. So the final code looks like

$(document).ready(function(){

	$('input[type=text]').focus(function() {
		if($(this).val() == 'Search Content') $(this).val('');
	}).blur(function() {
		if( $(this).val() == '') $(this).val('Search Content');
	});
});

I’m very much curious about the flow/working of the tool, so  I did MouseOver Auto Scroller Menu Using jQuery and CSS in  Here you find the codes in JsFiddle. The screens gives you the steps which I followed.

Editor Window

Choosing JavaScript libs

Adding external resource files

The Editor View

Result

Hope you would enjoy this tool.

View Demo Download Source

JQuery

<script src="jquery.backstretch.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $.backstretch("http://your/image/path");
});
</script>

You can download the plugin files here

jQuery

$(document).ready(function(){

    // Appedning the overlay div
    $('body').append('<div id="fadeOverlay" style="opacity:0.80;display:none;position:fixed;left:0;top:0;width:100%;height:100%;z-index:9999;background:#000;"></div>');
    // Apply fadeIn animation for the smoothing effect.
    $('#fadeOverlay').css({'filter' : 'alpha(opacity=80)'}).fadeIn();
    // Remove the overlay div when clicking on the fade in area.
    $('#fadeOverlay').click(function() {
        $(this).fadeOut("slow", function() {$(this).remove();});
    });

});

View Demo Download Source

CSS

<style>
body{font: normal normal normal 15px/normal arial, sans-serif;margin:0 auto;}
#container{
	width:250px; /* Width and Height you can change */
	height:108px; /* Height of the menu container, 4 li elements, each li have 27px height so total 108*/
	padding:10px;
	border:1px solid #ccc;
	border-radius : 5px;
	-moz-border-radius : 5px;
	-webkit-border-radius : 5px;
	background:#CCC;
	font-family: sans-serif, Verdana, Arial;
	margin:0 auto;
}
#menu_holder{
	margin:0;
	padding:0;
	background:#FFF;
	overflow:hidden; /* make the overflow as hidden, like a mask layer*/
	height:108px; /* Height of the menu holder, same as the container*/
	position:fixed;
	width:250px;
}
#slider {
	list-style-type:none;
	margin:0;
	padding:0;
	position:absolute;
	width:250px;
}
#slider li{
	background:#0FF;
	padding:3px;
	border-bottom:1px solid #262626;
	background : #000;
	color:#92B3DE;
	text-align:center;
}
#slider li:hover{
	color:#FFF;
	background:#2A2A2A;
	cursor:pointer;
}
</style>

HTML

The Menu holder contains all the menu items. We set the holder height as a fixed(but you can change) , from my example I set it as 108px so I can accommodate 4 menus in the menu holder. Each menu having 27px height and total 27×5 = 108. If you wanna include more menus inside the holder just calculate the height with your li’s height.  Set the menu holder div’s overflow property as hidden, so that if the menu height increases then the rest of the entries will not shown, that is the logic behind. By moving mouse over to the menu holder the slider div’s top value will increase and decrease by the up/down mouse movement.  The menu holder will act as a mask layer over the UL LI. So it smoothly slide inside the menu_holder div

<div id="container">
    <div id="menu_holder">
        <ul id="slider">
            <li>Menu Content 1</li>
            <li>Menu Content 2</li>
            <li>Menu Content 3</li>
            <li>Menu Content 4</li>
            <li>Menu Content 5</li>
            <li>Menu Content 6</li>
            <li>Menu Content 7</li>
            <li>Menu Content 8</li>
            <li>Menu Content 9</li>
            <li>Menu Content 10</li>
            <li>Menu Content 11</li>
        </ul>
    </div>
</div>

Then you need jQuery lib file and jQuery easing plugin file. Download the easing plugin from here. The easing plug-in is optional, if you don’t want to use the easing effect try the commented code inside the script section.

JavaScript Files

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="jquery.easing.1.3.js"></script>

jQuery

Here is the complete script for the slider function. We trigger the mouse event for the menu holder div, and calculate the offset Y of the menu holder from the current mouse Y. And finally apply the values into the equation.

$(document).ready(function() {
	// hover color change effect
	$("#slider li").hover(function() {
		$(this).animate({opacity: 0.90}, 100, function(){
			$(this).animate({opacity: 1}, 0);
		} );
	});
	// Trigger mouse move event over the 'menu_holder'.
	$("#menu_holder").mousemove(function(e) {
		// Enable scroll function only when the height of the 'slider' or menu is greater than the 'menu_holder'.
		if($(this).height() < $("#slider").height()) {
			// Calculate the distance value from the 'menu_holder' y pos and page Y pos.
			var distance = e.pageY - $(this).offset().top;
			// Get the percentage value with respect to the Mouse Y on the 'menu_holder'.
			var percentage = distance / $(this).height();
			// Calculate the new Y position of the 'slider'.
			var targetY = -Math.round(($("#slider").height() - $(this).height()) * percentage);
			// With jQuery easing funtion from easing plugin.
			$('#slider').animate({top: [targetY+"px", "easeOutCirc"]}, { queue:false, duration:200 });
			// Without easeing function. by default jQuery have 'swing'.
			//$('#slider').animate({top: [targetY+"px", "easeOutCirc"]}, { queue:false, duration:200 });
		}
	});
});

Reference Links

1. XPath Syntax

2. XML Path Language (XPath)

3. XPath Examples .NET Framework 4

4. Introduction to using XPath in JavaScript

5. An XPath implementation for ActionScript 3.0.

6. PHP XPath Tutorial

7. jQuery XPath Selectors

View Demo

HTML

<div id="notification" style="display: none;">
 Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it.
 <span class="dismiss"><a title="dismiss this notification">x</a></span>
</div>

CSS

#notification {
    font-family:Arial,Helvetica,sans-serif;
    position:fixed;
    top:0px;
    left:0px;
    width:100%;
    z-index:105;
    text-align:left;
    font-weight:normal;
    font-size:100%;
    color:white;
    background-color:#000;
    padding:5px;
}
#notification span.dismiss {
    border:2px solid #FFF;
    padding:0 5px;
    cursor:pointer;
    float:right;
    margin-right:10px;
}
#notification a {
    color:white;
    text-decoration:none;
    font-weight:bold
}

jQuery

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
$(document).ready(function() {
    $("#notification").fadeIn("slow");
    $(".dismiss").click(function(){
	$("#notification").fadeOut("slow");
    });
});

JavaScript

var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'externalScriptFile.js';
document.getElementsByTagName("head")[0].appendChild(script);

Use the above JavaScript code inside your body or .js file. The script.src is the file name which you want to load and the script will append to the head tag. If you have to load more files like this, just copy paste this into a function body.

JavaScript

function include(jsFile) {
	var script = document.createElement('script');
	script.type = 'text/javascript';
	script.src = jsFile;
	document.getElementsByTagName("head")[0].appendChild(script);
}
include('externalScriptFile1.js');
include('externalScriptFile2.js');

Well you are done with that, now just read something about the script tag in HTML. The script tag is used to load or run scripts HTML, we use mainly 3 attributes for the script. No need to use the commenting(<!– //–>) tags inside the script tag, that is for the first generation browsers to prevent scripts from showing up as text.

Script tag to load the script file

<script src="filename.js" type="text/javascript"></script>

You should not write any codes inside the script tags when its use to load any file(s). Because if the src is present the script tag will considered as a load process. So any script inside that will not execute. But you can use the script with-out src will help you to execute the script.
Script tag to execute the script

<script type="text/javascript">document.write("Hello World!!!");</script>

Attributes

src : This attribute specifies the location of an external script.
type : This attribute specifies the scripting language of the element’s contents and overrides
the default scripting language. The scripting language is specified as a content type
(e.g., “text/javascript”). Authors must supply a value for this attribute.
There is no default value for this attribute.
defer : When set, this boolean attribute provides a hint to the user agent that the script
is not going to generate any document content (e.g., no “document.write” in javascript)
and thus, the user agent can continue parsing and rendering.
language : This attribute specifies the scripting language of the contents of this element.
Its value is an identifier for the language, but since these identifiers are
not standard, this attribute has been deprecated in favor of type.
Reference: http://www.w3.org/TR/REC-html40/interact/scripts.html