JavaScript library

JavaScriptBank · #21 (**permalink**) 12-28-2009, 12:58 AM

This one line script changes the image size and source on your thumbnail picture without reloading the page or using popups.... detail at JavaScriptBank. com - 2.000+ free JavaScript codes

[IMG]hxxp ://w w w.javascriptbank. com/javascript.images/image/enlarge-image-2.jpg[/IMG]
Demo: JavaScript Enlarge Image 2

[SIZE="4"]How to setup[/SIZE]

Step 1: Place HTML below in your BODY section
HTML

Code:

<b>Single-click the image to enlarge it; double-click to make it small again.</b><br>

<img src="gif_logojsb2.gif" onclick="this.src='gif_logojsb2.gif';this.height=180;this.width=480" ondblclick="this.src='gif_logojsb2.gif';this.height=60;this.width=150">
	<!--
    	This script downloaded from w w w.JavaScriptBank. com
    	Come to view and download over 2000+ free javascript at w w w.JavaScriptBank. com
	-->

JavaScript Spotlight - JavaScript Validate E-Mail - AJAX Page Content Loader

JavaScriptBank · #22 (**permalink**) 12-31-2009, 12:09 AM

This JavaScript tutorial will show you how to combine RSS, AJAX, and JavaScript to create a real-time RSS ticker.

Thanks to AJAX... detail at JavaScriptBank. com - 2.000+ free JavaScript codes

[IMG]hxxp ://w w w.javascriptbank. com/javascript.images/ajax/rss-ajax-newsticker.jpg[/IMG]
Demo: JavaScript RSS AJAX Newsticker

[SIZE="4"]How to setup[/SIZE]

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

Code:

<script type="text/javascript" src="rssticker.js"></script>

Step 2: Place HTML below in your BODY section
HTML

Code:

CNN:
<DIV style="HEIGHT: 100px; border-style: dotted; border-width: 1px; background-color: silver; text-align: left;">
<script type="text/javascript">
//rss_ticker(RSS_id, cachetime, divId, divClass, delay, optionalswitch)
new rss_ticker("CNN", 60, "cnnbox", "cnnclass", 200)

</script>
</DIV>
<br><br><br>
Each ticker on the page can be invoked independently, for example:
<DIV style="HEIGHT: 100px; border-style: dotted; border-width: 1px; background-color: silver; text-align: left;">
<PRE><script type="text/javascript">
//rss_ticker(RSS_id, cachetime, divId, divClass, delay, optionalswitch)
new rss_ticker("CNN", 60, "cnnbox", "cnnclass", 2000)
</script></PRE>

</DIV>

Step 3: must download files below
Files
rssticker.js

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

JavaScriptBank · #23 (**permalink**) 01-11-2010, 03:11 PM

Cast an interactive 'spotlight' on the image of your choice using this DHTML script. Move the light about using your mouse. This cool effect works in IE4+, degrading well with the rest.... detail at JavaScriptBank. com - 2.000+ free JavaScript codes

[IMG]hxxp ://w w w.javascriptbank. com/javascript.images/background/spotlight.jpg[/IMG]
Demo: JavaScript Spotlight

[SIZE="4"]How to setup[/SIZE]

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

Code:

<style type="text/css">
<!--
body{
background-image : url('none') !important; 
}

#content{
background-color : #ffffff;
position : absolute;
top : 0px;
left : 0px;
padding : 10px;
visibility : hidden;
}

#light{
position : absolute;
top : 0px;
left : 0px;
overflow : hidden;
}
//-->
</style>
	<!--
    	This script downloaded from w w w.JavaScriptBank. com
    	Come to view and download over 2000+ free javascript at w w w.JavaScriptBank. com
	-->

Step 2: Place HTML below in your BODY section
HTML

Code:

<script type="text/javascript" src="spotlight_part_1.js"></script>
<script type="text/javascript" src="spotlight_part_2.js"></script>
<div style="z-index: 110;"></div>
	<!--
    	This script downloaded from w w w.JavaScriptBank. com
    	Come to view and download over 2000+ free javascript at w w w.JavaScriptBank. com
	-->

Step 3: Download files below
Files
spotlight_part_1.js
spotlight_part_2.js

spotlight.gif

Command to print web page in javascript - Javascript Time Picker - JavaScript Go To URL Box

JavaScriptBank · #24 (**permalink**) 01-14-2010, 11:46 PM

One of the many cursor codes in our JavaScript library, this one creates dancing stars animating around your pointers mouse. This cur... detail at JavaScriptBank. com - 2.000+ free JavaScript codes

[IMG]hxxp ://w w w.javascriptbank. com/javascript.images/mouse/dancing-animation-stars-cursor.jpg[/IMG]
Demo: JavaScript Dancing Animation Stars Cursor

[SIZE="4"]How to setup[/SIZE]

Step 1: Place JavaScript below in your HEAD section
JavaScript

