Computer Geeks

Computer Geeks

Geek Shop

Geek News

Geek Stuff

Science Geek

Computer Gaming

Linux Chat

Building Websites

Computer Forums

Computer Help Forum

Computer Hardware Forum

Computer Software Programs


Go Back   Computer Forums > Building Websites

Building Websites This section covers all aspects of publishing, developing and maintaining websites. Topics include: website design, graphic design, website programming, web hosting, website marketing (SEO, link exchange, publicity, advertising), monetization & etc.

Computer Geeks
» Active Discussions
Computer Geeks
No Threads to Display.
» Other Websites
- Software Publishing

- Server Hardening
Reply
 
Thread Tools Display Modes
  #101  
Old 03-23-2011, 01:41 AM
JavaScriptBank JavaScriptBank is offline
Senior Member
GB Guru
 
Join Date: Sep 2009
Posts: 180
Default Random of Testimonial Bubbles with XML and jQuery

This JavaScript code example uses jQuery framework and a XML file to create a section for displaying random of testimonial bubbles. It has an amazing design for layout and the testimonials will be dis... detail at JavaScriptBank.com - 2.000+ free JavaScript codes


How to setup

Step 1: must download files below
Files
Random of Testimonial Bubbles with XML and jQuery.zip






Reply With Quote
  #102  
Old 03-23-2011, 02:13 AM
JavaScriptBank JavaScriptBank is offline
Senior Member
GB Guru
 
Join Date: Sep 2009
Posts: 180
Default Simple Awesome Inline Modal Box with CSS3

Like JavaScript popup scripts ever presented on jsB@nk:

- [URL="http://www.javascriptbank.com/greybox-cool-html-javascript-ajax-flash-window-popup.html"]GreyBox: Cool HTML/JavaScript/AJAX/Flash... detail at JavaScriptBank.com - 2.000+ free JavaScript codes


How to setup

Step 1: Use CSS code below for styling the script
CSS
Code:
<style type="text/css">
#popup{	
z-index+999999;
position:absolute;
left:400px;
top:200px;
padding:10px;
display:none;
width:400px;
height:200px;
background: #FFFFFF;
box-shadow: 5px 5px 5px #ccc;
-moz-box-shadow: 5px 5px 5px #ccc;
-webkit-box-shadow: 5px 5px 5px #ccc;
}
.tit{
width:98%;
height:20px;
padding:5px;
background:#3654A8;
}
</style>
Step 2: Place JavaScript below in your HEAD section
JavaScript
Code:
<script type="text/javascript" language="JavaScript">
function ShowHide(divId)
{
	if(document.getElementById(divId).style.display == 'none')
	{
	 document.getElementById(divId).style.display='block';
	 document.bgColor="silver" ;
	}
	else
	{ 
	 document.getElementById(divId).style.display = 'none';
	 document.bgColor="#FFFFFF" ;
	}
}
</script>
Step 3: Copy & Paste HTML code below in your BODY section
HTML
Code:
<div class="body">
		
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dignissim volutpat sem ac scelerisque. Cras non rutrum lorem. Duis lacinia quam at leo ultrices commodo. Ut eget urna feugiat odio lobortis condimentum. Donec ultrices eros id mi bibendum feugiat. Vestibulum augue eros, ultrices id viverra at, euismod sed neque. Pellentesque non magna vitae velit venenatis condimentum. Phasellus eleifend tristique odio eget posuere. Nulla lacinia molestie quam at luctus. Vestibulum non lorem velit.</p>
				
	<p>Nulla venenatis pretium urna. Suspendisse nisl orci, congue a gravida a, ornare id ipsum. Duis sapien nulla, congue id dictum eget, sollicitudin non nisi. Integer congue dictum augue ac fermentum. Etiam nec semper dui. Pellentesque rutrum lobortis neque in imperdiet. Donec ut lacus felis, id scelerisque nisi. Maecenas lacus erat, cursus nec facilisis non, aliquet ut felis. Aenean <a href="javascript:void(0);" onclick="return ShowHide('popup');"><b>Click Here for PopUp</b></a>. Nam sit amet magna in quam cursus porttitor. Maecenas laoreet blandit tellus, at volutpat turpis suscipit et. Maecenas tempus convallis magna. Vivamus venenatis dolor quis ligula laoreet tristique. Praesent euismod porttitor ligula, vitae iaculis quam faucibus non. Sed sagittis ullamcorper erat vel porttitor.</p>
				
	<p>Suspendisse convallis vehicula ligula, in pellentesque lacus dictum in. Nam a ante eros, vitae luctus mauris. Sed tempus tellus at purus semper ac viverra nulla hendrerit. Quisque condimentum vestibulum cursus. Pellentesque vehicula commodo nisl, quis blandit tortor consequat sed. Praesent sed orci nisl. Donec id justo eu elit elementum convallis ac at metus. Nam quis erat ut lorem facilisis eleifend. Phasellus et velit sed nulla sodales blandit quis sed massa. Praesent suscipit auctor luctus. Praesent eleifend, est sit amet vestibulum placerat, mi erat placerat arcu, non luctus enim tellus a felis. Sed sed sapien dolor. Nulla vestibulum mattis ante, in convallis mauris tempor nec. Proin aliquam arcu eu orci luctus adipiscing. Etiam pulvinar, justo sed volutpat mattis, erat purus gravida sem, vitae pretium eros velit sit amet dolor. </p>
	
	</div>
	<div id="popup">

		<div class="tit">Your Title </div>
		<p>Suspendisse convallis vehicula ligula, in pellentesque lacus dictum in. Nam a ante eros, vitae luctus mauris. Sed tempus tellus at purus semper ac viverra nulla </p>
		<a href="javascript:void(0);" onclick="return ShowHide('popup');">Close</a>
	</div>





