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

View Demo

CSS

.menu    {margin: 0 auto;text-align: center;display:block;width: 600px;height: 60px;}
.menu ul {margin:0px;padding:0px;list-style:none;line-height:normal}
.menu li {float:left;margin-left:4px}
.menu a  {
	display: block;
	padding:5px;
	font-weight:normal;
	border:1px solid rgba(0,0,0, 0.05);
	-moz-border-radius: 2px;
	-moz-box-shadow: 0px 0px 2px rgba(0,0,0,0.5);
	-webkit-border-radius: 2px;
	-webkit-box-shadow: 0px 0px 2px rgba(0,0,0,0.5);
	background-color: #749a02;
	color: #FFF;
	text-shadow: 1px 1px 1px rgba(255,255,255,0);
	text-decoration:none;
}

HTML

<div id="menuBase">
 <ul id="main">
 <li><a title="Google.com" href="#">Google.com</a></li>
 <li><a title="Tutorboy.com" href="#">Tutorboy.com</a></li>
 <li><a title="FlashGamesForU.com" href="#">FlashGamesForU.com</a></li>
 <li><a title="Digg.com" href="#">Digg.com</a></li>
 <li><a title="Yahoo.com" href="#">Yahoo.com</a></li>
 </ul>
</div>

jQuery

// Load the jQuery
<script type="text/javascript" src="jquery.min.js"></script>
// wait for document to load
$(document).ready(function(){
 // call the shakymenu plugin function.
 $("div#menuBase ul#main li").shakyMenu();
});

jQuery Plug-in

jQuery plugin script for the shakyMenu(), function will parse all the DOM elements as per the CSS selector specified and activate the hover events for each elements. interval:30,duration:1000,shake:4 are the parameters which used. duration: duration of the shake/vibration, interval: shake period in milliseconds. Here we use the javascript setInterval, setTimeOut and clearInterval properties for the shake control.

// Here is the jQuery plugin code for the shakymenu
(function($){
	$.fn.shakyMenu = function() {
		// Setting the parameters value
		var params = $.extend({interval:30,duration:1000,shake:4}, params);
		// get the root element
		var first = this;
		// parse all the child nodes
		return this.each(function(){
		// assign the current child
		var $this = $(this);
		// set the mouse over action for the child
		$this.hover(function(){
			var t = this;
			// The interval function to make the vibration/shaky effect to the
			// other nodes.
			var I = function(){
				$(first).not(t).stop(true,false).css({position:"relative",
				left:Math.round(Math.random()*params.shake)-((params.shake+1)/2)+"px",
				top:Math.round(Math.random()*params.shake)-((params.shake+1)/2)+"px"});
			};
			// set the interval function as per the params values
			var sI = setInterval(I, params.interval);
			// function definition for the clear interval
			var cI = function(){
			// clear the interval
			clearInterval(sI);
			// and set the child positions position back to the original after the
			// animation(shaky/vibrating)
			$(first).stop(true,false).css({left:"0",top:"0"})
			};
			// set the timeout function to clear the interval function.
			setTimeout(cI, params.duration);
		}, function(){});
		});
	}
})(jQuery);//end of jquery plugin code.

View Demo

HTML

<div id="dojo-slideshow">
 <img src="images/01.jpg" title="Image 1" class="active-image"/>
 <img src="images/02.jpg" title="Image 2"/>
 <img src="images/03.jpg" title="Image 3"/>
 <img src="images/04.jpg" title="Image 4"/>
 <img src="images/05.jpg" title="Image 5"/>
 <img src="images/06.jpg" title="Image 6"/>
 <img src="images/07.jpg" title="Image 7"/>
 <div id="slideshow-desc"></div>
</div>

CSS

<style>
 #dojo-slideshow {
 border:1px solid #d4d4d4;
 padding:5px;
 position:relative;
 width:450px;
 height:300px;
 -moz-border-radius:4px;
 -webkit-border-radius:4px;
 border-radius:4px;

 }
 #dojo-slideshow img {
 z-index:0;
 display:inline;
 position:absolute;

 }
 .active-image{
 z-index:1000!important;
 }
 #slideshow-desc{
 font-family:tahoma;
 font-size:12px;
 color:black;
 position:absolute;
 margin:270px 0 0 0;
 z-index:10001;
 background-color:white;
 width:450px;
 height:25px;
 line-height:25px;
 opacity:.7;
 }
 </style>

Dojo

<script type="text/javascript">
 dojo.require("dojo.NodeList-traverse");
 var count = 0;
 var currentItem = 1;
 dojo.ready(function(){
 count = dojo.query("img", "dojo-slideshow").length;
 setDecription(dojo.query(".active-image").attr("title"))
 setInterval("dojoSlideShow()", 3000);
 });
 function dojoSlideShow(){

 var active = dojo.query(".active-image");
 var next = active.next("img");
 active.removeClass();
 if(next == "") {
 currentItem = 0;
 next = dojo.query("#dojo-slideshow img").first();
 }
 currentItem++;
 next.addClass("active-image");
 setDecription(next.attr("title"));

 }
 function setDecription(title) {
 dojo.byId("slideshow-desc").innerHTML = "(" + currentItem + " of " + count + ") " + title;
 }
 </script>

