JavaScript codes for Web DEV

[JavaScriptBank]

Rotating images is not new type of JavaScript effects because they were ever showed on jsB@nk through many JavaScript code examples:

- detail at JavaScriptBank.com - 2.000+ free JavaScript codes

Demo: JavaScript JavaScript Image Rotation script with CANVAS in HTML5

How to setup

Step 1: Use JavaScript code below to setup the script
JavaScript

<script type="text/javascript">
// Created by: Benoit Asselin | http://www.ab-d.fr
// This script downloaded from www.JavaScriptBank.com

function rotate(p_deg) {
	if(document.getElementById('canvas')) {
		/*
		Ok!: Firefox 2, Safari 3, Opera 9.5b2
		No: Opera 9.27
		*/
		var image = document.getElementById('image');
		var canvas = document.getElementById('canvas');
		var canvasContext = canvas.getContext('2d');
		
		switch(p_deg) {
			default :
			case 0 :
				canvas.setAttribute('width', image.width);
				canvas.setAttribute('height', image.height);
				canvasContext.rotate(p_deg * Math.PI / 180);
				canvasContext.drawImage(image, 0, 0);
				break;
			case 90 :
				canvas.setAttribute('width', image.height);
				canvas.setAttribute('height', image.width);
				canvasContext.rotate(p_deg * Math.PI / 180);
				canvasContext.drawImage(image, 0, -image.height);
				break;
			case 180 :
				canvas.setAttribute('width', image.width);
				canvas.setAttribute('height', image.height);
				canvasContext.rotate(p_deg * Math.PI / 180);
				canvasContext.drawImage(image, -image.width, -image.height);
				break;
			case 270 :
			case -90 :
				canvas.setAttribute('width', image.height);
				canvas.setAttribute('height', image.width);
				canvasContext.rotate(p_deg * Math.PI / 180);
				canvasContext.drawImage(image, -image.width, 0);
				break;
		};
		
	} else {
		/*
		Ok!: MSIE 6 et 7
		*/
		var image = document.getElementById('image');
		switch(p_deg) {
			default :
			case 0 :
				image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=0)';
				break;
			case 90 :
				image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=1)';
				break;
			case 180 :
				image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=2)';
				break;
			case 270 :
			case -90 :
				image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=3)';
				break;
		};
		
	};
};

// Multiple onload function created by: Simon Willison
// http://simonwillison.net/2004/May/26/addLoadEvent/
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}

addLoadEvent(function() {
	var image = document.getElementById('image');
	var canvas = document.getElementById('canvas');
	if(canvas.getContext) {
		image.style.visibility = 'hidden';
		image.style.position = 'absolute';
	} else {
		canvas.parentNode.removeChild(canvas);
	};
	
	rotate(0);
});
</script>

Step 2: Copy & Paste HTML code below in your BODY section
HTML

<!--
/*
     This script downloaded from www.JavaScriptBank.com
     Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
*/
-->
<p>
	rotate:
	<input type="button" value="0°" onclick="rotate(0);">

	<input type="button" value="90°" onclick="rotate(90);">
	<input type="button" value="180°" onclick="rotate(180);">
	<input type="button" value="-90°" onclick="rotate(-90);">
</p>
<p>
	<img id="image" src="http://www.javascriptbank.com/templates/jsb.V8/images/logo_jsbank.jpg" alt="">
	<canvas id="canvas"></canvas>
</p>

JavaScript Countdown Timer - JavaScript Web based Music Player - JavaScript AJAX Page Content Loader

[JavaScriptBank]

This is very simple JavaScript code example but it can create an amazing message box effect with AJAX operations, bases on ... detail at JavaScriptBank.com - 2.000+ free JavaScript codes

Demo: JavaScript Nice AJAX Effects for Messages Box using MooTools

How to setup

Step 1: Copy & Paste CSS code below in your HEAD section
CSS

<style type="text/css">
body{font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif; font-size:12px;}
#box {
	margin-bottom:10px;
	width: auto;
	padding:4px;
	border:solid 1px #DEDEDE;
	background: #FFFFCC;
	display:none;
}
</style>

Step 2: Use JavaScript code below to setup the script
JavaScript