Code:

<script language="JavaScript">
<!--
/*
Dancing Stars cursor (Submitted by Kurt at kurt.grigg@virgin. net)
Modified and permission granted to Dynamic Drive to feature script in archive
For full source, usage terms, and 100's more DHTML scripts, visit hxxp ://dynamicdrive. com
*/

if (document.all){
document.write('<div id="starsDiv" style="position:absolute;top:0px;left:0px">')
for (xy=0;xy<7;xy++)
document.write('<div style="position:relative;width:3px;height:3px;background:#FFFF00;font-size:2px;visibility:visible"></div>')
document.write('</div>')
}

if (document.layers)
{window.captureEvents(Event.MOUSEMOVE);}
var yBase = 200;
var xBase = 200;
var yAmpl = 10;
var yMax = 40;
var step = .2;
var ystep = .5;
var currStep = 0;
var tAmpl=1;
var Xpos = 1;
var Ypos = 1;
var i = 0;
var j = 0;

if (document.all)
{
  function MoveHandler(){
  Xpos = document.body.scrollLeft+event.x;
  Ypos = document.body.scrollTop+event.y;
  }
  document.onmousemove = MoveHandler; 
}

else if (document.layers)
{
  function xMoveHandler(evnt){
  Xpos = evnt.pageX;
  Ypos = evnt.pageY;
  }
  window.onMouseMove = xMoveHandler;
}



function animateLogo() {
if (document.all)
{
 yBase = window.document.body.offsetHeight/4;
 xBase = window.document.body.offsetWidth/4;
}
else if (document.layers)
{
 yBase = window.innerHeight/4 ;
 xBase = window.innerWidth/4;
}

if (document.all)
{
var totaldivs=document.all.starsDiv.all.length
 for ( i = 0 ; i < totaldivs ; i++ )
 {
var tempdiv=document.all.starsDiv.all[i].style
  tempdiv.top = Ypos + Math.cos((20*Math.sin(currStep/20))+i*70)*yBase*(Math.sin(10+currStep/10)+0.2)*Math.cos((currStep + i*25)/10);
  tempdiv.left = Xpos + Math.sin((20*Math.sin(currStep/20))+i*70)*xBase*(Math.sin(10+currStep/10)+0.2)*Math.cos((currStep + i*25)/10);
 }
}

else if (document.layers)
{
 for ( j = 0 ; j < 7 ; j++ ) 
 {
var templayer="a"+j
  document.layers[templayer].top = Ypos + Math.cos((20*Math.sin(currStep/20))+j*70)*yBase*(Math.sin(10+currStep/10)+0.2)*Math.cos((currStep + j*25)/10);
  document.layers[templayer].left =Xpos + Math.sin((20*Math.sin(currStep/20))+j*70)*xBase*(Math.sin(10+currStep/10)+0.2)*Math.cos((currStep + j*25)/10);
 }
}
currStep += step;
setTimeout("animateLogo()", 15);
}
animateLogo();
// -->
</script>

Step 2: Place HTML below in your BODY section
HTML

Code:

<LAYER NAME="a0" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#FFFF00" CLIP="0,0,3,3"></LAYER>
<LAYER NAME="a1" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#FFFF00" CLIP="0,0,3,3"></LAYER>
<LAYER NAME="a2" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#FFFF00" CLIP="0,0,3,3"></LAYER>
<LAYER NAME="a3" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#FFFF00" CLIP="0,0,3,3"></LAYER>
<LAYER NAME="a4" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#FFFF00" CLIP="0,0,3,3"></LAYER>
<LAYER NAME="a5" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#FFFF00" CLIP="0,0,3,3"></LAYER>
<LAYER NAME="a6" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#FFFF00" CLIP="0,0,3,3"></LAYER>

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

JavaScriptBank · #25 (**permalink**) 02-03-2010, 04:05 AM

Floating background image script animates any image (or block of HTML) up and down the detail at JavaScriptBank. com - 2.000+ free JavaScript codes

[IMG]hxxp ://w w w.javascriptbank. com/javascript.images/image/up-down-floating-image.jpg[/IMG]
Demo: JavaScript Up-down floating image

[SIZE="4"]How to setup[/SIZE]

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

Code:

<SCRIPT>
//detecting browser to dynamically write appropriate DIVs/LAYERs
N=(navigator.appName.indexOf('Netscape')!=-1&&parseInt(navigator.appVersion)<5)
S=(navigator.appName.indexOf('Netscape')!=-1&&parseInt(navigator.appVersion)>4.9)
M=(navigator.appName.indexOf('Microsoft')!=-1)



Vis=new Array()
Vis[0]=(M||S) ? "hidden" : "hide"
Vis[1]=(M||S) ? "visible" : "show"

