Computer Geeks

JavaScriptBank · #1 05-15-2010, 10:07 AM

Helpful JavaScript for Web development

DHTML Fading Animation Image

Enhancing image presentation on your website with this image rotator plus smooth dynamic motion (fade-in-fade-out). A very great anima... detail at JavaScriptBank.com - 2.000+ free JavaScript codes

Demo: JavaScript DHTML Fading Animation Image

How to setup

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

Code:

<SCRIPT language=javaScript>
<!-- Beginning of JavaScript -

sandra0 = new Image();
sandra0.src = "photo1.jpg";

sandra1 = new Image();
sandra1.src = "photo2.jpg";

sandra2 = new Image();
sandra2.src = "photo3.jpg";

var i_strngth=1
var i_image=0

var imageurl = new Array()
imageurl[0] ="photo1.jpg"
imageurl[1] ="photo2.jpg"
imageurl[2] ="photo3.jpg"


function showimage() {		
	if(document.all) {
		if (i_strngth <=110) {
			testimage.innerHTML="<img style='filter:alpha(opacity="+i_strngth+")' src="+imageurl[i_image]+" border=0>";
			i_strngth=i_strngth+10
			var timer=setTimeout("showimage()",100)
		}	
		else {
			clearTimeout(timer)
			var timer=setTimeout("hideimage()",1000)
		}
	}	
	
	if(document.layers) {
			clearTimeout(timer)
			document.testimage.document.write("<img src="+imageurl[i_image]+" border=0>")
			document.close()
			i_image++
			if (i_image >= imageurl.length) {i_image=0}	
			var timer=setTimeout("showimage()",2000)
				
	}	
}


function hideimage() {		
	if (i_strngth >=-10) {
		testimage.innerHTML="<img style='filter:alpha(opacity="+i_strngth+")' src="+imageurl[i_image]+" border=0>";
		i_strngth=i_strngth-10
		var timer=setTimeout("hideimage()",100)
	}	
	else {
		clearTimeout(timer)
		i_image++
		if (i_image >= imageurl.length) {i_image=0}
		i_strngth=1
		var timer=setTimeout("showimage()",500)	
	}
}


// - End of JavaScript - -->
</SCRIPT>

Step 2: Place HTML below in your BODY section
HTML

Code:

<BODY onload=showimage()>
<DIV id=mainbod style="POSITION: relative; VISIBILITY: visible"></DIV>

<DIV id=testimage style="POSITION: relative; VISIBILITY: visible"></DIV>
</BODY>

Javascript Music Player - Random Text Generator - Floating Image Script

Quote:

Originally Posted by Copyright

The Site may provide, or third parties may provide, links to non-JavaScriptBank.com Internet World Wide Web sites or resources. Because JavaScriptBank.com has no control over such sites and resources, you acknowledge and agree that JavaScriptBank.com is not responsible for the availability of such external sites or resources, and does not endorse and is not responsible or liable for any content, advertising, products, or other materials on or available from such sites or resources. You further acknowledge and agree that JavaScriptBank.com shall not be responsible or liable, directly or indirectly, for any damage or loss caused or alleged to be caused by or in connection with use of or reliance on any such content, goods or services available on or through any such site or resource.

JavaScriptBank · #2 05-18-2010, 08:02 PM

Use this JavaScript code to make a a horizontal image scroller on your web page. If do not view the source code, maybe you will think tha... detail at JavaScriptBank.com - 2.000+ free JavaScript codes

Demo: JavaScript Streaming Horizontal Banner

How to setup

Step 1: Use CSS code below for styling the script
CSS

Code:

<style type="text/css">
<!--
#slideCont {
 	border:solid 1px #000;
	 text-align:center;
}

#slideCont img {
 	margin: 5px;
}
-->
</style>

Step 2: Place JavaScript below in your HEAD section
JavaScript

Code:

<script type="text/javascript">
<!--
/* 
  -----------------------------------------------
   Streaming banners - v.1
   (c) 2006 www.haan.net
   You may use this script but please leave the credits on top intact.
   Please inform us of any improvements made.
   When usefull we will add your credits.
  ------------------------------------------------ */
<!--