<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript">
// Created by Antonio Lupetti | http://woork.blogspot.com
// This script downloaded from www.JavaScriptBank.com
window.addEvent('domready', function(){
	var box = $('box');
	var fx = box.effects({duration: 1000, transition: Fx.Transitions.Quart.easeOut});
	
	$('save_button').addEvent('click', function() {
		box.style.display="block";
		box.setHTML('Save in progress...');
		
		/* AJAX Request here... */
		
		fx.start({	
			}).chain(function() {
				box.setHTML('Saved!');
				this.start.delay(1000, this, {'opacity': 0});
			}).chain(function() {
				box.style.display="none";
				this.start.delay(0001, this, {'opacity': 1});
			});
		});
	}); 
</script>

Step 3: Copy & Paste HTML code below in your BODY section
HTML

Press &quot;Save&quot;</p>
<div id="box"></div>
<input name="" type="text" /><input id="save_button" name="save_button" type="button" value="save"/>

Step 4: downloads
Files
mootools.js

AJAX news ticker - JavaScript Refresh Page - JavaScript Unclosable Window

[JavaScriptBank]

If the JavaScript countdown timers are ever presented on jsB@nk still do not satisfy you:

- [URL="http://www.javascriptbank.com/cool-javascript-digital-countdown-with-jquery.html"]Cool JavaScri... detail at JavaScriptBank.com - 2.000+ free JavaScript codes

Demo: JavaScript HTC-style JavaScript Countdown Timer with jQuery

How to setup

Step 1: Copy & Paste CSS code below in your HEAD section
CSS

<link rel="stylesheet" type="text/css" href="style.css" />

Step 2: Use JavaScript code below to setup the script
JavaScript

<script src="/javascript/jquery.js" type="text/javascript"></script>
<script src="jquery.countdown.packed.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#countdown').countdown({until:$.countdown.UTCDate(-8, 2011,  1 - 1, 1), format: 'DHMS', layout: 
'<div id="timer">' + '<hr />'+
	'<div id="timer_days" class="timer_numbers">{dnn}</div>'+
	'<div id="timer_hours" class="timer_numbers">{hnn}</div>'+ 
	'<div id="timer_mins" class="timer_numbers">{mnn}</div>'+
	'<div id="timer_seconds" class="timer_numbers">{snn}</div>'+
'<div id="timer_labels">'+
	'<div id="timer_days_label" class="timer_labels">days</div>'+
	'<div id="timer_hours_label" class="timer_labels">hours</div>'+
	'<div id="timer_mins_label" class="timer_labels">mins</div>'+
	'<div id="timer_seconds_label" class="timer_labels">secs</div>'+
'</div>'+							
'</div>'					  
});
});
</script>

Step 3: Copy & Paste HTML code below in your BODY section
HTML

<div id="countdown"></div>

Step 4: must download files below
Files
countdown1.png
countdown2.png
jquery.countdown.packed.js
style.css

JavaScript Countdown Timer - JavaScript Web based Music Player - Free JavaScript Codes

[JavaScriptBank]

This JavaScript code example makes your detail at JavaScriptBank.com - 2.000+ free JavaScript codes

Demo: JavaScript So-Ticker: OOP JavaScript Dynamic Ticker with Typing-Styled

How to setup

Step 1: CSS below for styling thescript, place it into HEAD section
CSS

<style type="text/css">
/*
     This script downloaded from www.JavaScriptBank.com
     Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
*/
#so_oTickerContainer {
	width:700px;
	margin:auto;
	font:1.0em verdana,arial;
	background-color:lightyellow;
	border-top:1px solid yellow;
	border-bottom:1px solid yellow;
}

#so_oTickerContainer h1 {
	font:bold 0.9em verdana,arial;
	margin:0;
	padding:0;
}
	
.so_tickerContainer {
	position:relative;
	margin:auto;
	width:700px;
	background-color:lightyellow;
	border-top:1px solid yellow;
	border-bottom:1px solid yellow;
}

#so_tickerAnchor, #so_oTickerContainer a {
	text-decoration:none;
	color:black;
	font:bold 0.7em arial,verdana;
	border-right:1px solid #000;
	padding-right:2px;
}

#so_oTickerContainer a {
	border-style:none;
}

#so_oTickerContainer ul {
	margin-top:5px;
}

#so_tickerDiv {
	display:inline;
	margin-left:5px;
}

#so_tickerH1 {
	font:bold 1.0em arial,verdana;
	display:inline;
}