Reply With Quote
  #103  
Old 03-30-2011, 07:31 PM
JavaScriptBank JavaScriptBank is offline
Senior Member
GB Guru
 
Join Date: Sep 2009
Posts: 180
Default JavaScript Loading Progress Effect with jQuery

A very unique and amazing JavaScript code example to create JavaScript loading progress effects on the web pages. With this ver... detail at JavaScriptBank.com - 2.000+ free JavaScript codes


How to setup

Step 1: must download files below
Files
JavaScript Loading Progress Effect with jQuery.zip






Reply With Quote
  #104  
Old 03-30-2011, 08:04 PM
JavaScriptBank JavaScriptBank is offline
Senior Member
GB Guru
 
Join Date: Sep 2009
Posts: 180
Default Simple JavaScript Code for Layer Display Toggle

One more JavaScript code example to show/hide a layer every time the users click the specified text link. In live demo of this JavaScript code example, the script used to toggle the comments in a post... detail at JavaScriptBank.com - 2.000+ free JavaScript codes


How to setup

Step 1: CSS below for styling thescript, place it into HEAD section
CSS
Code:
<style type="text/css">
/*
     This script downloaded from www.JavaScriptBank.com
     Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
*/

div.quote
{
	margin-left: 25%;
	padding: 10px;
	background-color: #FFCF31;
	border: 1px solid #00009C;
	width: 450px;
	text-align: left;
}

div.quote p {
	font-size: .8em;
	margin: 0px 0px 0px 0px;
}

div#commentForm {
	display: none;
	margin: 0px 20px 0px 20px;
	font-family: Arial, sans-serif;
	font-size: .8em;
}

a.commentLink {
 	font-family: Arial, sans-serif;
	 font-size: .9em;
}
</style>
Step 2: Place JavaScript below in your HEAD section
JavaScript
Code:
<script type="text/javascript">
// Created by: Justin Barlow | http://www.netlobo.com
// This script downloaded from www.JavaScriptBank.com