function clip() {
 	// width of the banner container
 	var contWidth = 425;
 	// height of the banner container
 	var contHeight = 90;

 	var id1 = document.getElementById('slideA');
 	var id2 = document.getElementById('slideB');

 	id1.style.left = parseInt(id1.style.left)-1 + 'px';
 	
 	document.getElementById('slideCont').style.width = contWidth + "px";
 	document.getElementById('slideCont').style.clip = 'rect(auto,'+ contWidth +'px,' + contHeight +'px,auto)';
 	id2.style.display = '';
 	if(parseFloat(id1.style.left) == -(contWidth)) 	{
 		id1.style.left = '0px';
 	}
 	setTimeout(clip,25)
}

// 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() {
  clip();
});
//-->
</script>

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

Code:

<div id="slideCont" style="overflow: hidden; position: relative; z-index: 1; width: 425px; height: 90px; top: 0px; clip: rect(auto, 425px, 90px, auto);">
	<div id="slideA" style="overflow: hidden; position: absolute; z-index: 1; top: 0px; left: -194px; width: 850px; height: 90px;">
		<div style="float: left;" id="innerSlideA">
			<a href="http://www.apache.org/"><img src="/logos/logo_jsbank.jpg" border="0" height="44" width="126"></a>
			<a href="http://www.haan.net/"><img src="/logos/gif_logojsb2.gif" border="0" height="60" width="120"></a>
			<a href="http://www.mysql.com/"><img src="/logos/jsb_banner.gif" border="0" height="44" width="126"></a>

		</div>
		<div id="slideB" style="overflow: hidden; position: relative; z-index: 1; top: 0px; left: 0px; width: 425px; height: 90px;">
			<a href="http://www.apache.org/"><img src="/logos/logo_jsb.jpg" border="0" height="44" width="126"></a>
			<a href="http://www.haan.net/"><img src="/logos/logo_jsb__88x31.gif" border="0" height="60" width="120"></a>
			<a href="http://www.mysql.com/"><img src="/logos/logo_jsb_120x60.jpg" border="0" height="44" width="126"></a>
		</div>
	</div>
</div>

JavaScript Bookmark Page script - JavaScript Color Wheel - JavaScript Image slideshow

JavaScriptBank · #3 05-19-2010, 07:35 PM

This is a simple expand collapse menu. The anchor tags that expand each menu are added by JavaScript, so the HTML code doesn't contain any event handlers or unnecessary HTML tags. The ... detail at JavaScriptBank.com - 2.000+ free JavaScript codes

Demo: JavaScript Expanding Navigation Menu onClick

How to setup

Step 1: Place CSS below in your HEAD section
CSS

Code:

<style type="text/css">
ul#menu {
  width: 100px;
  list-style-type: none;
  border-top: solid 1px #b9a894;
  margin: 0;
  padding: 0;
}

ul#menu ol {
  display: none;
  text-align: right;
  list-style-type: none;
  margin: 0;
  padding: 5px;
}

ul#menu li, 
  ul#menu a {
  font-family: verdana, sans-serif;
  font-size: 11px;
  color: #785a3c;
}

ul#menu li {
  border-bottom: solid 1px #b9a894;
  line-height: 15px;
}

ul#menu ol li {
  border-bottom: none;
}

ul#menu ol li:before {
  content: "-";
}

ul#menu a {
  text-decoration: none;
  outline: none;
}

ul#menu a:hover {
  color: #539dbc;
}

ul#menu a.active {
  color: #be5028;
}
</style>

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

Code:

<script language="javascript">

/*
Created by: Travis Beckham :: http://www.squidfingers.com | http://www.podlob.com
version date: 06/02/03 :: If want to use this code, feel free to do so,
but please leave this message intact. (Travis Beckham) */

// Node Functions

if(!window.Node){
  var Node = {ELEMENT_NODE : 1, TEXT_NODE : 3};
}

function checkNode(node, filter){
  return (filter == null || node.nodeType == Node[filter] || node.nodeName.toUpperCase() == filter.toUpperCase());
}

function getChildren(node, filter){
  var result = new Array();
  var children = node.childNodes;
  for(var i = 0; i < children.length; i++){
    if(checkNode(children[i], filter)) result[result.length] = children[i];
  }
  return result;
}