#so_tickerH1 a {
	text-decoration:none;
	color:#000;
	padding-right:2px;
}

#so_tickerH1 a img {
	border-style:none;
}

</style>

Step 2: Use JavaScript code below to setup the script
JavaScript

<script type="text/javascript">
// Created by: Steve Chipman | http://slayeroffice.com/

/*
     This script downloaded from www.JavaScriptBank.com
     Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
*/


/****************************

so_ticker
version 1.0
last revision: 03.30.2006
steve@slayeroffice.com

For implementation instructions, see:
http://slayeroffice.com/code/so_ticker/

Should you improve upon or modify this
code, please let me know so that I can update
the version hosted at slayeroffice.

Please leave this notice intact.


****************************/

so_ticker = new Object();
so_ticker = {
	current:0,			
	currentLetter:0,	
	zInterval:null,	
	tObj: null,			
	op:0.95,			
	pause: false,		
	tickerContent: [],	
	LETTER_TICK:100, 
	FADE: 10, 
	NEXT_ITEM_TICK: 3000, 
	init:function() {
		var d=document;	
		var mObj = d.getElementById("so_oTickerContainer");	
		so_ticker.tObj = d.createElement("div");		
		so_ticker.tObj.setAttribute("id","so_tickerDiv"); 
		var h = d.createElement("h1");	
		h.appendChild(d.createTextNode(so_ticker.getTextNodeValues(mObj.getElementsByTagName("h1")[0])));	
		h.setAttribute("id","so_tickerH1");	
		var ea = d.createElement("a");
		ea.setAttribute("href","javascript:so_ticker.showContent();");
		pImg = ea.appendChild(document.createElement("img"));
		pImg.setAttribute("src","plus.png");
		pImg.setAttribute("alt","Click to View all News Items.");
		ea.setAttribute("title","Click to View all News Items.");
		h.insertBefore(ea,h.firstChild);
		anchors = mObj.getElementsByTagName("a");		
		var nObj = mObj.cloneNode(false);		
		mObj.parentNode.insertBefore(nObj,mObj); 
		mObj.style.display = "none";	
		nObj.className = "so_tickerContainer"; 	
		nObj.setAttribute("id","so_nTickerContainer");
		nObj.appendChild(h); 	
		nObj.appendChild(so_ticker.tObj);	
		so_ticker.getTickerContent();	
		so_ticker.zInterval = setInterval(so_ticker.tick,so_ticker.LETTER_TICK);	 
	},
	showContent:function() {
			var d = document;
			d.getElementById("so_oTickerContainer").style.display = "block"; 
			d.getElementById("so_nTickerContainer").style.display = "none";
			d.getElementById("so_oTickerContainer").getElementsByTagName("a")[0].focus();
			clearInterval(so_ticker.zInterval);
	},
	getTickerContent:function() {
		for(var i=0;i<anchors.length;i++) so_ticker.tickerContent[i] = so_ticker.getTextNodeValues(anchors[i]);
	}, 
	getTextNodeValues:function(obj) {
		if(obj.textContent) return obj.textContent;
		if (obj.nodeType == 3) return obj.data;
		var txt = [], i=0;
		while(obj.childNodes[i]) {
			txt[txt.length] = so_ticker.getTextNodeValues(obj.childNodes[i]);
			i++;
		}
    	return txt.join("");
    },
    tick: function() {
    	var d = document;
    	if(so_ticker.pause) {
    		try {
    			so_ticker.clearContents(d.getElementById("so_tickerAnchor"));
    			d.getElementById("so_tickerAnchor").appendChild(d.createTextNode(so_ticker.tickerContent[so_ticker.current]));
    			so_ticker.currentLetter = so_ticker.tickerContent[so_ticker.current].length;
    		} catch(err) { }
    		return;
    	}
    	if(!d.getElementById("so_tickerAnchor")) {
    		var aObj = so_ticker.tObj.appendChild(d.createElement("a"));
    		aObj.setAttribute("id","so_tickerAnchor");
    		aObj.setAttribute("href",anchors[so_ticker.current].getAttribute("href"));
    		aObj.onmouseover = function() { so_ticker.pause = true; }
    		aObj.onmouseout = function() { so_ticker.pause = false; }
    		aObj.onfocus = aObj.onmouseover;
			aObj.onblur = aObj.onmouseout;
			aObj.setAttribute("title",so_ticker.tickerContent[so_ticker.current]);
    	}
		d.getElementById("so_tickerAnchor").appendChild(d.createTextNode(so_ticker.tickerContent[so_ticker.current].charAt(so_ticker.currentLetter)));
    	so_ticker.currentLetter++;
    	if(so_ticker.currentLetter > so_ticker.tickerContent[so_ticker.current].length) {
    		clearInterval(so_ticker.zInterval);
    		setTimeout(so_ticker.initNext,so_ticker.NEXT_ITEM_TICK);
    	}
    },
    fadeOut: function() {
    	if(so_ticker.paused) return;
    	so_ticker.setOpacity(so_ticker.op,so_ticker.tObj);
    	so_ticker.op-=.10;
    	if(so_ticker.op<0) {
    		clearInterval(so_ticker.zInterval);
    		so_ticker.clearContents(so_ticker.tObj);
    		so_ticker.setOpacity(.95,so_ticker.tObj);
    		so_ticker.op = .95;
    		so_ticker.zInterval = setInterval(so_ticker.tick,so_ticker.LETTER_TICK);
    	}
    },
    initNext:function() {
    		so_ticker.currentLetter = 0, d = document;
    		so_ticker.current = so_ticker.tickerContent[so_ticker.current + 1]?so_ticker.current+1:0;
    		d.getElementById("so_tickerAnchor").setAttribute("href",anchors[so_ticker.current].getAttribute("href"));
    		d.getElementById("so_tickerAnchor").setAttribute("title",so_ticker.tickerContent[so_ticker.current]);
    		so_ticker.zInterval = setInterval(so_ticker.fadeOut,so_ticker.FADE);
    },
    setOpacity:function(opValue,obj) {
    	obj.style.opacity = opValue;
    	obj.style.MozOpacity = opValue;
    	obj.style.filter = "alpha(opacity=" + (opValue*100) + ")";
    },
    clearContents:function(obj) {
    	try {
    		while(obj.firstChild) obj.removeChild(obj.firstChild);
    	} catch(err) { }
    }
}