function toggleLayer(whichLayer) {
  var elem, vis;
  if(document.getElementById) // this is the way the standards work
    elem = document.getElementById(whichLayer);
  else if(document.all) // this is the way old msie versions work
      elem = document.all[whichLayer];
  else if(document.layers) // this is the way nn4 works
    elem = document.layers[whichLayer];
  vis = elem.style;
  // if the style.display value is blank we try to figure it out here
  if(vis.display==''&&elem.offsetWidth!=undefined&&elem.offsetHeight!=undefined)
    vis.display = (elem.offsetWidth!=0&&elem.offsetHeight!=0)?'block':'none';
  vis.display = (vis.display==''||vis.display=='block')?'none':'block';
}
</script>
Step 3: Copy & Paste HTML code below in your BODY section
HTML
Code:
<!--
/*
     This script downloaded from www.JavaScriptBank.com
     Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
*/
-->
<div class="quote">

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent porttitor luctus quam. Pellentesque diam libero, feugiat quis, porttitor sagittis, suscipit dignissim, pede. Duis dapibus mauris at enim. Morbi vehicula turpis nec massa.</p>
<p style="text-align: right;"><a class="commentLink" title="Add a comment to this entry" href="javascript:toggleLayer('commentForm');">Add a comment</a>

<div id="commentForm">
<form id="addComment" action="" method="get">
 	<p>Name:<br>
	 <input name="name"><br>
	 Comment:<br>
	 <textarea rows="3" cols="40" name="comment"></textarea><br>

	 <input name="submit" value="Add Comment" type="submit"> <input onclick="javascript:toggleLayer('commentForm');" name="reset" value="Cancel" type="reset"></p>
</form>
</div>

</div>





Reply With Quote
  #105  
Old 03-30-2011, 08:46 PM
JavaScriptBank JavaScriptBank is offline
Senior Member
GB Guru
 
Join Date: Sep 2009
Posts: 180
Default Cool JavaScript Digital Countdown with jQuery

A very amazing JavaScript countdown timer script with cool layout to display on your web pages. This JavaScript timer countd... detail at JavaScriptBank.com - 2.000+ free JavaScript codes


How to setup

Step 1: Download files below
Files
Cool JavaScript Digital Countdown with jQuery.zip






Reply With Quote
  #106  
Old 04-24-2011, 09:25 PM
JavaScriptBank JavaScriptBank is offline
Senior Member
GB Guru
 
Join Date: Sep 2009
Posts: 180
Default Auto Thousand-Grouped Number Input Fields

One more JavaScript code example to build an auto thousand-grouped number after the users finish to type. JavaScript source code looks good and very easy to use.... detail at JavaScriptBank.com - 2.000+ free JavaScript codes


How to setup

Step 1: Place JavaScript below in your HEAD section
JavaScript
Code:
<script type="text/javascript">

// Created by: Pavel Donchev | http://chameleonbulgaria.com/
// This script downloaded from www.JavaScriptBank.com

function currency(which){
		currencyValue = which.value;
		currencyValue = currencyValue.replace(",", "");
		decimalPos = currencyValue.lastIndexOf(".");
		if (decimalPos != -1){
				decimalPos = decimalPos + 1;
		}
		if (decimalPos != -1){
				decimal = currencyValue.substring(decimalPos, currencyValue.length);
				if (decimal.length > 2){
						decimal = decimal.substring(0, 2);
				}
				if (decimal.length < 2){
						while(decimal.length < 2){
							 decimal += "0";
						}
				}
		}
		if (decimalPos != -1){
				fullPart = currencyValue.substring(0, decimalPos - 1);
		} else {
				fullPart = currencyValue;
				decimal = "00";
		}
		newStr = "";
		for(i=0; i < fullPart.length; i++){
				newStr = fullPart.substring(fullPart.length-i-1, fullPart.length - i) + newStr;
				if (((i+1) % 3 == 0) & ((i+1) > 0)){
						if ((i+1) < fullPart.length){
							 newStr = "," + newStr;
						}
				}
		}
		which.value = newStr + "." + decimal;
}

function normalize(which){
		alert("Normal");
		val = which.value;
		val = val.replace(",", "");
		which.value = val;
}

</script>
Step 2: Copy & Paste HTML code below in your BODY section
HTML
Code:
$ <input type="text" name="currencyField1" onchange="currency(this);" />





Reply With Quote
  #107  
Old 04-24-2011, 09:57 PM
JavaScriptBank JavaScriptBank is offline
Senior Member
GB Guru
 
Join Date: Sep 2009
Posts: 180
Default Awesome Tabbing Navigation with Prototype and AJAX