function getChildrenByElement(node){
  return getChildren(node, "ELEMENT_NODE");
}

function getFirstChild(node, filter){
  var child;
  var children = node.childNodes;
  for(var i = 0; i < children.length; i++){
    child = children[i];
    if(checkNode(child, filter)) return child;
  }
  return null;
}

function getFirstChildByText(node){
  return getFirstChild(node, "TEXT_NODE");
}

function getNextSibling(node, filter){
  for(var sibling = node.nextSibling; sibling != null; sibling = sibling.nextSibling){
    if(checkNode(sibling, filter)) return sibling;
  }
  return null;
}
function getNextSiblingByElement(node){
        return getNextSibling(node, "ELEMENT_NODE");
}

// Menu Functions & Properties

var activeMenu = null;

function showMenu() {
  if(activeMenu){
    activeMenu.className = "";
    getNextSiblingByElement(activeMenu).style.display = "none";
  }
  if(this == activeMenu){
    activeMenu = null;
  } else {
    this.className = "active";
    getNextSiblingByElement(this).style.display = "block";
    activeMenu = this;
  }
  return false;
}

function initMenu(){
  var menus, menu, text, a, i;
  menus = getChildrenByElement(document.getElementById("menu"));
  for(i = 0; i < menus.length; i++){
    menu = menus[i];
    text = getFirstChildByText(menu);
    a = document.createElement("a");
    menu.replaceChild(a, text);
    a.appendChild(text);
    a.href = "#";
    a.onclick = showMenu;
    a.onfocus = function(){this.blur()};
  }
}

if(document.createElement) window.onload = initMenu;

</script>

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

Code:

<ul id="menu">
  <li>Menu Item 1
    <ol>
      <li><a href="#">Sub Item 1.1</a></li>
      <li><a href="#">Sub Item 1.2</a></li>
      <li><a href="#">Sub Item 1.3</a></li>

    </ol>
  </li>
  <li>Menu Item 2
    <ol>
      <li><a href="#">Sub Item 2.1</a></li>
      <li><a href="#">Sub Item 2.2</a></li>
      <li><a href="#">Sub Item 2.3</a></li>
    </ol>

  </li>
  <li>Menu Item 3
    <ol>
      <li><a href="#">Sub Item 3.1</a></li>
      <li><a href="#">Sub Item 3.2</a></li>
      <li><a href="#">Sub Item 3.3</a></li>
    </ol>
  </li>

  <li>Menu Item 4
    <ol>
      <li><a href="#">Sub Item 4.1</a></li>
      <li><a href="#">Sub Item 4.2</a></li>
      <li><a href="#">Sub Item 4.3</a></li>
    </ol>
  </li>
  <li>Menu Item 5
    <ol>

      <li><a href="#">Sub Item 5.1</a></li>
      <li><a href="#">Sub Item 5.2</a></li>
      <li><a href="#">Sub Item 5.3</a></li>
    </ol>
  </li>
</ul>

Javascript floating message - Javascript multi level drop down menu - JavaScript in_array()

JavaScriptBank · #4 05-21-2010, 07:59 PM

This JavaScript codecan be used to be that a mouse cursor pointer was just a mouse cursor. Since DHTML came along and gave programmers the ability to track the precise coordinates of the mouse, it was... detail at JavaScriptBank.com - 2.000+ free JavaScript codes

Demo: JavaScript Waving Text Trailer

How to setup

Step 1: Place CSS below in your HEAD section
CSS

Code:

<STYLE>.spanstyle {
	FONT-WEIGHT: bold; FONT-SIZE: 10pt; COLOR: black; FONT-FAMILY: Verdana; POSITION: absolute; TOP: -50px
}
</STYLE>

Step 2: Copy & Paste JavaScript code below in your HEAD section
JavaScript

Code:

<SCRIPT>

/*
Cursor Trailor Text- By Peter Gehrig (http://www.24fun.ch/)
Permission given to Dynamicdrive.com to feature script in it's archive.
*/

var moves=17
var tracker=0
var xpos
var ypos
var cursortext='JavaScriptBank.com - Bank of over 2000+ free JavaScript'
cursortext=cursortext.split("")