function page_init(){
	so_ticker.init();
}
window.addEventListener?window.addEventListener("load",page_init,false):window.attachEvent("onload",page_init);
</script>

Step 3: Place HTML below in your BODY section
HTML

<!--
/*
     This script downloaded from www.JavaScriptBank.com
     Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
*/
-->

	<div id="so_oTickerContainer">
		<h1>Latest News:</h1>
		<ul>
			<li><a href="http://slayeroffice.com" rel="nofollow">Cat reported to have secured a fiddle.</a></li>
			<li><a href="http://centricle.com" rel="nofollow">Cows: Able to leap orbiting satellites?</a></li>
			<li><a href="http://adactio.com" rel="nofollow">People alarmed to hear small dog laughing.</a></li>
			<li><a href="http://steve.ganz.name/blog/" rel="nofollow">Fork devastated as Spoon runs off with Dish.</a></li>

		</ul>
	</div>

Step 4: Download files below
Files
plus.png

JavaScript Line Graph script - JavaScript Virtual Keyboard - JavaScript Horizontal Slider

[JavaScriptBank]

When users click a specified button, this JavaScript code example will get colours of all HTML elements with the predefined color attributes then fill those colours into many tiny rectangles. The auth... detail at JavaScriptBank.com - 2.000+ free JavaScript codes

Demo: JavaScript Colours-on-Page Displaying with MooTools

How to setup

Step 1: CSS below for styling thescript, place it into HEAD section
CSS

<style type="text/css">
/*
     This script downloaded from www.JavaScriptBank.com
     Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
*/

.dcolor  {
  height:40px;
}

.dtext {
  }

.dwrapper {
  width:100px;
  float:left;
  padding:10px;
  margin:0 20px 20px 0;
  border:1px solid #ccc;
}
</style>

Step 2: Use JavaScript code below to setup the script
JavaScript

<script type="text/javascript" src="/javascript/mootools.js"></script>
<script type="text/javascript">
// Created by: David Walsh | http://eriwen.com/css/color-palette-with-css-and-moo/
// This script downloaded from www.JavaScriptBank.com

