[JavaScriptBank]

JavaScript Collector

Animated Window Opener II

Instead of just spawning a window, this JavaScript animates it into view, by expanding it horizontally then vertically until it fills the screen. The detail

Demo: Animated Window Opener II

How to setup

Step 1: Place JavaScript below in your HEAD section
JavaScript

<SCRIPT language=JavaScript>
<!-- Begin
// Animated Window- By Rizwan Chand (rizwanchand@hotmail.com)
// Modified by DD for NS compatibility
// Visit http://www.dynamicdrive.com for this script

function expandingWindow(website) {
var windowprops='width=100,height=100,scrollbars=yes,status=yes,resizable=yes'
var heightspeed = 2; // vertical scrolling speed (higher = slower)
var widthspeed = 7;  // horizontal scrolling speed (higher = slower)
var leftdist = 10;    // distance to left edge of window
var topdist = 10;     // distance to top edge of window

if (window.resizeTo&&navigator.userAgent.indexOf("Opera")==-1) {
var winwidth = window.screen.availWidth - leftdist;
var winheight = window.screen.availHeight - topdist;
var sizer = window.open("","","left=" + leftdist + ",top=" + topdist +","+ windowprops);
for (sizeheight = 1; sizeheight < winheight; sizeheight += heightspeed)
sizer.resizeTo("1", sizeheight);
for (sizewidth = 1; sizewidth < winwidth; sizewidth += widthspeed)
sizer.resizeTo(sizewidth, sizeheight);
sizer.location = website;
}
else
window.open(website,'mywindow');
}
//  End -->
</SCRIPT>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

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

<a href="#" onClick="expandingWindow('popup_content.html');return false">
JavaScriptBank.com example popup</a><br>
<input type="button" value="JavaScriptBank.com example popup" onClick="expandingWindow('popup_content.html')">
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Javascript Music Player - Random Text Generator - Floating Image Script

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.

[BlasterOmg]

Nice!
Just add a bit more stuff though.
I love javascripts, they make my website look better.

[JavaScriptBank]

New DHTML-technique to highlight specific zones of your images. Uses filter-methods and drag-and-drop-functions. IE5x.... detail

Demo: Image Sharpener

How to setup

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

<STYLE type=text/css>A {
	COLOR: #ff0000
}
A:visited {
	COLOR: #ff0000
}
A:active {
	COLOR: #ff0000
}
A:hover {
	COLOR: #ff0000
}
.baselinestyle {
	FONT-FAMILY: Verdana; FONT-SIZE: 8pt; LEFT: 10px; POSITION: absolute; TOP: 280px; WIDTH: 240pt
}
</STYLE>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

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

<SCRIPT language=JavaScript>
// Image Sharpener script

var isNav, isIE
var offsetX, offsetY
var selectedObj 

var dragimg_width=64
var dragimg_height=64

var dragimg_startx=410
var dragimg_starty=80

var clipLeft=dragimg_startx
var clipTop=dragimg_starty

var clipRight=clipLeft+dragimg_width
var clipBottom=clipTop+dragimg_height

if (parseInt(navigator.appVersion) >= 4) {
	if (navigator.appName == "Netscape") {
		isNav = true
	} else {
		isIE = true
	}
}

function setZIndex(obj, zOrder) {
	obj.zIndex = zOrder
}


function shiftTo(obj, x, y) {
	if (isNav) {
		obj.moveTo(x,y)
		document.bgimage.clip.top=y
		document.bgimage.clip.left=x
		document.bgimage.clip.bottom=y+dragimg_height
		document.bgimage.clip.right=x+dragimg_width	
	
	}
	else {
		clipTop=y
		clipLeft=x
		clipBottom=y+dragimg_height
		clipRight=x+dragimg_width
		document.all.bgimage.style.clip="rect("+clipTop+" "+clipRight+" "+clipBottom+" "+clipLeft+")"
		obj.pixelLeft = x
		obj.pixelTop = y
	}
}

function setSelectedElem(evt) {
	if (isNav) {
		var testObj
		var clickX = evt.pageX
		var clickY = evt.pageY
		for (var i = document.layers.length - 1; i >= 0; i--) {
			testObj = document.layers[i]
			if ((clickX > testObj.left) && 
				(clickX < testObj.left + testObj.clip.width) && 
				(clickY > testObj.top) && 
				(clickY < testObj.top + testObj.clip.height) && (testObj.name=="picture1")) {
					selectedObj = testObj
					setZIndex(selectedObj, 100)
					return
			}
		}
	} else {
		var imgObj = window.event.srcElement
		if (imgObj.parentElement.id.indexOf("picture") != -1) {
			selectedObj = imgObj.parentElement.style
			setZIndex(selectedObj,100)
			return
		}
	}
	selectedObj = null
	return
}