function setup() {
	if (tracker==1 && document.all) {
    	for (i=cursortext.length-1; i>=1; i--) {
   			xposition[i]=xposition[i-1]+moves
			yposition[i]=yposition[i-1]
    	}
		xposition[0]=xpos+moves
		yposition[0]=ypos
	
		for (i=0; i<cursortext.length-1; i++) {
    		var thisspan = eval("span"+(i)+".style")
    		thisspan.posLeft=xposition[i]
			thisspan.posTop=yposition[i]
    	}
	}
	
	else if (tracker==1 && document.layers) {
    	for (i=cursortext.length-1; i>=1; i--) {
   			xposition[i]=xposition[i-1]+moves
			yposition[i]=yposition[i-1]
    	}
		xposition[0]=xpos+moves
		yposition[0]=ypos
	
		for (i=0; i<cursortext.length-1; i++) {
    		var thisspan = eval("document.span"+i)
    		thisspan.left=xposition[i]
			thisspan.top=yposition[i]
    	}
	}
		var timer=setTimeout("setup()",40)
}

function MouseMovement(e)
{
	xpos = (document.layers) ? e.pageX : document.body.scrollLeft+event.clientX
	ypos = (document.layers) ? e.pageY : document.body.scrollTop+event.clientY
	tracker=1
}

var xposition=new Array()
for (i=0;i<=cursortext.length-1;i++) {
	xposition[i]=-50
}

var yposition=new Array()
for (i=0;i<=cursortext.length-1;i++) {
	yposition[i]=-50
}

/*hieu ung di chuyen chuot*/

for (i=0;i<=cursortext.length-1;i++) {
    document.write("<span id='span"+i+"' class='spanstyle'>")
	document.write(cursortext[i])
    document.write("</span>")
}

if (document.layers){
	document.captureEvents(Event.MOUSEMOVE);
}
document.onmousemove = MouseMovement;
</SCRIPT>

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

Code:

<BODY onload=setup()>
</body>

JavaScript Enlarge Image - JavaScript Fading Slide Show - JavaScript Rotating Image script

JavaScriptBank · #5 05-23-2010, 07:51 PM

Spreading the love on your site with this JavaScript! It produces big kisses and lips behind your mouse pointer as it moves, each disappearing only after a noticeable delay (set to 1 second in demo). ... detail at JavaScriptBank.com - 2.000+ free JavaScript codes

Demo: JavaScript Trailing Kisses and Lips

How to setup

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

Code:

<style type="text/css">
<!--
h1 {
  color:#cc3333;
  font-family:"Comic Sans MS",Helvetica;
}
h3 {
  color:#993333;
  font-family:"Comic Sans MS",Helvetica;
}
.kisser {
  position:absolute;
  top:0;
  left:0;
  visibility:hidden;
}
-->
</style>

Step 2: Copy & Paste JavaScript code below in your HEAD section
JavaScript

Code:

<script language="JavaScript1.2" type="text/JavaScript">
<!-- cloak
//Kissing trail- By dij8 (dij8@dij8.com)
//Modified by Dynamic Drive for bug fixes
//Visit http://www.dynamicdrive.com for this script

kisserCount = 15 //maximum number of images on screen at one time
curKisser = 0 //the last image DIV to be displayed (used for timer)
kissDelay = 1000 //duration images stay on screen (in milliseconds)
kissSpacer = 50 //distance to move mouse b4 next heart appears
theimage = "lips_small.gif" //the 1st image to be displayed
theimage2 = "small_heart.gif" //the 2nd image to be displayed