//once the dom is ready
window.addEvent('domready', function() {

	//do it!
	$('get-colors').addEvent('click', function() {
		//starting the colors array
		var colors = [];
		var disallows = ['transparent'];

		//for every element
		$$('*').each(function(el) {
			//record colors!
			colors.include(el.getStyle('color'));
			colors.include(el.getStyle('background-color'));
			el.getStyle('border-color').split(' ').each(function(c) {
				colors.include(c);
			});
		});

		//sort the colors
		colors.sort();

		//empty wrapper
		$('colors-wrapper').empty();

		//for every color...
		colors.each(function(val,i) {

			//if it's good
			if(!disallows.contains(val))
			{

				//create wrapper div
				var wrapper = new Element('div', {
					'class':'dwrapper'
				});

				//create color div, inject
				var colorer = new Element('div', {
					'class':'dcolor',
					'style': 'background:' + val
				});
				colorer.inject(wrapper);

				//alert(val);

				//create text div, inject
				var texter = new Element('div', {
					'class':'dtext',
					'text':val
				});
				texter.inject(wrapper);

				//inject wrapper
				wrapper.inject($('colors-wrapper'));
			}
		});
	});
});
</script>

Step 3: Copy & Paste HTML code below in your BODY section
HTML

<!--
/*
     This script downloaded from www.JavaScriptBank.com
     Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
*/
-->
<input type="button" id="get-colors" value="Get Colors" class="button">
<br><br><br>
<div id="colors-wrapper"></div>

<br clear="all">

<div style="text-align: left; width: 70%;">
<p>
Ma quande lingues coalesce. <span style="color: #279F37;">Li nov lingua franca va esser</span> plu simplic e regulari. Lorem ipsum dolor sit amet, <span style="color: #9F6827;">consectetuer adipiscing elit, sed diam nonummy</span> nibh euismod tincidunt ut <span style="color: #BFB00B;">laoreet dolore magna aliquam erat volutpat</span>.</p>

</div>

Step 4: must download files below
Files
mootools.js

JavaScript Line Graph script - JavaScript Virtual Keyboard - JavaScript Horizontal Slider

[JavaScriptBank]

This JavaScript code example will create a super beautiful analog clock with amazing layout on your web pages. However, this [URL="http://www.javascriptbank.com/dhtml-analog-clock-ii.html"]JavaScri... detail at JavaScriptBank.com - 2.000+ free JavaScript codes

Demo: JavaScript Tick Tock: Amazing Analog Clock with CSS

How to setup

Step 1: CSS below for styling thescript, place it into HEAD section
CSS

<style type="text/css">
	#clockbase {
		width: 512px;
		height: 512px;
		position: relative;
		margin: 0 auto;
		background: url(clock_bg.jpg) no-repeat;
	}
	#minutes {
		width: 229px;
		height: 229px;
		position: absolute;
		top: 200px;
		left: 137px;
		background: url(minutes-arm.png) no-repeat;
	}
	#hours {
		width: 200px;
		height: 200px;
		position: absolute;
		top: 220px;
		left: 150px;
		background: url(hours-arm.png) no-repeat left bottom;
	}
	#seconds {
		width: 260px;
		height: 260px;
		position: absolute;
		top: 184px;
		left: 120px;
		background: url(SECS.gif) no-repeat;
		
	}
	#clockbase .min05 {background-position: left top;}
	#clockbase .min10 {background-position: left -229px;}
	#clockbase .min15 {background-position: left -458px;}
	#clockbase .min20 {background-position: left -687px;}
	#clockbase .min25 {background-position: left -916px;}
	#clockbase .min30 {background-position: left -1145px;}
	#clockbase .min35 {background-position: left -1374px;}
	#clockbase .min40 {background-position: left -1603px;}
	#clockbase .min45 {background-position: left -1832px;}
	#clockbase .min50 {background-position: left -2061px;}
	#clockbase .min55 {background-position: left -2290px;}
	#clockbase .min00 {background-position: left -2519px;}
	
	#clockbase .hr1 {background-position: left top;}
	#clockbase .hr2 {background-position: left -200px;}
	#clockbase .hr3 {background-position: left -400px;}
	#clockbase .hr4 {background-position: left -600px;}
	#clockbase .hr5 {background-position: left -800px;}
	#clockbase .hr6 {background-position: left -1000px;}
	#clockbase .hr7 {background-position: left -1200px;}
	#clockbase .hr8 {background-position: left -1400px;}
	#clockbase .hr9 {background-position: left -1600px;}
	#clockbase .hr10 {background-position: left -1800px;}
	#clockbase .hr11 {background-position: left -2000px;}
	#clockbase .hr12 {background-position: left -2200px;}
	
	*html #minutes {
		background: url(minutes-arm.gif) no-repeat;
	}
	*html #hours {
		background: url(hours-arm.gif) no-repeat left bottom;
	}
	</style>