function dragIt(evt) {
	if (selectedObj) {
		if (isNav) {
			shiftTo(selectedObj, (evt.pageX - offsetX), (evt.pageY - offsetY))
		} else {
			shiftTo(selectedObj, (window.event.clientX - offsetX), (window.event.clientY - offsetY))
			return false
		}
	}
}

function engage(evt) {
	setSelectedElem(evt)
	if (selectedObj) {
		if (isNav) {
			offsetX = evt.pageX - selectedObj.left
			offsetY = evt.pageY - selectedObj.top
		} else {
			offsetX = window.event.offsetX
			offsetY = window.event.offsetY
		}
	}
	return false
}

function release(evt) {
	if (selectedObj) {
		setZIndex(selectedObj, 0)
		selectedObj = null
	}
}

function setNavEventCapture() {
	if (isNav) {
		document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP)
	}
}

function init() {
	if (isNav) {
		setNavEventCapture()
	}
	document.onmousedown = engage
	document.onmousemove = dragIt
	document.onmouseup = release
	if (document.all) {
		clipTop=dragimg_starty
		clipLeft=dragimg_startx
		clipBottom=clipTop+dragimg_height
		clipRight=clipLeft+dragimg_width
		document.all.picture1.style.posLeft=dragimg_startx
		document.all.picture1.style.posTop=dragimg_starty
		document.all.bgimage.style.posLeft=0
		document.all.bgimage.style.posTop=0
        document.all.filterimage.style.posLeft=0
		document.all.filterimage.style.posTop=0
        document.all.filterimage.style.filter="alpha(opacity=25) blur(strength=50 add=1)"

		document.all.bgimage.style.clip="rect("+clipTop+" "+clipRight+" "+clipBottom+" "+clipLeft+")"
	}
	
	if (document.layers) {
		document.bgimage.clip.left=dragimg_startx
		document.bgimage.clip.right=clipLeft+dragimg_width
		document.bgimage.clip.top=dragimg_starty
		document.bgimage.clip.bottom=clipTop+dragimg_height
		document.picture1.left=dragimg_startx
		document.picture1.top=dragimg_starty
		document.bgimage.left=0
		document.bgimage.top=0
	}
}
// - End of JavaScript - -->
</SCRIPT>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Step 3: Place HTML below in your BODY section
HTML

<BODY onload=init()>
<DIV id=filterimage style="LEFT: 0px; POSITION: absolute; TOP: -3000px">
  <IMG 
name=filterimg src="logojs.gif" width="580" height="280"></DIV>

<DIV id=bgimage style="LEFT: 0px; POSITION: absolute; TOP: -3000px">
  <IMG 
name=bgimagpic src="pic191.jpg" width="580" height="280"></DIV>
<DIV id=picture1 style="LEFT: 0px; POSITION: absolute; TOP: -3000px">
  <IMG 
name=picturePic1 src="dragpic271.gif" width="64" height="64"></DIV>
<DIV class=baselinestyle id=redirtext><b>Drag square to view</b></DIV>
</BODY>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Step 4: must download files below
Files
dragpic271.gif

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

[JavaScriptBank]

This JavaScript displays a countdown timer and alerts the user when the timer reaches zero. It then redirects to another Web ... detail

Demo: JavaScript Countdown Timer

How to setup

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

<style type="text/css">
#txt {
  border:none;
  font-family:verdana;
  font-size:16pt;
  font-weight:bold;
  border-right-color:#FFFFFF
}

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

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

<script language="javascript">
// Created by: Neill Broderick :: http://www.bespoke-software-solutions.co.uk/downloads/downjs.php

var mins
var secs;

function cd() {
 	mins = 1 * m("10"); // change minutes here
 	secs = 0 + s(":01"); // change seconds here (always add an additional second to your total)
 	redo();
}

function m(obj) {
 	for(var i = 0; i < obj.length; i++) {
  		if(obj.substring(i, i + 1) == ":")
  		break;
 	}
 	return(obj.substring(0, i));
}

function s(obj) {
 	for(var i = 0; i < obj.length; i++) {
  		if(obj.substring(i, i + 1) == ":")
  		break;
 	}
 	return(obj.substring(i + 1, obj.length));
}

function dis(mins,secs) {
 	var disp;
 	if(mins <= 9) {
  		disp = " 0";
 	} else {
  		disp = " ";
 	}
 	disp += mins + ":";
 	if(secs <= 9) {
  		disp += "0" + secs;
 	} else {
  		disp += secs;
 	}
 	return(disp);
}