A very cool JavaScript code example to create tabbing navigation menus for display information on your web pages. This tabb... detail at JavaScriptBank.com - 2.000+ free JavaScript codes


How to setup

Step 1: Download files below
Files
Awesome Tabbing Navigation with Prototype and AJAX.zip






Reply With Quote
  #108  
Old 04-25-2011, 01:58 AM
JavaScriptBank JavaScriptBank is offline
Senior Member
GB Guru
 
Join Date: Sep 2009
Posts: 180
Default XMLWriter: Simple JavaScript XML Creator

XML - a type of data defining - becoming more popular at present because of its flexibility and convenience, data defined by XML become more visual and... detail at JavaScriptBank.com - 2.000+ free JavaScript codes


How to setup

Step 1: Use JavaScript code below to setup the script
JavaScript
Code:
<script type="text/javascript">
// Created by: Ariel Flesler | http://flesler.blogspot.com/2008/03/xmlwriter-for-javascript.html
// Licensed under: BSD License
// This script downloaded from www.JavaScriptBank.com

/**
 * XMLWriter - XML generator for Javascript, based on .NET's XMLTextWriter.
 * Copyright (c) 2008 Ariel Flesler - aflesler(at)gmail(dot)com | http://flesler.blogspot.com
 * Licensed under BSD (http://www.opensource.org/licenses/bsd-license.php)
 * Date: 3/12/2008
 * @version 1.0.0
 * @author Ariel Flesler
 * http://flesler.blogspot.com/2008/03/xmlwriter-for-javascript.html
 */
 