Step 2: Use JavaScript code below to setup the script
JavaScript

<script type="text/javascript" language="javascript">
		var g_nLastTime = null;
		
		function cssClock(hourElementId, minuteElementId)
		{
			// Check if we need to do an update
			var objDate = new Date();
			if(!g_nLastTime || g_nLastTime.getHours() > objDate.getHours() || g_nLastTime.getMinutes() <= (objDate.getMinutes() - 5))
			{
				// make sure parameters are valid
				if(!hourElementId || !minuteElementId) { return; }

				// get the element objects
				var objHour = document.getElementById(hourElementId);
				var objMinutes = document.getElementById(minuteElementId);
				if (!objHour || !objMinutes) { return; }

				// get the time
				var nHour = objDate.getHours();
				if (nHour > 12) { nHour -= 12; }  // switch from 24-hour to 12-hour system
				var nMinutes = objDate.getMinutes();

				// round the time
				var nRound = 5;
				var nDiff = nMinutes % nRound;
				if(nDiff != 0)
				{
					if (nDiff < 3) { nMinutes -= nDiff; } // round down
					else { nMinutes += nRound - nDiff; } // round up
				}
				if(nMinutes > 59)
				{
					// handle increase the hour instead
					nHour++;
					nMinutes = 0;
				}

				// Update the on page elements
				objHour.className = 'hr' + nHour;
				objMinutes.className = 'min' + nMinutes;

				// Timer to update the clock every few minutes
				g_nLastTime = objDate;
			}

			// Set a timer to call this function again
			setTimeout(function() { cssClock(hourElementId, minuteElementId); }, 60000); // update the css clock every minute (or so)
		}
	</script>

Step 3: Copy & Paste HTML code below in your BODY section
HTML

<div id="clockbase">
	    <div class="hr10" id="hours"></div>
	    <div class="min10" id="minutes"></div>
		<div id="seconds"></div>
	</div>
	<script type="text/javascript" language="javascript">
	cssClock('hours', 'minutes');
	</script>

Step 4: downloads
Files
clock_bg.jpg
hours-arm.gif
hours-arm.png
minutes-arm.gif
minutes-arm.png
SECS.gif

JavaScript Make link open in new tab/window - JavaScript World clock - circumference calculator

[JavaScriptBank]

A very great JavaScript code example to simulate Flash effects in this script: the users move mouse pointer to the edges of content div then all remaining ... detail at JavaScriptBank.com - 2.000+ free JavaScript codes

Demo: JavaScript Simulate Awesome Flash Horizontal Navigation with MooTools

How to setup

JavaScript Make link open in new tab/window - JavaScript World clock - circumference calculator

[JavaScriptBank]

In this post, jsB@nk is happy to present to you a tiny JavaScript slideshow effect made by 2 code lines. It's so very simple and easy to implement but its JavaScript animations are so great to apply o... detail at JavaScriptBank.com - 2.000+ free JavaScript codes

Demo: JavaScript Simple JavaScript Slideshow in 2 code lines with jQuery

How to setup

Step 1: must download files below
Files
1.html
2.html
3.html
jquery-1.4.3.js

JavaScript Line Graph script - JavaScript Virtual Keyboard - JavaScript Horizontal Slider

[JavaScriptBank]

There are many JavaScript resources to parse an URL in JavaScript RegEx. And parsing the domain main is easy since there's a lot of trick. This is useful f... detail at JavaScriptBank.com - 2.000+ free JavaScript codes

Demo: JavaScript Simple JavaScript RegEx to Parse Domain Name

How to setup

Step 1: Use JavaScript code below to setup the script
JavaScript

<script type="text/javascript">
// Copyright: ivanceras - http://www.ivanceras.com/
/*
     This script downloaded from www.JavaScriptBank.com
     Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
*/