//Browser checking and syntax variables
var docLayers = (document.layers) ? true:false;
var docId = (document.getElementById) ? true:false;
var docAll = (document.all) ? true:false;
var docbitK = (docLayers) ? "document.layers['":(docId) ? "document.getElementById('":(docAll) ? "document.all['":"document."
var docbitendK = (docLayers) ? "']":(docId) ? "')":(docAll) ? "']":""
var stylebitK = (docLayers) ? "":".style"
var showbitK = (docLayers) ? "show":"visible"
var hidebitK = (docLayers) ? "hide":"hidden"
var ns6=document.getElementById&&!document.all
//Variables used in script
var posX, posY, lastX, lastY, kisserCount, curKisser, kissDelay, kissSpacer, theimage
lastX = 0
lastY = 0
//Collection of functions to get mouse position and place the images
function doKisser(e) {

  posX = getMouseXPos(e)
  posY = getMouseYPos(e)
  if (posX>(lastX+kissSpacer)||posX<(lastX-kissSpacer)||posY>(lastY+kissSpacer)||posY<(lastY-kissSpacer)) {
    showKisser(posX,posY)
    lastX = posX
    lastY = posY
  }
}
// Get the horizontal position of the mouse
function getMouseXPos(e) {
  if (document.layers||ns6) {
    return parseInt(e.pageX+10)
  } else {
    return (parseInt(event.clientX+10) + parseInt(document.body.scrollLeft))
  }
}
// Get the vartical position of the mouse
function getMouseYPos(e) {
  if (document.layers||ns6) {
    return parseInt(e.pageY)
  } else {
    return (parseInt(event.clientY) + parseInt(document.body.scrollTop))
  }
}
//Place the image and start timer so that it disappears after a period of time
function showKisser(x,y) {
  var processedx=ns6? Math.min(x,window.innerWidth-75) : docAll? Math.min(x,document.body.clientWidth-55) : x
  if (curKisser >= kisserCount) {curKisser = 0}
  eval(docbitK + "kisser" + curKisser + docbitendK + stylebitK + ".left = " + processedx)
  eval(docbitK + "kisser" + curKisser + docbitendK + stylebitK + ".top = " + y)
  eval(docbitK + "kisser" + curKisser + docbitendK + stylebitK + ".visibility = '" + showbitK + "'")
  if (eval("typeof(kissDelay" + curKisser + ")")=="number") {
    eval("clearTimeout(kissDelay" + curKisser + ")")
  }
  eval("kissDelay" + curKisser + " = setTimeout('hideKisser(" + curKisser + ")',kissDelay)")
  curKisser += 1
}
//Make the image disappear
function hideKisser(knum) {
  eval(docbitK + "kisser" + knum + docbitendK + stylebitK + ".visibility = '" + hidebitK + "'")
}

function kissbegin(){
//Let the browser know when the mouse moves
if (docLayers) {
  document.captureEvents(Event.MOUSEMOVE)
  document.onMouseMove = doKisser
} else {
  document.onmousemove = doKisser
}
}
window.onload=kissbegin
// decloak -->
</script>

Step 3: Place HTML below in your BODY section
HTML

Code:

<script language="JavaScript" type="text/JavaScript">
<!-- cloak
// Add all DIV's of hearts
if (document.all||document.getElementById||document.layers){
for (k=0;k<kisserCount;k=k+2) {
  document.write('<div id="kisser' + k + '" class="kisser"><img src="' + theimage + '" alt="" border="0"></div>n')
  document.write('<div id="kisser' + (k+1) + '" class="kisser"><img src="' + theimage2 + '" alt="" border="0"></div>n')
}
}

// decloak -->
</script>

Step 4: must download files below
Files
lips_small.gif
small_heart.gif

JavaScript Bookmark Page script - JavaScript Color Wheel - JavaScript Image slideshow

JavaScriptBank · #6 05-25-2010, 08:06 PM

Slideshow with great transitoon effect. Each image has a JavaScript link of its own. Netscape-users will see a simple image-rotation-ef... detail at JavaScriptBank.com - 2.000+ free JavaScript codes

Demo: JavaScript Slideshow with zoom-in-zoom-out-animation

How to setup

Step 1: Place HTML below in your BODY section
HTML

Code:

<BODY onload=initiate()>
<SCRIPT>
<!-- Beginning of JavaScript -
// Slideshow with zoom-in-zoom-out-animation

// CONFIGURATION:
// 1.	Create your images (gif or jpg). They should have the same width. 
// 		Put those images in the same directory as the HTML-file. 
//		You can add as many images as you like.
// 2.	Copy the script-block and paste it into head-section of your HTML-file..
// 3. 	Copy the span-blocks with the id "imgcontainer" into the body-section 
//      of your HTML-file.
// 4.	Insert 'onLoad="initiate()"' into the body tag.
// 5.	Configure the varibales below.
		