function XMLWriter( encoding, version ){
	if( encoding )
		this.encoding = encoding;
	if( version )
		this.version = version;
};
(function(){
	
XMLWriter.prototype = {
	encoding:'ISO-8859-1',// what is the encoding
	version:'1.0', //what xml version to use
	formatting: 'indented', //how to format the output (indented/none)  ?
	indentChar:'\t', //char to use for indent
	indentation: 1, //how many indentChar to add per level
	newLine: '\n', //character to separate nodes when formatting
	//start a new document, cleanup if we are reusing
	writeStartDocument:function( standalone ){
		this.close();//cleanup
		this.stack = [ ];
		this.standalone = standalone;
	},
	//get back to the root
	writeEndDocument:function(){
		this.active = this.root;
		this.stack = [ ];
	},
	//set the text of the doctype
	writeDocType:function( dt ){
		this.doctype = dt;
	},
	//start a new node with this name, and an optional namespace
	writeStartElement:function( name, ns ){
		if( ns )//namespace
			name = ns + ':' + name;
		
		var node = { n:name, a:{ }, c: [ ] };//(n)ame, (a)ttributes, (c)hildren
		
		if( this.active ){
			this.active.c.push(node);
			this.stack.push(this.active);
		}else
			this.root = node;
		this.active = node;
	},
	//go up one node, if we are in the root, ignore it
	writeEndElement:function(){
		this.active = this.stack.pop() || this.root;
	},
	//add an attribute to the active node
	writeAttributeString:function( name, value ){
		if( this.active )
			this.active.a[name] = value;
	},
	//add a text node to the active node
	writeString:function( text ){
		if( this.active )
			this.active.c.push(text);
	},
	//shortcut, open an element, write the text and close
	writeElementString:function( name, text, ns ){
		this.writeStartElement( name, ns );
		this.writeString( text );
		this.writeEndElement();
	},
	//add a text node wrapped with CDATA
	writeCDATA:function( text ){
		this.writeString( '<![CDATA[' + text + ']]>' );
	},
	//add a text node wrapped in a comment
	writeComment:function( text ){
		this.writeString('<!-- ' + text + ' -->');
	},
	//generate the xml string, you can skip closing the last nodes
	flush:function(){		
		if( this.stack && this.stack[0] )//ensure it's closed
			this.writeEndDocument();
		
		var 
			chr = '', indent = '', num = this.indentation,
			formatting = this.formatting.toLowerCase() == 'indented',
			buffer = '<?xml version="'+this.version+'" encoding="'+this.encoding+'"';
			
			/*
			*	modded by Phong Thai @ JavaScriptBank.com
			*/
			buffer = buffer.replace( '?', '?' );
			
		if( this.standalone !== undefined )
			buffer += ' standalone="'+!!this.standalone+'"';
		buffer += ' ?>';
		
		buffer = [buffer];
		
		if( this.doctype && this.root )
			buffer.push('<!DOCTYPE '+ this.root.n + ' ' + this.doctype+'>'); 
		
		if( formatting ){
			while( num-- )
				chr += this.indentChar;
		}
		
		if( this.root )//skip if no element was added
			format( this.root, indent, chr, buffer );
		
		return buffer.join( formatting ? this.newLine : '' );
	},
	//cleanup, don't use again without calling startDocument
	close:function(){
		if( this.root )
			clean( this.root );
		this.active = this.root = this.stack = null;
	},
	getDocument: window.ActiveXObject 
		? function(){ //MSIE
			var doc = new ActiveXObject('Microsoft.XMLDOM');
			doc.async = false;
			doc.loadXML(this.flush());
			return doc;
		}
		: function(){// Mozilla, Firefox, Opera, etc.
			return (new DOMParser()).parseFromString(this.flush(),'text/xml');
	}
};

//utility, you don't need it
function clean( node ){
	var l = node.c.length;
	while( l-- ){
		if( typeof node.c[l] == 'object' )
			clean( node.c[l] );
	}
	node.n = node.a = node.c = null;	
};

//utility, you don't need it
function format( node, indent, chr, buffer ){
	var 
		xml = indent + '<' + node.n,
		nc = node.c.length,
		attr, child, i = 0;
		
	for( attr in node.a )
		xml += ' ' + attr + '="' + node.a[attr] + '"';
	
	xml += nc ? '>' : ' />';

	buffer.push( xml );
		
	if( nc ){
		do{
			child = node.c[i++];
			if( typeof child == 'string' ){
				if( nc == 1 )//single text node
					return buffer.push( buffer.pop() + child + '</'+node.n+'>' );					
				else //regular text node
					buffer.push( indent+chr+child );
			}else if( typeof child == 'object' ) //element node
				format(child, indent+chr, chr, buffer);
		}while( i < nc );
		buffer.push( indent + '</'+node.n+'>' );
	}
};

})();
</script>
Step 2: Place HTML below in your BODY section
HTML
Code:
<script type="text/javascript">
var xw = new XMLWriter('UTF-8');
xw.formatting = 'indented';//add indentation and newlines
xw.indentChar = ' ';//indent with spaces
xw.indentation = 2;//add 2 spaces per level

xw.writeStartDocument( );
xw.writeDocType('"items.dtd"');
xw.writeStartElement( 'items' );
	
	xw.writeComment('button');
	xw.writeStartElement('item');
		xw.writeAttributeString( 'id', 'item-1');
		xw.writeAttributeString( 'enabled', 'true' );
		xw.writeStartElement( 'code');
			xw.writeCDATA( '<button>Save</button>' );
		xw.writeEndElement();
		xw.writeElementString('description', 'a save button');
	xw.writeEndElement();
	
	xw.writeComment('image');
	xw.writeStartElement('item');
		xw.writeAttributeString( 'id', 'item-2');
		xw.writeAttributeString( 'enabled', 'false' );
		xw.writeStartElement( 'code');
			xw.writeCDATA( '<img src="photo.gif" alt="me" />' );
		xw.writeEndElement();
		xw.writeElementString('description', 'a pic of myself!');
	xw.writeEndElement();
	
	xw.writeComment('link');
	xw.writeStartElement('item');
		xw.writeAttributeString( 'id', 'item-3');
		xw.writeAttributeString( 'enabled', 'true' );
		xw.writeStartElement( 'code');
			xw.writeCDATA( '<a href="http://google.com">Google</a>' );
		xw.writeEndElement();
		xw.writeElementString('description', 'a link to Google');
	xw.writeEndElement();
	
xw.writeEndElement();
xw.writeEndDocument();