/**
 * 
 * USAGE:
 * UriParser.parseRootDomain("http://user:password@www.truste.com.ca:80/pathname?querystring&key=value#fragment"); //= truste.com.ca
 * UriParser.parseRootDomain("http://google.com.ph/pathname?querystring&key=value#fragment"); //= google.com.ph
 * UriParser.parseRootDomain("http://www.google.com/pathname?querystring&key=value#fragment"); //= google.com
 * 
 */
var UriParser =  {

 //parse the root domain, exclude the sub domain
 parseRootDomain : function(url) {
  var matches = url.match(/^((\w+):\/\/)?((\w+):?(\w+)?@)?([^\/\?:]+):?(\d+)?(\/?[^\?#]+)?\??([^#]+)?#?(\w*)/);
 
  //my additional code
  var theDomain = matches[6];
  
  if(UriParser.isIp(theDomain)){//if it is an ip address return it as domain
   return theDomain;
  }
  var dots = theDomain.split('.');
  var n = dots.length;
  
  if(n < 3){//google.com, 2 root words concatenate, 1 word as well i.e. localhost
   return dots.join(".");
  }
  else{//should be greater than or equal to 3 dot split ie. adsense.google.com
   var last = dots[n-1];
   var second2l = dots[n-2];
   var third2l = dots[n-3];
  
   var ext;
   var root;
   if(second2l.length <= 3){//if google.com.ph, or bbc.co.uk
    ext = second2l +"."+ last;
    root = third2l;
   }else{// adsense.google.com
    ext = last;
    root = second2l;
   }
   var domain = ""+ root + "." + ext;
   return domain;
  }
 },
 
 //private
 isNumber : function (o) {
    return !isNaN (o-0);
 },
 //private
 /**
  * determines if the url is an ip address
  */
 isIp: function(domain){
  var exploded = domain.split('.');
  for(var i = 0; i < exploded.length; i++){
   if(!UriParser.isNumber(exploded[i])){
    return false;
   }
  }
  return true;
 },
 
 isSameDomain: function(url1, url2){
  if(UriParser.parseRootDomain(url1) == UriParser.parseRootDomain(url2)){
   return true;
  }
  return false;
 }

}
</script>

Step 2: Copy & Paste HTML code below in your BODY section
HTML

<h3>Usages:</h3>
document.write(UriParser.parseRootDomain("http://user:password@www.truste.com.ca:80/pathname?querystring&key=value#fragment"));<br />
document.write(UriParser.parseRootDomain("http://google.com.ph/pathname?querystring&key=value#fragment"));<br />
document.write(UriParser.parseRootDomain("http://www.google.com/pathname?querystring&key=value#fragment"));<br />
document.write(UriParser.parseRootDomain("http://google.com/pathname?querystring&key=value#fragment"));<br />
document.write(UriParser.parseRootDomain("http://localhost/pathname?querystring&key=value#fragment"));<br />
document.write(UriParser.parseRootDomain("localhost"));<br />
document.write(UriParser.parseRootDomain("http://192.168.1.1/pathname?querystring&key=value#fragment"));<br />
document.write(UriParser.isSameDomain("http://www.google.com/pathname?querystring&key=value#fragment", "http://adsense.google.com/?x=123123"))
document.write(UriParser.isSameDomain("http://www.blogger.com/navbar.g?targetBlogID=5856931630868336061&blogName=TeamPilipinas.info&publishMode=PUBLISH_MODE_HOSTED&navbarType=BLACK&layoutType=LAYOUTS&searchRoot=http%3A%2F%2Fteampilipinas.info%2Fsearch&blogLocale=en_PH&homepageUrl=http%3A%2F%2Fteampilipinas.info%2F", "blogger.com"));<br />
<hr />
<h3>Results:</h3>
<script type="text/javascript">
document.write(UriParser.parseRootDomain("http://user:password@www.truste.com.ca:80/pathname?querystring&key=value#fragment") + '<br />');
document.write(UriParser.parseRootDomain("http://google.com.ph/pathname?querystring&key=value#fragment") + '<br />');
document.write(UriParser.parseRootDomain("http://www.google.com/pathname?querystring&key=value#fragment") + '<br />');
document.write(UriParser.parseRootDomain("http://google.com/pathname?querystring&key=value#fragment") + '<br />');
document.write(UriParser.parseRootDomain("http://localhost/pathname?querystring&key=value#fragment") + '<br />');
document.write(UriParser.parseRootDomain("localhost") + '<br />');
document.write(UriParser.parseRootDomain("http://192.168.1.1/pathname?querystring&key=value#fragment") + '<br />');
document.write(UriParser.isSameDomain("http://www.google.com/pathname?querystring&key=value#fragment", "http://adsense.google.com/?x=123123"))
document.write(UriParser.isSameDomain("http://www.blogger.com/navbar.g?targetBlogID=5856931630868336061&blogName=TeamPilipinas.info&publishMode=PUBLISH_MODE_HOSTED&navbarType=BLACK&layoutType=LAYOUTS&searchRoot=http%3A%2F%2Fteampilipinas.info%2Fsearch&blogLocale=en_PH&homepageUrl=http%3A%2F%2Fteampilipinas.info%2F", "blogger.com"));
</script>

Javascript Music Player - Random Text Generator - Floating Image Script

[JavaScriptBank]

There are already many versions of snake classic games available on the Internet. Now this Snake game was just some fun ... detail at JavaScriptBank.com - 2.000+ free JavaScript codes

Demo: JavaScript Snake Game in JavaScript & YUI

How to setup

Step 1: Place CSS below in your HEAD section
CSS

<style type="text/css">
/*
     This script downloaded from www.JavaScriptBank.com
     Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
*/
body {
    background-color:#EEF3E2;
    margin:0;
    padding:0;
    font:13px arial;
}
#arena {
    border:1px solid #000;
    width:644px;
    height:444px;
    margin:20px 0 0 24px;
    float:left;
}
#info {
    float:left;
    margin:20px 0 0 40px;
}
#info ul {
    margin-left:0;
    padding-left:16px;
}
#info #title {
    color:#228B22;
    font-size:20px;
}
#info #instructions ul#colorCodes {
    padding:0;
}
#info #instructions #colorCodes li {
    list-style-type:none;
}
#info #instructions #colorCodes span {
    width:14px;
    height:12px;
    display:inline-block;
    color:#FFF;
    margin-right:4px;
}
#info #instructions #colorCodes span.foodColor {
    background-color:#228B22;
}
#info #instructions #colorCodes span.bonusColor {
    background-color:#FFB90F;
}
#info #score {
    border:0px solid #000;
    width:100px;
    height:20px;
    margin-top:20px;
    color:#8B4513;
    font-weight:bold;
    font-size:15px;
}
#info #addninfo {
    margin-top:20px;
    font-size:12px;
    font-style:italic;
}
.cell {
    border:0px solid #000;
    width:14px;
    height:12px;
    background-color: #FFF;
    float:left;
}   
.clear {
    clear:both;
}
</style>
<link rel="stylesheet" type="text/css" href="container.css">