// The width of your images (pixels). All pictures should have the same width.
var imgwidth=256

// The horizontal and vertical position of the images (pixels). 
var pos_left=10
var pos_top=10

// The name of your images. You may add as many images as you like.
var imgname=new Array()
imgname[0]="logojs.gif"
imgname[1]="photo3.jpg"
imgname[2]="photo4.jpg"

// Where should those images be linked to? 
// Add an URL for each image.
// If you don't want to add an URL just write '#' instead of the URL.
var imgurl=new Array()
imgurl[0]="http://javascriptbank.com"
imgurl[1]="http://javascriptbank.com"
imgurl[2]="http://javascriptbank.com"

// This block will preload your images. Do not edit this block.
var imgpreload=new Array()
for (i=0;i<=imgname.length-1;i++) {
	imgpreload[i]=new Image()
	imgpreload[i].src=imgname[i]
}

// Standstill-time between the images (microseconds).
var pause=2000

// Speed of the stretching and shrinking effect. More means slower.
var speed=20

// This variable also affects the speed (the length of the step between each inmage-frame measured in pixels). More means faster.
var step=10

// Do not edit the variables below
var i_loop=0
var i_image=0

function stretchimage() {
	if (i_loop<=imgwidth) {
		if (document.all) {
			imgcontainer.innerHTML="<a href='"+imgurl[i_image]+"' target='_blank'><img width='"+i_loop+"' src='"+imgname[i_image]+"' border='0'></a>"

		}
		i_loop=i_loop+step
		var timer=setTimeout("stretchimage()",speed)
  	}
	else {
		clearTimeout(timer)
		var timer=setTimeout("shrinkimage()",pause)
	}
}

function shrinkimage() {
	if (i_loop>-step) {
		if (document.all) {
			imgcontainer.innerHTML="<a href='"+imgurl[i_image]+"' target='_blank'><img width='"+i_loop+"' src='"+imgname[i_image]+"' border='0'></a>"

		}
		i_loop=i_loop-step
		var timer=setTimeout("shrinkimage()",speed)
  	}
	else {
		clearTimeout(timer)
		changeimage()
	}
}

function changeimage() {
	i_loop=0
	i_image++
	if (i_image>imgname.length-1) {i_image=0}
   	var timer=setTimeout("stretchimage()",pause)
}

function initiate() {
	if (document.all) {
		document.all.imgcontainer.style.posLeft=pos_left
		document.all.imgcontainer.style.posTop=pos_top
		changeimage()
	}
	if (document.layers) {
		document.imgcontainer.left=pos_left
		document.imgcontainer.top=pos_top
		rotatenetscape()
	}
}

function rotatenetscape() {
	document.imgcontainer.document.write("<a href='"+imgurl[i_image]+"' target='_blank'><img src='"+imgname[i_image]+"' border='0'></a>")	
	document.imgcontainer.document.close()	
	i_image++
	if (i_image>imgname.length-1) {i_image=0}
   	var timer=setTimeout("rotatenetscape()",pause*2)
}

document.write("<div id=\"roof\" style=\"position:relative\">")

document.write("<div id=\"imgcontainer\" style=\"position:absolute;top:0px;left:0px\"></div>")
document.write("</div>")

// - End of JavaScript - -->

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

JavaScript Vertical Marquee - JavaScript DHTML analog clock - JavaScript Backwards Text

JavaScriptBank · #7 05-29-2010, 03:57 AM

This AJAX playscript allows you make page read on other page's content (both asks to be from the same web site - avoid [URL="http://www.javascriptbank.com/javascript/security/"]security issues</... detail at JavaScriptBank.com - 2.000+ free JavaScript codes

Demo: JavaScript AJAX Net Page Fetcher

How to setup

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

Code:

<script type="text/javascript" name="ajaxpagefetcher.js">
/***********************************************
* Ajax Page Fetcher- by JavaScript Kit (www.javascriptkit.com)
***********************************************/