var xml = xw.flush(); //generate the xml string
xw.close();//clean the writer
xw = undefined;//don't let visitors use it, it's closed
//set the xml
document.getElementById('parsed-xml').value = xml;
</script>





Reply With Quote
  #109  
Old 04-25-2011, 03:07 AM
JavaScriptBank JavaScriptBank is offline
Senior Member
GB Guru
 
Join Date: Sep 2009
Posts: 180
Default Simple JavaScript Page-Note Glossary

If you ever seen many web pages, posts of professional knowledges, specialized in skills or researches; perhaps you would see many specialized in words that they're explained after each post/page.

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


How to setup

Step 1: Copy & Paste CSS code below in your HEAD section
CSS
Code:
<style type="text/css">
/*
     This script downloaded from www.JavaScriptBank.com
     Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
*/

dl.glossary:after {
  content: "."; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden;
}
dl.glossary dt {
  float: left;
  clear: left;
  margin: 0;
  padding: 0 0 5px;
}
dl.glossary dt:after {
  content: ":";
}
dl.glossary dd {
  float: left;
  clear: right;
  margin: 0 0 0 5px;
  padding: 0 0 5px;
}
* html dl.glossary dd {
  clear: none;
  width: 80%;
}
</style>
Step 2: Copy & Paste JavaScript code below in your HEAD section
JavaScript
Code:
<script type="text/javascript">
// Created by: Aaron Gustafson | http://www.easy-designs.net/
// This script downloaded from www.JavaScriptBank.com

// ---------------------------------------------------------------------
//                             onLoad Handler
// ---------------------------------------------------------------------
var old = window.onload; // catch any existing onload calls 1st
window.onload = function () {
  if (old) { // execute existing onloads
    old();
  };
  for (var ii = 0; arguments.callee.actions.length > ii; ii++) {
    arguments.callee.actions[ii]();
  };
};
window.onload.actions = [];


/*------------------------------------------------------------------------------
Object:         pageGlossary (formerly makeGlossary)
Author:         Aaron Gustafson (aaron at easy-designs dot net)
Creation Date:  27 November 2005
Version:        1.0
Homepage:       http://www.easy-designs.net/code/pageGlossary/
License:        Creative Commons Attribution-ShareAlike 2.0 License
                http://creativecommons.org/licenses/by-sa/2.0/
Note:           If you change or improve on this script, please let us know by 
                emailing the author (above) with a link to your demo page.
------------------------------------------------------------------------------*/
var pageGlossary = {
  getFrom:  false,
  buildIn:  false,
  glossArr: [],
  usedArr:  [],
  init:     function( fromId, toId ){
    if( !document.getElementById || 
        !document.getElementsByTagName || 
        !document.getElementById( fromId ) || 
        !document.getElementById( toId ) ) return;
    pageGlossary.getFrom = document.getElementById( fromId );
    pageGlossary.buildIn = document.getElementById( toId );
    pageGlossary.collect();
    if( pageGlossary.usedArr.length < 1 ) return;
    pageGlossary.glossArr = pageGlossary.ksort( pageGlossary.glossArr );
    pageGlossary.build();
  },
  collect:  function(){
    var dfns  = pageGlossary.getFrom.getElementsByTagName('dfn');
    var abbrs = pageGlossary.getFrom.getElementsByTagName('abbr');
    var acros = pageGlossary.getFrom.getElementsByTagName('acronym');
    var arr = [];
    arr = arr.concat( dfns, abbrs, acros );
    if( ( arr[0].length == 0 ) &&
        ( arr[1].length == 0 ) && 
        ( arr[2].length == 0 ) ) return;
    var arrLength = arr.length;
    for( var i=0; i < arrLength; i++ ){
      var nestedLength = arr[i].length;
      if( nestedLength < 1 ) continue;
      for( var j=0; j < nestedLength; j++ ){
        if( !arr[i][j].hasChildNodes() ) continue;
        var trm = arr[i][j].firstChild.nodeValue;
        var dfn = arr[i][j].getAttribute( 'title' );
        if( !pageGlossary.inArray( trm, pageGlossary.usedArr ) ){
          pageGlossary.usedArr.push( trm );
          pageGlossary.glossArr[trm] = dfn;
        }
      }
    }
  },
  build:    function(){
    var h2 = document.createElement('h2');
    h2.appendChild( document.createTextNode( 'Page Glossary' ) );
    var dl = document.createElement('dl');
    dl.className = 'glossary';
    for( key in pageGlossary.glossArr ){
      var dt = document.createElement( 'dt' );
      dt.appendChild( document.createTextNode( key ) );
      dl.appendChild( dt );
      var dd = document.createElement('dd');
      dd.appendChild( document.createTextNode( pageGlossary.glossArr[key] ) );
      dl.appendChild( dd );
    }
    pageGlossary.buildIn.appendChild( h2 );
    pageGlossary.buildIn.appendChild( dl );
  },
  addEvent: function( obj, type, fn ){  // the add event function
    if (obj.addEventListener) obj.addEventListener( type, fn, false );
    else if (obj.attachEvent) {
      obj['e'+type+fn] = fn;
      obj[type+fn] = function() {
        obj['e'+type+fn]( window.event );
      };
      obj.attachEvent( 'on'+type, obj[type+fn] );
    }
  },
  ksort:    function( arr ){
    var rArr = [], tArr = [], n=0, i=0, el;
    for( el in arr ) tArr[n++] = el + '|' + arr[el];
    tArr = tArr.sort();
    var arrLength = tArr.length;
    for( var i=0; i < arrLength; i++ ){
      var x = tArr[i].split( '|' );
      rArr[x[0]] = x[1];
    }
    return rArr;
  },
  inArray:  function( needle, haystack ){
    var arrLength = haystack.length;
    for( var i=0; i < arrLength; i++ ){
      if( haystack[i] === needle ) return true;
    }
    return false;
  }
};