function GetDiv(divId,divY,divX,divW,divH,bCol,visb,zInd){
bkCol=(bCol!="")?((N)?" bgColor="+bCol:";background:"+bCol):""

Styl = (M||S) ? "<DIV" : "<LAYER"

if(M||S){
Styl+=" ID="+divId
Styl+=" style='position:absolute;top:"+divY+";left:"+divX+";width:"+divW+";height:"+divH+bkCol
Styl+=";visibility:"+Vis[visb]+";z-index:"+zInd
Styl+="'>"
}

if(N){
Styl+=" ID="+divId
Styl+=" top="+divY+" left="+divX+" width="+divW+" height="+divH+bkCol
Styl+=" visibility="+Vis[visb]+" z-index="+zInd
Styl+=">"
}
document.writeln(Styl)
}

function EndDiv(){
(M||S)? document.writeln("</DIV>"): document.writeln("</LAYER>")
}

function PutIt(ID,dX,dY){
if(N){
document.layers[ID].left=dX
document.layers[ID].top=dY
}
if(M){
document.all[ID].style.left=dX
document.all[ID].style.top=dY
}
if(S){
document.getElementById(ID).style.left=dX
document.getElementById(ID).style.top=dY
}
}

function ShowHide(ID,vs){
if(N){
document.layers[ID].visibility=Vis[vs]
}
if(M){
document.all[ID].style.visibility=Vis[vs]
}
if(S){
document.getElementById(ID).style.visibility=Vis[vs]
}
}

function Xof(ID){
if(N){
return document.layers[ID].left
}
if(M){
return document.all[ID].style.left
}
if(S){
return document.getElementById(ID).style.left
}
}

function Yof(ID){
if(N){
return document.layers[ID].top
}
if(M){
return document.all[ID].style.top
}
if(S){
return document.getElementById(ID).style.top
}
}



function Zind(ID,zz){
if(N){
document.layers[ID].zIndex=zz
}
if(M){
document.all[ID].style.zIndex=zz
}
if(S){
document.getElementById(ID).style.zIndex=zz
}
}

function ChangeCol(ID,colrx){
if(M)document.all[ID].style.background=colrx
if(N)document.layers[ID].bgColor=colrx
if(S)document.getElementById(ID).style.background=colrx
}

function DivWrite(IdName,Str) {
if (N){
document.layers[IdName].document.write(Str)
document.layers[IdName].document.close()
}
if(M) document.all[IdName].innerHTML=Str
if(S) document.getElementById(IdName).innerHTML=Str
}
</SCRIPT>

<SCRIPT>
GetDiv('Top',0,0,100,100,'pink',1,0)
document.write("Top Place")
EndDiv()
GetDiv('Bottom',4000,0,100,100,'pink',1,0)
document.write("Bottom Place")
EndDiv()
d=50
y=0

function Scroll(){
y+=d
if(y>=3800)d=-50
if(y<=0)d=50
window.scroll(0,y)
}

setInterval('Scroll()',50)

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

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

Code:

<BODY background="pic191.jpg">
</BODY>
	<!--
    	This script downloaded from w w w.JavaScriptBank. com
    	Come to view and download over 2000+ free javascript at w w w.JavaScriptBank. com
	-->

Step 3: must download files below
Files
pic191.jpg

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

JavaScriptBank · #26 (**permalink**) 02-06-2010, 12:57 AM

Script creates JavaScript menu with links based on rollover effect. While moving detail at JavaScriptBank. com - 2.000+ free JavaScript codes

[IMG]hxxp ://w w w.javascriptbank. com/javascript.images/image/onmouseover-slideshow.jpg[/IMG]
Demo: JavaScript OnMouseover Slideshow

[SIZE="4"]How to setup[/SIZE]

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

Code:

<script>

function changeimage(towhat,url){
if (document.images){
document.images.targetimage.src=towhat.src
gotolink=url
}
}
function warp(){
window.location=gotolink
}

</script>
<script language="JavaScript1.1">
var myimages=new Array()
var gotolink="#"

function preloadimages(){
for (i=0;i<preloadimages.arguments.length;i++){
myimages[i]=new Image()
myimages[i].src=preloadimages.arguments[i]
}
}


preloadimages("logojs.gif","photo1.jpg","photo2.jpg","photo3.jpg","photo4.jpg")
</script>
	<!--
    	This script downloaded from w w w.JavaScriptBank. com
    	Come to view and download over 2000+ free javascript at w w w.JavaScriptBank. com
	-->

Step 2: Place HTML below in your BODY section
HTML

Code:

<a href="" onMouseover="changeimage(myimages[0],this.href)">JavaScriptBank. com</a><br>
<a href="" onMouseover="changeimage(myimages[1],this.href)">JavaScriptBank. com</a><br>
<a href="" onMouseover="changeimage(myimages[2],this.href)">JavaScriptBank. com</a><br>
<a href="" onMouseover="changeimage(myimages[3],this.href)">JavaScriptBank. com</a><br>
<a href="" onMouseover="changeimage(myimages[4],this.href)">JavaScriptBank. com</a><br>
<a href="javascript:warp()"><img src="logojs.gif" name="targetimage" border=0></a>
	<!--
    	This script downloaded from w w w.JavaScriptBank. com
    	Come to view and download over 2000+ free javascript at w w w.JavaScriptBank. com
	-->

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

