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.

var x = 0.1, y = 0.2;
alert(" x + y = "+ (x+y)); // x + y = 0.30000000000000004

Here the sum of two numbers is tested to see if it’s equal to 0.3. This will work for 0.05 and 0.25 as well as 0.15 and 0.15.

var x = 0.05, y = 0.25;
alert(" x + y = "+ (x+y)); // x + y = 0.3

Therefore you should never test for specific floating-point values. The rounding errors are a side effects of the way floating-points arithmetic is done in IEEE 754.

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.

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");
    });
});

if (/iPad|iPod|iPhone/.test(navigator.userAgent)){
	// do ur stuffs for apple
}else{
	// do ur stuffs for other browsers
}

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

View Demo

jQuery files

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

Simple datepicker

$("#datepicker").datepicker();

Disable all dates till today

// get the current date
var date = new Date();
var m = date.getMonth(), d = date.getDate(), y = date.getFullYear();

// Disable all dates till today
$('#datepicker2').datepicker({
		minDate: new Date(y, m, d),
		dateFormat: 'mm-dd-yy',
});

Disable all dates from today

// Disable all dates from today
$('#datepicker3').datepicker({
		maxDate: new Date(y, m, d),
		dateFormat: 'mm-dd-yy',
});

Disable all weekends

// Disable all weekends
$('#datepicker4').datepicker({
		dateFormat: 'mm-dd-yy',
		beforeShowDay: $.datepicker.noWeekends
});

Disable a list of dates

// Disable a list of dates
var disabledDays = ["9-21-2010", "9-24-2010", "9-27-2010", "9-28-2010", "9-3-2010", "9-17-2010", "9-2-2010", "9-3-2010", "9-4-2010", "9-5-2010"];
function disableAllTheseDays(date) {
	var m = date.getMonth(), d = date.getDate(), y = date.getFullYear();
	for (i = 0; i < disabledDays.length; i++) {
		if($.inArray((m+1) + '-' + d + '-' + y,disabledDays) != -1) {
			return [false];
		}
	}
	return [true];
}
$('#datepicker5').datepicker({
		dateFormat: 'mm-dd-yy',
		beforeShowDay: disableAllTheseDays
});

Enable a list of dates

// Enable a list of dates
var enabledDays = ["9-21-2010", "9-24-2010", "9-27-2010", "9-28-2010", "9-3-2010", "9-17-2010", "9-2-2010", "9-3-2010", "9-4-2010", "9-5-2010"];
function enableAllTheseDays(date) {
	var m = date.getMonth(), d = date.getDate(), y = date.getFullYear();
	for (i = 0; i < enabledDays.length; i++) {
		if($.inArray((m+1) + '-' + d + '-' + y,enabledDays) != -1) {
			return [true];
		}
	}
	return [false];
}
$('#datepicker6').datepicker({
		dateFormat: 'mm-dd-yy',
		beforeShowDay: enableAllTheseDays
});

Disable a range of dates

// Disable a range of dates
var disabledDaysRange = [["9-1-2010 to 9-6-2010", "9-10-2010 to 9-15-2010", "10-27-2010 to 10-30-2010"], '9-17-2010'];
function disableRangeOfDays(d) {
	for(var i = 0; i < disabledDaysRange.length; i++) {
		if($.isArray(disabledDaysRange[i])) {
			for(var j = 0; j < disabledDaysRange[i].length; j++) {
				var r = disabledDaysRange[i][j].split(" to ");
				r[0] = r[0].split("-");
				r[1] = r[1].split("-");
				if(new Date(r[0][2], (r[0][0]-1), r[0][1]) <= d && d <= new Date(r[1][2], (r[1][0]-1), r[1][1])) {
					return [false];
				}
			}
		}else{
			if(((d.getMonth()+1) + '-' + d.getDate() + '-' + d.getFullYear()) == disabledDaysRange[i]) {
				return [false];
			}
		}
	}
	return [true];
}
$('#datepicker7').datepicker({
		dateFormat: 'mm-dd-yy',
		beforeShowDay: disableRangeOfDays
});

Enable a range of dates

// Enable a range of dates
var disabledDaysRange = [["9-1-2010 to 9-6-2010", "9-10-2010 to 9-15-2010", "10-27-2010 to 10-30-2010"], '9-17-2010'];
function disableRangeOfDays(d) {
	for(var i = 0; i < disabledDaysRange.length; i++) {
		if($.isArray(disabledDaysRange[i])) {
			for(var j = 0; j < disabledDaysRange[i].length; j++) {
				var r = disabledDaysRange[i][j].split(" to ");
				r[0] = r[0].split("-");
				r[1] = r[1].split("-");
				if(new Date(r[0][2], (r[0][0]-1), r[0][1]) <= d && d <= new Date(r[1][2], (r[1][0]-1), r[1][1])) {
					return [true];
				}
			}
		}else{
			if(((d.getMonth()+1) + '-' + d.getDate() + '-' + d.getFullYear()) == disabledDaysRange[i]) {
				return [true];
			}
		}
	}
	return [false];
}

$('#datepicker8').datepicker({
		dateFormat: 'mm-dd-yy',
		beforeShowDay: disableRangeOfDays
});

Enable only Friday

// Enable only Friday
$("#datepicker9").datepicker({
	dateFormat: 'dd-mm-yy',
	minDate: 1,
	beforeShowDay: enableFirday
});
// Custom function to enable friday only in jquery calender
function enableFirday(date) {
	var day = date.getDay();
	return [(day == 5), ''];
}

Note: All the above function works well with the dateformat mm-dd-yy. But you can change the values in the function mainly in this line (m+1) + ‘-’ + d + ‘-’ + y. Replace the – with your char usage the same dateformat in all the arrays and functions. Have fun