pageGlossary.addEvent(
  window, 'load', function(){
    pageGlossary.init('content','extras');
  }
);
</script>
Step 3: Copy & Paste HTML code below in your BODY section
HTML
Code:
<!--
/*
     This script downloaded from www.JavaScriptBank.com
     Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
*/
-->
<div style="text-align: left; width: 70%;">

<div id="content">
<p>
Lorem ipsum <dfn title="A Web browser created by Microsoft">Internet Explorer</dfn> dolor sit amet, consectetuer adipiscing elit 18 <abbr title="kilobytes">kB</abbr>, sed diam nonummy nibh euismod tincidunt ut laoreet <acronym title="Hypertext Markup Language">HTML</acronym> dolore magna aliquam erat volutpat.</p>
</div>

<div id="extras">
<!--  The page glossary is built here  -->

</div>

<br /><br /><br /><b>Note</b>
<p>
In the last section of the script, the ids for the content and glossary are given, in this example they are 'content' and 'extras'. The script will process the abbreviations, acronyms, and definitions contained in the 'content' id and then place them within the 'extras' id.
</p>
</div>





Reply With Quote
  #110  
Old 04-25-2011, 03:43 AM
JavaScriptBank JavaScriptBank is offline
Senior Member
GB Guru
 
Join Date: Sep 2009
Posts: 180
Default Cool Analog Clock with Raphael by Amazing Styles

Collect the JavaScript code examples for creating cool JavaScript clocks is one of jsB@nk's initial criteria; till to this... detail at JavaScriptBank.com - 2.000+ free JavaScript codes


How to setup

Step 1: downloads
Files
Cool Analog Clock with Raphael by Amazing Styles.zip






Reply With Quote
Reply

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
JavaScript codes for Web DEV JavaScriptBank Building Websites 4 01-14-2011 09:31 PM
JavaScript codes for Web DEV JavaScriptBank Building Websites 0 04-20-2010 03:54 AM
JavaScript codes for Web DEV JavaScriptBank Building Websites 0 04-15-2010 10:39 AM
JavaScript codes for Web DEV JavaScriptBank Building Websites 0 03-01-2010 05:57 PM
JavaScript codes for Web DEV JavaScriptBank Building Websites 0 12-13-2009 07:00 PM

Powered by vBadvanced CMPS v3.2.3

All times are GMT -5. The time now is 08:01 AM.


Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.
HTML Help provided by HTML Help Central.