JavaScriptBank · #27 (**permalink**) 02-10-2010, 03:48 AM

The Internet is getting more and more important, we can use it for working, learning, for entertaining ... Only in the aspect of entertainment, we use the Internet to play the detail at JavaScriptBank. com - 2.000+ free JavaScript codes

[IMG]hxxp ://w w w.javascriptbank. com/javascript.images/article/9-funniest-javascript-effects.jpg[/IMG]
Demo: JavaScript 9 Funniest JavaScript effects

[SIZE="4"]How to setup[/SIZE]

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

JavaScriptBank · #28 (**permalink**) 02-13-2010, 05:38 PM

This JavaScript converts special HTML characters to their entities version inside user entered data such as a TEXTAREA before the detail at JavaScriptBank. com - 2.000+ free JavaScript codes

[IMG]hxxp ://w w w.javascriptbank. com/javascript.images/utility/html-to-entities-script.jpg[/IMG]
Demo: JavaScript HTML to Entities script

[SIZE="4"]How to setup[/SIZE]

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

Code:

<SCRIPT type=text/javascript>

// HTML to Entities (form) script- By JavaScriptKit. com (hxxp ://w w w.javascriptkit. com)
// For this and over 400+ free scripts, visit JavaScript Kit- hxxp ://w w w.javascriptkit. com/
// This notice must stay intact for use