function redo() {
 	secs--;
 	if(secs == -1) {
  		secs = 59;
  		mins--;
 	}
 	document.cd.disp.value = dis(mins,secs); // setup additional displays here.
 	if((mins == 0) && (secs == 0)) {
  		window.alert("Time is up. Press OK to continue."); // change timeout message as required
  		// window.location = "yourpage.htm" // redirects to specified page once timer ends and ok button is pressed
 	} else {
 		cd = setTimeout("redo()",1000);
 	}
}

function init() {
  cd();
}
window.onload = init;
</script>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Step 3: Place HTML below in your BODY section
HTML

<form name="cd">
<input id="txt" readonly="true" type="text" value="10:00" border="0" name="disp">
</form>
	<!--
    	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]

This JavaScript creates slideshow effect with one of transitions.... detail

Demo: Image slideshow transition

How to setup

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

<script LANGUAGE="JavaScript1.1">
<!-- Beginning of JavaScript -

messages = new Array()
//anh dung de tao hieu ung
messages[0] = "<img src=logojs.gif>"
messages[1] = "<img src=photo1.jpg>"
messages[2] = "<img src=photo2.jpg>"
messages[3] = "<img src=photo3.jpg>"
messages[4] = "<img src=photo4.jpg>"

var i_messages = 0
var timer

function dotransition() {
    if (document.all) {
        content.filters[0].apply()
        content.innerHTML = messages[i_messages]
        content.filters[0].play()
        if (i_messages >= messages.length-1) {
            i_messages = 0
        }
        else {
            i_messages++
        }
    } 
    
    if (document.layers) {
       document.nn.document.write("<table cellspacing=2 cellpadding=2 border=0><tr><td align=left>"+messages[i_messages]+"</td></tr></table>")
		document.close()
        if (i_messages >= messages.length-1) {
            i_messages = 0
        }
        else {
            i_messages++
        }
    } 
    timer = setTimeout("dotransition()",5000)   
}
// - End of JavaScript - -->
</script>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Step 2: Place HTML below in your BODY section
HTML

<BODY onload="dotransition()">
<DIV id=content style="position: relative; width:160px; height:240px; text-align:center; filter: revealTrans(Transition=12, Duration=3)"></DIV>
</BODY>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

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

[pepeogame]

I will try it. Thanks

[Lemun9483]

coooool i try this cuz i haxxxxxxxxxxx

[JavaScriptBank]

Bring the sound of life - music to your visitors by this JavaScript. It is an advanced web based midi player that actually enables you to jump, pause, and manipulate the play list like never before.... detail

Demo: Web based Music Player

How to setup

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

<SCRIPT language=JavaScript>
<!-- Begin
counter = 0;
html = true;
songs = new Array();
function addsong() {
file = document.forms[0].file.value;
if(file == "") {
alert("Entra un nombre de archivo o da click en Examinar..");
}
else {
fn = file;
while(fn.indexOf() != -1) {
pos = fn.indexOf();
fn = fn.substring(fn.lenght);
}
if(fn.indexOf(".gif") == 1) {
alert("Sólo sonidos o música");
}
else {
songs[counter] = file;
document.forms[0].selMusica[counter] = new Option(fn, file, false, true);
counter++;
}
document.forms[0].file.value = "";
}
}
function musica() {
document.all.sound.src=document.clock.selMusica.options[document.clock.selMusica.selectedIndex].text;
}
function stop() {
document.all.sound.src="";
}
function count() {
document.clock.songs.value=document.clock.selMusica.options.length;
}
function deletethis() {
if(counter > 0) {
counter--;
document.forms[0].selMusica[counter] = null;
songs[counter] = "";
}
else {
alert("No hay nada en la lista!");
   }
}
function bajar() {
document.clock.selMusica.options[document.clock.selMusica.selectedIndex++];
saber2();
saber();
}
function subir() {
document.clock.selMusica.options[document.clock.selMusica.selectedIndex--];
saber2();
saber();
}
function saber() {
document.clock.url.value=document.clock.selMusica.options[document.clock.selMusica.selectedIndex].text;
}
function saber2() {
fn = document.clock.selMusica.options[document.clock.selMusica.selectedIndex].text;
char = unescape("%5C");
while(fn.indexOf(char) != -1) {
pos = fn.indexOf(char);
fn = fn.substring(pos + 1, fn.length);
document.clock.nombre.value=fn;
}
}
// End-->
</SCRIPT>

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