Include the Dojo Libs

Dojo Js File

<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js" type="text/javascript"></script>

Download View Demo

Download Demo

HTML

<div id="floating">
 <div id="accordionMenu">
 <ul id="accordion">
 <li>
 <a href="#">Recent Posts</a>
 <ul>
 <li><a href="#">Link 1</a></li>
 <li><a href="#">Link 2</a></li>
 <li><a href="#">Link 3</a></li>
 </ul>
 </li>
 <li>
 <a href="#">Archives</a>
 <ul>
 <li><a href="#">Link 4</a></li>
 <li><a href="#">Link 5</a></li>
 <li><a href="#">Link 6</a></li>
 </ul>
 </li>
 </ul>
 </div>
 <div id="closeOpen"></div>
</div>

The above html is the layout of the UL li list. Replace with your content.

CSS

body {padding:0;margin:0;height:2000px;}
#floating {position:absolute;top:150px;font-size:.9em;}
#floating a {color:#FFF;text-decoration:none;}
#accordionMenu {width: 300px;}
#closeOpen {float:right;width:18px;}
#accordion {border:1px #666 solid;background-color:#DDD;margin-top:0;padding:0;float:left;list-style: none;width: 280px;}
#accordion ul {list-style: none;padding:0;display: none;}
#accordion li{cursor: pointer;padding:3px;list-style:none;font-weight:bold;background-color:#36A8FF;}
#accordion li ul li a{font-style:italic;}
#accordion li ul li{border-top:1px #666666 solid;}
#accordion li ul li:hover{background-color:#c0c0c0;}
#accordion li ul {display: none;}
#accordion li.current ul{display:block;}
#accordion .current ul{padding-left:10px;}

HTML Header

<head>
 <script type="text/javascript" src="jquery-latest.min.js"></script>
 <script type="text/javascript" src="jquery.scrollTo-min.js"></script>
 <link type="text/css" rel="stylesheet" href="style.css"/>
</head>

You need to download the latest jQuery and scrollTo plugin.

jQuery Script

<script type="text/javascript">
 var menuIconWidth = 20;
 var topMargin = null;
 var openImage = '<img src="right.png" alt="open" />';
 var closeImage = '<img src="left.png" alt="close" />';
 // floating div id
 var floatingDiv = "#floating";
 // accordion menu div id
 var accordionDiv = "#accordion";

 $(document).ready(function () {
 $("#closeOpen").html(openImage);
 topMargin = parseInt($(floatingDiv).css("top").substring(0,$(floatingDiv).css("top").indexOf("px")))
 $(floatingDiv).css({left: menuIconWidth - $(floatingDiv).width()});
 // for floating menu
 $(floatingDiv).mouseenter(function () {
 // show menu
 $(this).stop().animate({left:  0}, "slow");
 $("#closeOpen").html(closeImage);
 }).mouseleave (function () {
 // hide menu
 $(this).stop().animate({left: menuIconWidth - $(this).width()}, "slow");
 $("#closeOpen").html(openImage);
 });
 // handle the scroll event of the window.
 $(window).scroll(function () {
 // calculate the offset of the page scroll and animate the div for the floating effect.
 var offset = topMargin + $(document).scrollTop() + "px";
 $(floatingDiv).animate({top:offset}, {duration:500, queue:false});
 });

 // for According Menu
 $(accordionDiv + ' > li a').click(function() {
 if($(this).parent().hasClass('current')) {
 $(this).siblings('ul').slideUp(300,function() {
 $(this).parent().removeClass('current');
 $.scrollTo(accordionDiv,300);
 });
 } else {
 $(accordionDiv + ' li.current ul').slideUp(300, function() {
 $(this).parent().removeClass('current');
 });
 $(this).siblings('ul').slideToggle(300, function() {
 $(this).parent().toggleClass('current');
 });
 $.scrollTo(accordionDiv, 300);
 }
 return false;
 });

 });
 </script>

In the above jQuery the floating and accordion are write separately, so you can disable a feature easily.

Download Demo

1. Import jquery

<script type='text/javascript' src='http://yoursite.com/jquery.js'></script>

2. Add a div tag with image in it

<div class="fadeDiv">
    <img src="1jpg" alt="" />
    <img src="2.jpg" alt="" />
</div>

3 .  Add script Jquery on load

$(document).ready(function(){
 $("img").hover(
 function() {
 $(this).animate({"opacity": "0"}, "slow");
 },
 function() {
 $(this).animate({"opacity": "1"}, "slow");
 }
 );
});

That’s it . you can now see the fade in and fade out effect on mouse over the button
you can change the js to add more functionalites.