function html2entities(){
var re=/[(<>"'&]/g
for (i=0; i<arguments.length; i++)
arguments[i].value=arguments[i].value.replace(re, function(m){return replacechar(m)})
}

function replacechar(match){
if (match=="<")
return "&lt;"
else if (match==">")
return "&gt;"
else if (match=="\"")
return "&quot;"
else if (match=="'")
return "'"
else if (match=="&")
return "&amp;"
}


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

Step 2: Place HTML below in your BODY section
HTML

Code:

<FORM><TEXTAREA style="WIDTH: 400px; HEIGHT: 100px" name=data1></TEXTAREA><BR>
<INPUT onclick=html2entities(this.form.data1) type=button value="Convert special chars to entities"> 
</FORM>
	<!--
    	This script downloaded from w w w.JavaScriptBank. com
    	Come to view and download over 2000+ free javascript at w w w.JavaScriptBank. com
	-->

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

JavaScriptBank · #29 (**permalink**) 02-20-2010, 03:24 AM

SexyBookmarks - a small plugin for sharing the useful & helpful links on the famous social bookmark services (if... detail at JavaScriptBank. com - 2.000+ free JavaScript codes

[IMG]hxxp ://w w w.javascriptbank. com/javascript.images/article/integrate-sexybookmarks-into-your-personal-page-with-javascript.jpg[/IMG]
Demo: JavaScript Integrate SexyBookmarks into your Personal page with JavaScript

[SIZE="4"]How to setup[/SIZE]

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

Code:

<script type="text/javascript">
/*
	click handler for SexyBookmarks
	Credit: Phong Thai Cao - hxxp ://w w w.JavaScriptBank. com
	Please keep this creadit when you use this code
*/
jQuery('.sexy-bookmarks a.external').click(function() {
	// get the current URL & encode it into the standard URI
	var url = encodeURIComponent(window.location.href), desc = '';
	
	// parse the description for the above URL by the text() method of jQuery
	// the text must be placed in the P tag with ID="sexy-bookmarks-content"
	// so you can change the container of description with another tag and/or another ID
	if( jQuery('p.sexy-bookmarks-content').length ) {
		desc = encodeURIComponent(jQuery('p.sexy-bookmarks-content').text());
	}
	
	// detect the social bookmark site user want to share your URL
	// by checking the className of site that we'll declare in the HTML code
	// and assign the URL & description we got into the current anchor
	// then redirect to the clicked bookmark site, you can use window.open() method for opening the new window
	switch(this.parentNode.className) {
		case 'sexy-twittley':
			this.href += '?title=' + document.title + '&amp;url=' + url + '&amp;desc=' + desc + '&amp;pcat=Internet&amp;tags=';
			break;
		case 'sexy-digg':
			this.href += '?phase=2&title=' + document.title + '&url=' + url + '&desc=' + desc;
			break;
		case 'sexy-twitter':
			this.href += '?status=RT+@your_twitter_id:+' + document.title + '+-+' + url;
			break;
		case 'sexy-scriptstyle':
			this.href += '?title=' + document.title + '&url=' + url;
			break;
		case 'sexy-reddit':
			this.href += '?title=' + document.title + '&amp;url=' + url;
			break;
		case 'sexy-delicious':
			this.href += '?title=' + document.title + '&amp;url=' + url;
			break;
		case 'sexy-stumbleupon':
			this.href += '?title=' + document.title + '&amp;url=' + url;
			break;
		case 'sexy-mixx':
			this.href += '?title=' + document.title + '&amp;page_url=' + url + '&amp;desc=' + desc;
			break;
		case 'sexy-technorati':
			this.href += '?add=' + url;
			break;
		case 'sexy-blinklist':
			this.href += '?Action=Blink/addblink.php&amp;Title=' + document.title + '&amp;Url=' + url;
			break;
		case 'sexy-diigo':
			this.href += '?title=' + document.title + '&amp;url=' + url + '&amp;desc=' + desc;
			break;
		case 'sexy-yahoobuzz':
			this.href += '?submitHeadline=' + document.title + '&amp;submitUrl=' + url + '&amp;submitSummary=' + desc + '&amp;submitCategory=science&amp;submitAssetType=text';
			break;
		case 'sexy-myspace':
			this.href += '?t=' + document.title + '&amp;u=' + url;
			break;
		case 'sexy-facebook':
			this.href += '?t=' + document.title + '&amp;u=' + url;
			break;
		case 'sexy-designfloat':
			this.href += '?title=' + document.title + '&amp;url=' + url;
			break;
		case 'sexy-devmarks':
			this.href += '?posttitle=' + document.title + '&amp;posturl=' + url + '&amp;posttext=' + desc;
			break;
		case 'sexy-newsvine':
			this.href += '?h=' + document.title + '&amp;u=' + url;
			break;
		case 'sexy-google':
			this.href += '?op=add&amp;title=' + document.title + '&amp;bkmk=' + url;
			break;
	}
})
</script>

Step 2: Place HTML below in your BODY section
HTML

Code:

<script type="text/javascript" src="path/to/directory/js/jquery.js"></script>
<script type="text/javascript" src="path/to/directory/js/sexy-bookmarks-public.js"></script>
<link rel="stylesheet" type="text/css" href="path/to/directory/css/style.css" media="screen" />

<div class="sexy-bookmarks sexy-bookmarks-expand sexy-bookmarks-center sexy-bookmarks-bg-sexy">
     <ul class="socials">
    	<li class="sexy-twittley"><a href="hxxp ://twittley. com/submit/" rel="nofollow" class="external" title="Submit this to Twittley">Submit this to Twittley</a></li>
    	<li class="sexy-digg"><a href="hxxp ://digg. com/submit" rel="nofollow" class="external" title="Digg this!">Digg this!</a></li>
    	<li class="sexy-twitter"><a href="hxxp ://twitter. com/home" rel="nofollow" class="external" title="Tweet This!">Tweet This!</a></li>
    	<li class="sexy-scriptstyle"><a href="hxxp ://scriptandstyle. com/submit" rel="nofollow" class="external" title="Submit this to Script &amp; Style">Submit this to Script &amp; Style</a></li>
    	<li class="sexy-reddit"><a href="hxxp ://reddit. com/submit" rel="nofollow" class="external" title="Share this on Reddit">Share this on Reddit</a></li>
    	<li class="sexy-delicious"><a href="hxxp ://del.icio.us/post" rel="nofollow" class="external" title="Share this on del.icio.us">Share this on del.icio.us</a></li>
    	<li class="sexy-stumbleupon"><a href="hxxp ://w w w.stumbleupon. com/submit" rel="nofollow" class="external" title="Stumble upon something good? Share it on StumbleUpon">Stumble upon something good? Share it on StumbleUpon</a></li>
    	<li class="sexy-mixx"><a href="hxxp ://w w w.mixx. com/submit" rel="nofollow" class="external" title="Share this on Mixx">Share this on Mixx</a></li>
    	<li class="sexy-technorati"><a href="hxxp ://technorati. com/faves" rel="nofollow" class="external" title="Share this on Technorati">Share this on Technorati</a></li>
    	<li class="sexy-blinklist"><a href="hxxp ://w w w.blinklist. com/index.php" rel="nofollow" class="external" title="Share this on Blinklist">Share this on Blinklist</a></li>
    	<li class="sexy-diigo"><a href="hxxp ://w w w.diigo. com/post">Post this on Diigo</a></li>
    	<li class="sexy-yahoobuzz"><a href="hxxp ://buzz.yahoo. com/submit/" rel="nofollow" class="external" title="Buzz up!">Buzz up!</a></li>
    	<li class="sexy-myspace"><a href="hxxp ://w w w.myspace. com/Modules/PostTo/Pages/" rel="nofollow" class="external" title="Post this to MySpace">Post this to MySpace</a></li>
    	<li class="sexy-facebook"><a href="hxxp ://w w w.facebook. com/share.php" rel="nofollow" class="external" title="Share this on Facebook">Share this on Facebook</a></li>
    	<li class="sexy-designfloat"><a href="hxxp ://w w w.designfloat. com/submit.php" rel="nofollow" class="external" title="Submit this to DesignFloat">Submit this to DesignFloat</a></li>
    	<li class="sexy-devmarks"><a href="hxxp ://devmarks. com/index.php" rel="nofollow" class="external" title="Share this on Devmarks">Share this on Devmarks</a></li>
    	<li class="sexy-newsvine"><a href="hxxp ://w w w.newsvine. com/_tools/seed&amp;save" rel="nofollow" class="external" title="Seed this on Newsvine">Seed this on Newsvine</a></li>
    	<li class="sexy-google"><a href="hxxp ://w w w.google. com/bookmarks/mark" rel="nofollow" class="external" title="Add this to Google Bookmarks">Add this to Google Bookmarks</a></li>
    </ul>
</div>

Step 3: Download files below
Files
sexy-bookmarks-public.js
sexy-bookmarks-style.css
sexy-sprite.png
sexy-trans.png
jquery.js

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

JavaScriptBank · #30 (**permalink**) 02-24-2010, 03:12 PM

Need a system to rate an item on your web page? Let's implement the simple script to do that. This script is very easy to setup and modify, you only copy all JavaScript code into your web page (should... detail at JavaScriptBank. com - 2.000+ free JavaScript codes

[IMG]hxxp ://w w w.javascriptbank. com/javascript.images/utility/rating-star-script-index.jpg[/IMG]
Demo: JavaScript Rating star script

[SIZE="4"]How to setup[/SIZE]

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

Code:

<SCRIPT language=JavaScript>
string="<a href='hxxp ://javascriptbank. com/' style='text-decoration: none;'>JavaScriptBank. com</a>"   // string to elastic text
pausetime=100; // time to elastic effect. Decrease to slow

// do not modify below this line
var sizes = new Array("-8px","-4px","-2px","-1px","0px", "1px", "2px", "4px", "8px", "16px", "32px");
sizes.pos = 0; 

function rubberBand()
 {
  var el = document.all.elastic;
  if (el.direction==null)  {el.direction = 1;}
  else if ((sizes.pos > sizes.length-2) || (sizes.pos==0)) {el.direction *= -1;}
  el.style.letterSpacing = sizes[sizes.pos += el.direction];
  setTimeout('rubberBand()',pausetime);
}
rubberBand();

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

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

Code:

<P id=elastic style="FONT-SIZE: 25px; POSITION: relative; TOP: 20px" align=center>
<!-- put desired text below. Replase my text.  HTML tag allowed-->
<A href="hxxp ://javascriptbank. com/" style="text-decoration: none;">JavaScriptBank. com</A>
<!-- put desired text above. Replase my text. HTML tag allowed -->
</P>
	<!--
    	This script downloaded from w w w.JavaScriptBank. com
    	Come to view and download over 2000+ free javascript at w w w.JavaScriptBank. com
	-->

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

JavaScriptBank · #31 (**permalink**) 03-01-2010, 11:52 PM

Cross-Browser DHTML Horizontal Slide Show: JavaScript concatenates and slides any number of images from right to left. Adjustable: Size, Backgroun... detail at JavaScriptBank. com - 2.000+ free JavaScript codes

[IMG]hxxp ://w w w.javascriptbank. com/javascript.images/scroller/horizontal-slider-javascript-v2-2.jpg[/IMG]
Demo: JavaScript Horizontal Slider JavaScript v2.2

[SIZE="4"]How to setup[/SIZE]

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

Code:

<STYLE type=text/css>A {
	TEXT-DECORATION: none
}
A:link {
	COLOR: blue
}
A:visited {
	COLOR: blue
}
A:hover {
	COLOR: red; BACKGROUND-COLOR: #66ffff
}
.tab {
	FONT-SIZE: 12px; FONT-FAMILY: Arial,Helvetica
}
.tabc {
	FONT-WEIGHT: bold; FONT-SIZE: 12px; COLOR: navy; FONT-FAMILY: Arial,Helvetica; TEXT-ALIGN: center
}
.tabt {
	FONT-WEIGHT: bold; FONT-SIZE: 18px; COLOR: red; FONT-FAMILY: Arial,Helvetica; TEXT-ALIGN: center
}
</STYLE>
	<!--
    	This script downloaded from w w w.JavaScriptBank. com
    	Come to view and download over 2000+ free javascript at w w w.JavaScriptBank. com
	-->

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

Code:

<SCRIPT language=JavaScript>
if(top.location != self.location)
top.location.replace(self.location);
</SCRIPT>

<SCRIPT language=javascript>

//If using any portion of this DEMO script,
//one must insert along this notice too:


/***********************************
	vasile barsan
*   hxxp ://javascripts.vbarsan. com/
*   This notice may not be removed 
***********************************/

var swidth=310;var sheight=50;var sspeed=2;var resspeed=sspeed;var restart=sspeed;var rspeed=sspeed;var imagef='';
preload1 = new Image();
preload1.src = "../image/gif_logojsb2.gif";
preload2 = new Image();
preload2.src = "../image/gif_logojsb.gif";
preload3 = new Image();
preload3.src = "../image/gif_logojsb2.gif";
var leftimage=new Array();
leftimage[0]='<a href="hxxp ://javascriptbank. com"><img src='+preload1.src+' width=310 height=47 alt="JavaScript Bank"></a>';
leftimage[1]='<a href="hxxp ://javascriptbank. com"><img src='+preload2.src+' width=310 height=47 alt="JavaScript Bank"></a>';
leftimage[2]='<a href="hxxp ://javascriptbank. com"><img src='+preload3.src+' width=310 height=47 alt="JavaScript Bank"></a>';
for(mi=0;mi<leftimage.length;mi++)imagef=imagef+leftimage[mi];
function goup(){if(sspeed!=rspeed*8){sspeed=sspeed*2;restart=sspeed;}}
function start(){if(document.getElementById)firstns6(document.getElementById('slider'));else if(document.all)firstie(slider);else if(document.layers)firstns4(document.slider1.document.slider2);}
var operbr=navigator.userAgent.toLowerCase().indexOf('opera');if(operbr==-1&&navigator.product&&navigator.product=="Gecko"){var agt = navigator.userAgent.toLowerCase();var rvStart = agt.indexOf('rv:');var rvEnd = agt.indexOf(')', rvStart);var check15 = agt.substring(rvStart+3, rvEnd);if(parseFloat(check15)>=1.8) operbr=0;}if (navigator.appVersion.indexOf("Mac")!=-1)operbr=0;
function firstns4(whichdiv){tdivns4=eval(whichdiv);tdivns4.document.write('<nobr>'+imagef+'</nobr>');tdivns4.document.close();thel=tdivns4.document.width;tdivns4.left=swidth;slidens4();}
function slidens4(){if(tdivns4.left>=thel*(-1)){tdivns4.left-=sspeed;setTimeout("slidens4()",100);}else{tdivns4.left=swidth;slidens4();}}
function firstie(whichdiv){tdivie=eval(whichdiv);tdivie.innerHTML=('<nobr>'+imagef+'</nobr>');thel=tdivie.offsetWidth;tdivie.style.pixelLeft=swidth;slideie();}
function slideie(){if(tdivie.style.pixelLeft>thel*(-1)){tdivie.style.pixelLeft-=sspeed;setTimeout("slideie()",100);}else{tdivie.style.pixelLeft=swidth;slideie();}}
function firstns6(whichdiv){tdiv6=eval(whichdiv);tdiv6.innerHTML=('<nobr>'+imagef+'</nobr>');thel=tdiv6.offsetWidth;if(operbr!=-1){opslider.innerHTML='<nobr>'+imagef+'</nobr>';thel=opslider.offsetWidth;}tdiv6.style.left=swidth;slidens6();}
function slidens6(){if(parseInt(tdiv6.style.left)>=thel*(-1)){tdiv6.style.left=parseInt(tdiv6.style.left)-sspeed;setTimeout("slidens6()",100);}else{tdiv6.style.left=swidth;slidens6();}}
</SCRIPT>
	<!--
    	This script downloaded from w w w.JavaScriptBank. com
    	Come to view and download over 2000+ free javascript at w w w.JavaScriptBank. com
	-->

Step 3: Place HTML below in your BODY section
HTML

Code:

<BODY onload=start();>
<SCRIPT language=javascript>document.write('<table border=2 align="center" bgcolor="#ccffcc"><tr><td bgcolor="#ffffcc"><div class=tabc><b><a class=tab href="#" onClick="goup();">Speed<br>UP</a></b></div></td><td width='+swidth+'>');if(document.layers)document.write('<span style="borderWidth:0.1px; borderStyle:none; clip:rect(0 '+swidth+' '+sheight+' 0);"><ilayer width='+swidth+' height='+sheight+' name="slider1"><layer class=tabt width='+swidth+' height='+sheight+'>SLIDING SHOW</layer><layer width='+swidth+' height='+sheight+' name="slider2" onMouseover="sspeed=0;" onMouseout="sspeed=resspeed"></layer></ilayer></span>');else {document.write('<div style="position:relative;overflow:hidden;width:'+swidth+';height:'+sheight+';clip:rect(0 '+swidth+' '+sheight+' 0);">');if(operbr!=-1)document.write('<div id="opslider" style="position:absolute;visibility:hidden;"></div>');else document.write('<div class=tabt style="position:absolute;width:'+swidth+';height:'+sheight+';">SLIDING SHOW</div>');document.write('<div id="slider" style="position:relative;height:'+sheight+';" onMouseover="sspeed=0;" onMouseout="sspeed=resspeed"></div></div>');}</SCRIPT>
</TD></TR></TABLE><BR>
</fieldset>
</center>
<SCRIPT language=JavaScript>
function ctrlA0(corp) {
with(corp){
focus(); select()
}
if(document.all){
txt=corp.createTextRange()
txt.execCommand("Copy")
window.status='Text copied to clipboard'
}
else window.status='Press ctrl-c to copy the text to the clipboard'
setTimeout("window.status=''",5000)
}
</SCRIPT>
</body>
	<!--
    	This script downloaded from w w w.JavaScriptBank. com
    	Come to view and download over 2000+ free javascript at w w w.JavaScriptBank. com
	-->

JavaScript Spotlight - JavaScript Validate E-Mail - AJAX Page Content Loader

JavaScriptBank · #32 (**permalink**) 03-04-2010, 11:57 PM

This is a spinning three dimensional cube. Eight dots revolve by itself to create a motional cube.... detail at JavaScriptBank.com - 2.000+ free JavaScript codes

Demo: JavaScript 3D self-revolving cube

[SIZE="4"]How to setup[/SIZE]

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

Code:

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

<!-- // (c) 2001 Till Nagel, till@netzministerium.de & Rene Sander, rene@netzministerium.de

// ---------------------------------------------------------------------------

// creates cube model with name and (a simple) material
var cubeModel = new Model("cube", new Material("&deg;"));

// defines model points.
// The model's points have to be defined before the respective code is written into the document.
cubeModel.setPoints(createCubeModelPoints());


// ---------------------------------------------------------------------------

// the matrix to transform the model with
var staticRotationMatrix = new Matrix();
staticRotationMatrix.rotateX(0.05);
staticRotationMatrix.rotateY(0.1);

// ---------------------------------------------------------------------------

function initOnLoad() {
	fixNetscape();
	
	// assign layer (only for Netscape 4.x, for all other browsers
	// this is done automatically when writing the point code)
	cubeModel.assignLayers();
	
	// creates and inits matrix to initialize the model
	var initMatrix = new Matrix();
	initMatrix.scale(50, 50, 50);
	// >> begin to work with the model etc.

	// initializes model
	cubeModel.transform(initMatrix);
	
	// >> first draw of the model (recommended)
	cubeModel.draw();
	
	// starts animation
	animate();
}

/*
 * The main animate method. Calls itself repeatedly.
 */
function animate() {
	var delay = 10;
	
	// animates cube model ----------------------------------------

	// rotates the cube
	cubeModel.transform(staticRotationMatrix);
	
	// updates display
	cubeModel.draw();
	
	// calls itself with an delay to decouple client computer speed from the animation speed.
	// result: the animation is as fast as possible.
	setTimeout("animate()", delay);
}



// ---------------------------------------------------------------------------

function createCubeModelPoints() {
	// the cube model
	return new Array(
		//  Point3D( x,  y,  z, m)
		new Point3D( 1,  1,  1, 0),
		new Point3D( 1,  1, -1, 0),
		new Point3D( 1, -1,  1, 0),
		new Point3D( 1, -1, -1, 0),
		new Point3D(-1,  1,  1, 0),
		new Point3D(-1,  1, -1, 0),
		new Point3D(-1, -1,  1, 0),
		new Point3D(-1, -1, -1, 0)
	);
}

// -->
</SCRIPT>

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

Code:

<DIV id=fixnetscape style="POSITION: absolute; VISIBILITY: hidden"></DIV>
<SCRIPT language=JavaScript type=text/javascript>
	<!-- // (c) 2001 Till Nagel, till@netzministerium.de & Rene Sander, rene@netzministerium.de
	
	// MANDATORY: INSERTION OF HTML PART INTO PAGE
	// creates the HTML code representing the model's points
	// NB: This is written directly into the page from within the method	
	cubeModel.createPointCode();
	
	// -->
	</SCRIPT>

Step 3: Download files below
Files
LyrObj.js
3dhtml.js
ColorUtil.js
materials.js

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

justineoaker · #33 (**permalink**) 03-08-2010, 01:05 PM

Wow, Thanks for the post! This is really great! I am quite a beginner in programming and all of this but I can say that I have learned a lot from your posts. I hope to find a newbie thread here to help newbies to get all the basic s and the important things about programming. thanks a lot!

JavaScriptBank · #34 (**permalink**) 03-13-2010, 12:55 AM

As the title of this post said, you should choose one of these JavaScript ebooks, or some ebooks to start learning if you are JavaScript (or Progamming) beginners. So if you are an expert? Then I hope... detail at JavaScriptBank.com - 2.000+ free JavaScript codes

Demo: JavaScript Top 10 Best JavaScript eBooks that Beginners should Learn

[SIZE="4"]How to setup[/SIZE]

AJAX news ticker - JavaScript Refresh Page - JavaScript Unclosable Window