Step 2: Place JavaScript below in your HEAD section
JavaScript

<script src="yahoo-dom-event.js"></script>
<script src="container-min.js"></script>
<script src="snake.js"></script>

Step 3: Place HTML below in your BODY section
HTML

<!--
/*
     This script downloaded from www.JavaScriptBank.com
     Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
*/
-->
<body class="yui-skin-sam">
    <div id="wrapper">
        <div id="arena"></div>
        <div id="info">
            <div id="title">SNAKE</div>
            <div id="score">Score: <i>0</i></div>
            <div id="instructions">

                <ul>
                    <li>Press ARROW keys to move the snake.</li>
                    <li>Press P to pause or resume.</li>
                    <li>Earlier you eat the food, more points you get.</li>
                    <li>Snake gets killed if it collides with the walls or its own body.</li>
                    <li>Color codes:
                        <ul id=colorCodes>

                            <li><span class=foodColor></span>Food (Max 250 points, length increases by 4 units)</li>
                            <li><span class=bonusColor></span>Bonus (500 points, disappears if not eaten within 10 seconds)</li>
                        </ul>
                    </li>
                </ul>
            </div>
            <div id=credits>
                This game is created in Javascript using YUI 2 framework.
                </br>

                Author: <a href="http://odhyan.com">Saurabh Odhyan</a>
                </br>
            </div>
            <div id="addninfo">
                Works well on FF, Chrome and Safari. Didn't have the patience to debug on IE.
            </div>
        </div>
        <div class="clear"></div>

    </div>
</body>

Step 4: downloads
Files
container-min.js
container.css
snake.js
yahoo-dom-event.js

JavaScript Line Graph script - JavaScript Virtual Keyboard - JavaScript Horizontal Slider