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

HTML

<div id="accordion">
    <div>
        <h6>Home</h6>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
    <div>
        <h6>Demos and Downloads</h6>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
    <div>
        <h6>About Us</h6>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
    <div>
        <h6>Contact Us</h6>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
</div>

CSS

#accordion div{
	font: 12px Arial, Verdana, sans-serif;
	color:#424242;
	background: #fff;
	padding: 10px;
	width: 500px;
	overflow: hidden;
	height:25px;

}
#accordion div p{
	padding:0 10px;
}
#accordion div h6{
	font: 12px Arial, Verdana, sans-serif;
	text-shadow: 1px 1px 1px #d4d4d4;
	color:#424242;
	cursor:pointer;
	margin:0;
	padding:10px 10px;
	background: #8f8f8f;
	background: -moz-linear-gradient( top, #cecece, #8f8f8f); /* FF, Flock */
	background: -webkit-gradient(linear, left top, left bottom, from(#cecece), to(#8f8f8f)); /* Safari, Chrome */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffcecece, endColorstr=#ff8f8f8f); /* IE 5.5 - IE 7 */
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffcecece, endColorstr=#f8f8f8f)";   /* IE 8 */
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	font-weight:bold;
}
#accordion div:hover {
	height:100px;
}
#accordion div:hover h6 {
	color:#424242;
	font-weight:bold;
	background: #2288dd;
	background: -moz-linear-gradient( top, #6bb2ff, #2288dd);
	background: -webkit-gradient(linear, left top, left bottom, from(#6bb2ff), to(#2288dd));
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff6bb2ff, endColorstr=#ff2288dd);
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff6bb2ff, endColorstr=#ff2288dd)";
	color:#FFF;
	text-shadow: 1px 1px 1px #2288dd;
}

Hope you would understand the logic used in css, just drop yours comments at the bottom.

Thanks!!!

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

View Demo

You can use the CSS Properties as shown below.

CSS

#lowQualityImg { 
 image-rendering: -moz-crisp-edges;   /* Firefox */
 -ms-interpolation-mode: nearest-neighbor;   /* IE */
 }
 #heighQualityImg{
 image-rendering: optimizeQuality;  /* Firefox 3.6+; default behavior is identical, no need to specify */
 -ms-interpolation-mode: bicubic;   /* Internet Explorer 7.0; default in IE8+ */
 }

Currently auto and optimizeQuality are equal by default, both result in bilinear resampling.
Currently optimizeSpeed and -moz-crisp-edges are equal, both result in nearest neighbor resampling.

Browser compatibility

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

• Multicolumn Layout
• Rounded Corners
• Web Fonts
• Text Wrapping
• Text Stroke
• Transitions
• 2d Transforms
• Animations
• Gradients
• Selectors

And you can find other HTML5 resources

• HTML5 Readiness – visual timeline of HTML5 feature support.
• Dive into HTML5 – learn HTML5 and have fun reading a book at the same time.
• Modernizr – JavaScript library for feature detection and control fallback cases of HTML5.

Download View Demo

Here is the source code and descriptions.

HTML

<div id="simpleGallery">
 <img src="Simple_Image_Gallery_In_jQuery/01.jpg" title="SNGCE#1 Administrative Block "/>
 <img src="Simple_Image_Gallery_In_jQuery/02.jpg" title="Image #2"/>
 <img src="Simple_Image_Gallery_In_jQuery/03.jpg" title="Image #3"/>
 <img src="Simple_Image_Gallery_In_jQuery/04.jpg" title="Image #4"/>
 <img src="Simple_Image_Gallery_In_jQuery/05.jpg" title="Image #5"/>
 <img src="Simple_Image_Gallery_In_jQuery/06.jpg" title="SNGCE#1 Renjith, Kauma, Midhun, Eldose, CP, ES and Gijo"/>
 <img src="Simple_Image_Gallery_In_jQuery/07.jpg" title="Image #7"/>
 <img src="Simple_Image_Gallery_In_jQuery/08.jpg" title="Image #8"/>
 <img src="Simple_Image_Gallery_In_jQuery/09.jpg" title="SNGCE#1 Arun CP and Midhun Devasia"/>
 <img src="Simple_Image_Gallery_In_jQuery/10.jpg" title="Image #10"/>
 <img src="Simple_Image_Gallery_In_jQuery/11.jpg" title="Image #11"/>
 <img src="Simple_Image_Gallery_In_jQuery/12.jpg" title="Image #12"/>
 <img src="Simple_Image_Gallery_In_jQuery/13.jpg" title="Image #13"/>
 <img src="Simple_Image_Gallery_In_jQuery/14.jpg" title="Image #14"/>
 <img src="Simple_Image_Gallery_In_jQuery/15.jpg" title="Image #15"/>
 <div id="image-links"></div>
 <div id="image-tooltip"></div>
</div>

CSS

#simpleGallery {
	border:1px solid #d4d4d4;
	padding:5px;
	width:720px;
	height:540px;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	border-radius:4px;
	margin:0 auto;
}
#simpleGallery img {
	z-index:0;
	display:inline;
	position:absolute;
}
.active-image{z-index:1000!important;}
#image-links, #image-tooltip{
	font-family:tahoma;
	font-size:12px;
	color:white;
	position:absolute;
	z-index:10001;
	background-color:black;
	line-height:15px;
}
#image-links a {text-decoration:none;}
#image-tooltip, #image-links, .transparent{
	filter:alpha(opacity=60); /*for IE*/
	-moz-opacity: 0.6; /*for ff*/
	opacity: 0.6;
	z-index:10001!important;
}
#image-tooltip{
	padding:5px;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	border-radius:4px;
	margin-top:10px;
}

jQuery

$(document).ready(function(){
	// call the jquery simple gallery plugin function
	$("div#simpleGallery img").simpleGallery();
});
	// Simplte Gallery jQuery plug-in
(function($){
	$.fn.simpleGallery = function(){
		var i = 0;
		// get the navigation links
		$links = $("div#image-links");
		// oarse each item in the #simpleGallery
		this.each(function(){
			i++;
			$this = $(this);
			// set an id for each image elements
			$this.attr("id", "gotoImage"+i);
			//  Create navigation links from the image title attribute
			$links.append('<div><a href="#gotoImage'+i+'" style="color:white;padding:4px">#'+ i +'</a><br/><br/></div>');
		});
		var g = $("div#simpleGallery");
		// get the first img object
		var prev = $("div#simpleGallery :first-child");
		var toolTipDiv = $("#image-tooltip");
		toolTipDiv.html($(prev).attr("title"));
		toolTipDiv.css({"margin-left":(g.width() - $("#image-tooltip").width())/2});
		// set the position of the navigation at the bottom of the gallery container.
		$links.css({"text-align":"right","margin-top": g.height() - $links.height(), "margin-left": g.width() - $links.width()})
		// set the hover event of the links
		$("a.image-link").mouseover(function() {
		prev.removeClass();
			var imageId = $(this).attr("href");
			$(imageId).addClass("active-image");
			prev = $(imageId);
			toolTipDiv.html(prev.attr("title"));
			toolTipDiv.animate({opacity: "0"}, "fast");
			toolTipDiv.css({"margin-left":(g.width() - $("#image-tooltip").width())/2});
			toolTipDiv.stop(true, true).animate({opacity: ".7"}, "slow");
		}).mouseout(function(){
		});
	}
})(jQuery);

Download View Demo