var ajaxpagefetcher={
loadingmessage: "Loading Page, please wait...",
exfilesadded: "",

connect:function(containerid, pageurl, bustcache, jsfiles, cssfiles){
	var page_request = false
	var bustcacheparameter=""
	if (window.XMLHttpRequest) // if Mozilla, IE7, Safari etc
		page_request = new XMLHttpRequest()
	else if (window.ActiveXObject){ // if IE6 or below
		try {
		page_request = new ActiveXObject("Msxml2.XMLHTTP")
		} 
		catch (e){
			try{
			page_request = new ActiveXObject("Microsoft.XMLHTTP")
			}
			catch (e){}
		}
	}
	else
		return false
	var ajaxfriendlyurl=pageurl.replace(/^http://[^/]+//i, "http://"+window.location.hostname+"/") 
	page_request.onreadystatechange=function(){ajaxpagefetcher.loadpage(page_request, containerid, pageurl, jsfiles, cssfiles)}
	if (bustcache) //if bust caching of external page
		bustcacheparameter=(ajaxfriendlyurl.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
	document.getElementById(containerid).innerHTML=ajaxpagefetcher.loadingmessage //Display "fetching page message"
	page_request.open('GET', ajaxfriendlyurl+bustcacheparameter, true)
	page_request.send(null)
},

loadpage:function(page_request, containerid, pageurl, jsfiles, cssfiles){
	if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1)){
		document.getElementById(containerid).innerHTML=page_request.responseText
		for (var i=0; i<jsfiles.length; i++)
			this.loadjscssfile(jsfiles[i], "js")
		for (var i=0; i<cssfiles.length; i++)
			this.loadjscssfile(cssfiles[i], "css")
		this.pageloadaction(pageurl) //invoke custom "onpageload" event
	}
},

createjscssfile:function(filename, filetype){
	if (filetype=="js"){ //if filename is a external JavaScript file
		var fileref=document.createElement('script')
		fileref.setAttribute("type","text/javascript")
		fileref.setAttribute("src", filename)
	}
	else if (filetype=="css"){ //if filename is an external CSS file
		var fileref=document.createElement("link")
		fileref.setAttribute("rel", "stylesheet")
		fileref.setAttribute("type", "text/css")
		fileref.setAttribute("href", filename)
	}
	return fileref
},

loadjscssfile:function(filename, filetype){ //load or replace (if already exists) external .js and .css files
	if (this.exfilesadded.indexOf("["+filename+"]")==-1){ //if desired file to load hasnt already been loaded
		var newelement=this.createjscssfile(filename, filetype)
		document.getElementsByTagName("head")[0].appendChild(newelement)
		this.exfilesadded+="["+filename+"]" //remember this file as being added
	}
	else{ //if file has been loaded already (replace/ refresh it)
 	var targetelement=(filetype=="js")? "script" : (filetype=="css")? "link" : "none" //determine element type to create nodelist using
 	var targetattr=(filetype=="js")? "src" : (filetype=="css")? "href" : "none" //determine corresponding attribute to test for
 	var allsuspects=document.getElementsByTagName(targetelement)
 	for (var i=allsuspects.length; i>=0; i--){ //search backwards within nodelist for matching elements to remove
  	if (allsuspects[i] && allsuspects[i].getAttribute(targetattr)!=null && allsuspects[i].getAttribute(targetattr).indexOf(filename)!=-1){
   	var newelement=this.createjscssfile(filename, filetype)
   	allsuspects[i].parentNode.replaceChild(newelement, allsuspects[i])
  	}
		}
 }
},


pageloadaction:function(pageurl){
	this.onpageload(pageurl) //call customize onpageload() function when an ajax page is fetched/ loaded
},

onpageload:function(pageurl){
 //do nothing by default
},

load:function(containerid, pageurl, bustcache, jsfiles, cssfiles){
	var jsfiles=(typeof jsfiles=="undefined" || jsfiles=="")? [] : jsfiles
	var cssfiles=(typeof cssfiles=="undefined" || cssfiles=="")? [] : cssfiles
	this.connect(containerid, pageurl, bustcache, jsfiles, cssfiles)
}

} //End object