<BODY onclick=count() onload=count()>
<BGSOUND id=sound src="">
<FORM name=clock><INPUT type=file name=file size="20"> <INPUT onclick=addsong() type=button value=Add><INPUT onclick=deletethis() type=button value=Delete><BR><INPUT onclick=musica() type=button value=Listen name=empezar> 
<INPUT onclick=stop() type=button value=Stop name=detener> You have:<INPUT 
readOnly size=2 name=songs>song(s) in the list.<BR>Name of the song:<INPUT 
size=25 name=nombre><INPUT onclick="saber2(); saber()" type=button value="Know Name & Url">Url 
	of the song:<INPUT size=19 name=url> <BR><INPUT onclick=bajar() type=button value=MoveDown><INPUT onclick=subir() type=button value=MoveUp><BR><BR><SELECT 
multiple size=20 name=selMusica></SELECT> </FORM>
</BODY>

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

[XmasDummy]

mmmm i wonder where you got these tips

[JavaScriptBank]

Use this simple JavaScript to make all links on your web pages open in new tab/window. Script is easy to setup, you should save them into a f... detail

Demo: Make link open in new tab/window

How to setup

Step 1: Place JavaScript below in your HEAD section
JavaScript

<script language=javascript>
/*
	Kevin Yank
	http://www.sitepoint.com/authorcontact/48
*/
function externalLinks()
{
  if (!document.getElementsByTagName) return;
  var anchors = document.getElementsByTagName("a");
  for (var i=0; i<anchors.length; i++)
  {
      var anchor = anchors[i];
      if(anchor.getAttribute("href"))
		anchor.target = "_blank";
  }
}
window.onload = externalLinks;

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

Step 2: Place HTML below in your BODY section
HTML

<a href="http://javascriptbank.com/">Home</a> | 
	<a href="http://javascriptbank.com/4rum/">Forum</a> | 
	<a href="http://javascriptbank.com/javascript/">JavaScript</a> | 
	<a href="http://javascriptbank.com/service/">Services</a> | 
	<a href="http://javascriptbank.com/javascript/submit-javascript-bank.html">Submit script</a> | 
	<a href="http://javascriptbank.com/thietkeweb/javascriptmall/">Documentary</a> | 
	<a href="http://javascriptbank.com/javascript/contact-javascript-bank.html">Contact us</a> | 
	<a href="http://javascriptbank.com/javascript/aboutus-javascript-bank.html">About us</a>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

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

[rubberchickenmx]

this would be cool if we could actually see the preview, none of them work

[Bomb]

You didn't make any of this code, and you are double posting like a motherfucker. GTFO these forums skiddy

[JavaScriptBank]

AJAX - a very great web development technology nowaday. Use this AJAX in order to load XML and HTML files on the same website with XMLHttpRequest. And in the <code>body... detail at JavaScriptBank.com - 2.000+ free JavaScript codes

Demo: AJAX Page Content Loader

How to setup

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

<style type="text/css">
<!--
#contentLYR {
  position:relative;/*
  width:200px;
  height:115px;
  left: 200px;
  top: 200px;*/
  z-index:1;
}
-->
</style>

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

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

// Created by: Eddie Traversa (2005) :: http://dhtmlnirvana.com/
function ajaxLoader(url,id) {
  if (document.getElementById) {
    var x = (window.ActiveXObject) ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest();
  }
  if (x) {
    x.onreadystatechange = function() {
      if (x.readyState == 4 && x.status == 200) {
        el = document.getElementById(id);
        el.innerHTML = '<JavaScriptBank>This is content of demo.xml file</JavaScriptBank>';//x.responseText;
      }
    }
    x.open("GET", url, true);
    x.send(null);
  }
}
//-->
</script>

Step 3: Place HTML below in your BODY section
HTML

<div id="contentLYR"></div>
	<script>window.onload = function(){ajaxLoader('demo.xml','contentLYR');}</script>

Step 4: must download files below
Files
demo.xml

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

[JavaScriptBank]

This JavaScript code - date picker helps you choose a time through a popup window. Perhaps this feature is not new on [url="http://www.javascriptbank.com/"]J... detail at JavaScriptBank.com - 2.000+ free JavaScript codes

Demo: Time Picker with child window

How to setup

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

<script language="JavaScript" type="text/javascript" src="timePicker.js">
/*
	Bassem R. Zohdy | bassem.zohdy@gmail.com
*/
</script>

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

<form name="form1">
	<input id="field" onkeydown="time(this.id)"/>
</form>

Step 3: downloads
Files
down.jpg
time.html
timePicker.js
up.jpg

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