//Sample usage:
//1) ajaxpagefetcher.load("mydiv", "content.htm", true)
//2) ajaxpagefetcher.load("mydiv2", "content.htm", true, ["external.js"])
//3) ajaxpagefetcher.load("mydiv2", "content.htm", true, ["external.js"], ["external.css"])
//4) ajaxpagefetcher.load("mydiv2", "content.htm", true, ["external.js", "external2.js"])
//5) ajaxpagefetcher.load("mydiv2", "content.htm", true, "", ["external.css", "external2.css"])
</script>
<script type="text/javascript">
// Fetch and display "content.htm" inside a DIV automatically as the page loads:
ajaxpagefetcher.load("joe", "content.htm", true)
</script>

Step 2: Place HTML below in your BODY section
HTML

Code:

<div id="bob"></div>

<script type="text/javascript">
<!-- Fetch and display "sub/content2.htm" inside a DIV when a link is clicked on. Also load one .css file-->
<a href="javascript:ajaxpagefetcher.load('bob', 'sub/content2.htm', false, '', ['page.css'])">Load Content 2</a>
</script>

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

JavaScriptBank · #8 05-30-2010, 07:23 PM

Web Design - a task that requires the creativity and a lot of time, to create the high quality products. However, in the environment of modern web nowadays, the Internet produced a lot of libraries, u... detail at JavaScriptBank.com - 2.000+ free JavaScript codes

Demo: JavaScript Helpful JavaScript resources for Designers

How to setup

Javascript floating message - Javascript multi level drop down menu - JavaScript in_array()

JavaScriptBank · #9 06-04-2010, 10:58 PM

This digital clock JavaScript code attempts to parody that cool 'glowing in the dark night' look of a LCD clock watch by its interface. LCD displays the ... detail at JavaScriptBank.com - 2.000+ free JavaScript codes

Demo: JavaScript LCD Digital Clock

How to setup

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

Code:

<style>
<!--
.styling{
background-color:black;
color:lime;
font: bold 15px MS Sans Serif;
padding: 3px;
}
-->
</style>

Step 2: Copy & Paste JavaScript code below in your HEAD section
JavaScript

Code:

<script>
<!--
/*****************************************
* LCD Clock script- by Javascriptkit.com
*****************************************/

var alternate=0
var standardbrowser=!document.all&&!document.getElementById

if (standardbrowser)
document.write('<form name="tick"><input type="text" name="tock" size="6"></form>')

function show(){
if (!standardbrowser)
var clockobj=document.getElementById? document.getElementById("digitalclock") : document.all.digitalclock
var Digital=new Date()
var hours=Digital.getHours()
var minutes=Digital.getMinutes()
var dn="AM"

if (hours==12) dn="PM" 
if (hours>12){
dn="PM"
hours=hours-12
}
if (hours==0) hours=12
if (hours.toString().length==1)
hours="0"+hours
if (minutes<=9)
minutes="0"+minutes

if (standardbrowser){
if (alternate==0)
document.tick.tock.value=hours+" : "+minutes+" "+dn
else
document.tick.tock.value=hours+"   "+minutes+" "+dn
}
else{
if (alternate==0)
clockobj.innerHTML=hours+"<font color='lime'>&nbsp;:&nbsp;</font>"+minutes+" "+"<sup style='font-size:1px'>"+dn+"</sup>"
else
clockobj.innerHTML=hours+"<font color='black'>&nbsp;:&nbsp;</font>"+minutes+" "+"<sup style='font-size:1px'>"+dn+"</sup>"
}
alternate=(alternate==0)? 1 : 0
setTimeout("show()",1000)
}
window.onload=show

//-->
</script>

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

Code:

<span id="digitalclock" class="styling"></span>

AJAX news ticker - JavaScript Refresh Page - JavaScript Unclosable Window

JavaScriptBank · #10 06-08-2010, 10:29 AM

Yes, as the title of this JavaScript tutorial said, these JavaScript tips and tricks are so tiny and simple for operating, but sometimes we (web developers and web programmers/coders) forget about the... detail at JavaScriptBank.com - 2.000+ free JavaScript codes

Demo: JavaScript 10 Tiny JavaScript Snippets for Good Beginners

How to setup

JavaScript Vertical Marquee - JavaScript DHTML analog clock - JavaScript Backwards Text