JavaScript Collector - Search Engine Optimization Forum

JavaScriptBank · #1 (**permalink**) 08-22-2009, 06:08 PM

Free JavaSccript codes

Advansed Coolest On mouse Over

It is use microsoft filters and work only IE4/5....
detail: www.javascriptbank.com/advansed-coolest-onmouseover.html/en/

Demo: www.javascriptbank.com/javascript/image/advansed-coolest-onmouseover/preview/en/

How to setup

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

Code:

<script>
var globopObject;
var opIndex=0;
var cleared=true;
var direction=10;

function dynOpacity(opObject,stop)
{
if (stop) 
{
clearInterval(window.tm);
cleared=true;
opIndex=10;
return;
}
globopObject=opObject;
if (opIndex>110) direction=-4;
if (opIndex<0) direction=4;
opIndex+=direction;
globopObject.style.filter='alpha(opacity:' + opIndex + ')';
if (cleared)
{
window.tm=setInterval("dynOpacity(globopObject,false);",1);
cleared=false;
}
//alert(window.tm);

}

function handleevent()
{

if (event.type=="mouseover")
   if(event.srcElement.tagName=="IMG") 
   	   if (event.srcElement.parentElement.tagName=="A")	
   		{
		dynOpacity(event.srcElement,false);
		}
if (event.type=="mouseout")
   if(event.srcElement.tagName=="IMG") 
   		{
		event.srcElement.style.filter="";
		dynOpacity(event.srcElement,true);	
		}
}
document.onmouseover=handleevent;
document.onmouseout=handleevent;

</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

Code:

<a href="http://javascriptbank.com/"><img src="logojs.gif" width="140" height="60" border="0"></a><br>

<a href="http://javascriptbank.com/"><img src="logojs.gif" width="140" height="60" border="0"></a><br>
<a href="http://javascriptbank.com/"><img src="logojs.gif" width="140" height="60" border="0"></a>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

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 (**permalink**) 09-07-2009, 10:03 PM

This effect makes the text will be stretched when you move mouse over the specified text.... <snip>

How to setup

Step 1: Place CSS below in your HEAD section
CSS

Code:

<style>

#main {visibility: hidden; height:60; overflow: hidden; position: absolute; top:100; font-family: 'arial black'; color: blue;}
#notsomain {visibility: hidden; height:70; overflow: hidden; position: absolute; top:150; font-family: 'arial black'; color: blue;}
#notatallmain {visibility: hidden; height:70; overflow: hidden; position: absolute; top:200; font-family: 'arial black'; color: blue;}
#start {position:relative; color: #000;}
#finalwords {visibility: hidden; position:absolute; top:340; color: ffffff;}
.ftype1 {font-size: 36pt; letter-spacing:40px;}
.ftype2 {font-size: 36pt; letter-spacing:30px;}
.ftype3 {font-size: 36pt; letter-spacing:20px;}
.ftype4 {font-size: 36pt; letter-spacing:10px;}
.ftype5 {font-size: 36pt; letter-spacing:0px;}
</style>

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

Code:

<script language="JavaScript">
var test = new Array
test[0] = "ftype1"
test[1] = "ftype2"
test[2] = "ftype3"
test[3] = "ftype4"
test[4] = "ftype5"
var i=0
var j=510
var k=0

function movetext(id)
	{start.style.visibility = "hidden"
	replaceid = id
	id.className = test[0]
	id.style.left = j
	id.style.visibility = "visible"
	j -= 100
	if (j < 10)	{j = 510; changetext(replaceid)}
	else {setTimeout("movetext(replaceid)",100)}
	}

function changetext(id)
	{id.className = test[i]
	i++
	if (i > 4)
		{k++
		if (k == 1) {i=0; movetext(notsomain)}
		if (k == 2) {i=0; movetext(notatallmain)}
		if (k == 3) {finaltext()}		
		}
	else {setTimeout("changetext(replaceid)",100)}
	}
	
function finaltext()
	{finalwords.style.visibility = "visible"}
	
</script>

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

Code:

<p id="finalwords">This is only a test.<br><br><br>In the event that this had 
been an actual emergency...well, never mind,<br>
	it would probably be too late anyway.</p>
<div class="ftype1" id="main">This is a test</div>
<div class="ftype1" id="notsomain">of the emergency</div>
<div class="ftype1" id="notatallmain">broadcast system.</div>

JavaScriptBank · #3 (**permalink**) 09-14-2009, 05:14 AM

Simply select the options you would like in your pulldown menu, enter the text and URL for each listing, and click the button to detail

[IMG]hxxp ://w w w.javascriptbank. com/javascript.images/utility/drop-down-menu-generator.jpg[/IMG]
Demo: Drop Down Menu Generator

How to setup

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

Code:

<script language="JavaScript">
<!--  Begin
function MakeIt(form){
var txt='';
txt+=form.java.value+'\r\n';
txt+='<form name="'+form.name.value+'">\r\n';
txt+='<select name="dropdownmenu" size=1 onChange="goToURL(this.form)">\r\n';
txt+='<option selected value="">\r\n';
txt+=form.name.value+'\r\n';
txt+='<option value="'+form.url1.value+'">\r\n';
txt+=form.page1.value+'\r\n';
txt+='<option value="'+form.url2.value+'">\r\n';
txt+=form.page2.value+'\r\n';
txt+='<option value="'+form.url3.value+'">\r\n';
txt+=form.page3.value+'\r\n';
txt+='<option value="'+form.url4.value+'">\r\n';
txt+=form.page4.value+'\r\n';
txt+='<option value="'+form.url5.value+'">\r\n';
txt+=form.page5.value+'\r\n';
txt+='</select></form>';
form.code.value=txt;
}
function ResetPage(form){
if(confirm("Do you wish to start over?")){	
form.name.value="";	
form.url1.value="";	
form.url2.value="";
form.url3.value="";
form.url4.value="";		
form.url5.value="";	
form.page1.value="";
form.page2.value="";
form.page3.value="";	
form.page4.value="";
form.page5.value="";	
   }
}
// End -->
</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:

<script language="JavaScript">
<!-- 
function goToURL(form)
  {

    var myindex=form.dropdownmenu.selectedIndex
    if(!myindex=="")
      {
        window.location.href=form.dropdownmenu.options[myindex].value;

      
      }
}
//-->
  </script>
<form name="Form Name ">
  Here's an example using the titles below &gt;&gt;&gt;&gt; 
  <select name="dropdownmenu" size="1" onchange="goToURL(this.form)"><option selected="selected">
	Form Name </option><option value="hxxp ://w w w.searchbliss. com/javamenu.htm">
	Name of 1st Selection 
    </option><option value="hxxp ://w w w.searchbliss. com/javamenu.htm">Name of 2nd 
	Selection 
    </option><option value="hxxp ://w w w.searchbliss. com/javamenu.htm">Name of 3rd 
	Selection 
    </option><option value="hxxp ://w w w.searchbliss. com/javamenu.htm">Name of 4th 
	Selection 
    </option><option value="hxxp ://w w w.searchbliss. com/javamenu.htm">Name of 5th 
	Selection 
    </option></select>

  This example is linked to this page. 
</form>
<form action="">
  <div align="center">
    <table bgcolor="#ffffff" border="2" cellpadding="4" width="690" height="314" bordercolorlight="#FFFFFF" bordercolordark="#555555">
      <tbody><tr> 
        <td width="287"> 
          <div align="center"><font size="3" face="arial" color="#555555"><b>
			Form Name <br>
            <font size="-2" color="#333333">(The title displayed on menu)</font></b> 
            </font></div>

        </td>
        <td align="center" width="373"><font size="2"><b> 
          <input type="hidden" name="java" value="&lt;script language=&quot;JavaScript&quot;&gt;
&lt;!-- 
function goToURL(form)
  {

    var myindex=form.dropdownmenu.selectedIndex
    if(!myindex==&quot;&quot;)
      {
        window.location.href=form.dropdownmenu.options[myindex].value;

      
      }
}
//--&gt;
&lt;/script&gt;
&lt;!--Paste code above between your head tags--&gt;
&lt;!--Paste code below between your body tags--&gt;">
          <input type="text" name="name" size="58">
          </b></font> </td>
      </tr>
      <tr> 
        <td align="center" width="287"><font size="3" face="arial"><b> <font size="3" face="arial" color="#555555">
		URL of </font><font size="3" face="arial" color="#555555">1st Selection 
          <br>

          <font size="-2" color="#333333">(e.g. hxxp ://w w w.domain. com/page1.htm)</font> 
          </font> </b></font></td>
        <td align="center" width="373"><font size="2"><b> 
          <input type="text" name="url1" size="58">
          </b></font> </td>
      </tr>
      <tr> 
        <td width="287"> 
          <div align="center"><font size="3" face="arial" color="#555555"> <b>

			Name of 1st Selection<br>
            <font size="-2" color="#333333">(Menu option 1)</font> </b> </font></div>
        </td>
        <td align="center" width="373"><b> 
          <input type="text" name="page1" size="58">
          </b></td>
      </tr>

      <tr> 
        <td width="287"> 
          <div align="center"><font size="3" face="arial" color="#555555"><b>URL 
			of 2nd Selection<br>
            </b></font><font size="-2" face="arial" color="#333333"><b>(e.g. 
			hxxp ://w w w.domain. com/page2.htm) 
            </b></font><font size="3" face="arial" color="#555555"><b> </b></font> 
          </div>
        </td>
        <td align="center" width="373"><font size="2"><b> 
          <input type="text" name="url2" size="58">
          </b></font></td>

      </tr>
      <tr> 
        <td width="287" height="13"> 
          <p align="center"><font size="3" face="arial" color="#555555"><b>Name 
			of 2nd Selection<br>
            <font size="-2" color="#333333">(Menu option 2)</font> </b> </font> 
          </p>
        </td>
        <td align="center" width="373" height="13"> 
          <p>

          <b> 
            <input type="text" name="page2" size="58">
          </b> 
          
        </p></td>
      </tr>
      <tr> 
        <td width="287" height="2"> 
          <div align="center"><font size="3" face="arial" color="#555555"><b>URL 
			of 3rd Selection<br>
            </b></font><font size="-2" face="arial" color="#333333"><b>(e.g. 
			hxxp ://w w w.domain. com/page3.htm) 
            </b></font></div>
        </td>

        <td align="center" width="373" height="2"><font size="2"><b>
          <input type="text" name="url3" size="58">
          </b></font></td>
      </tr>
      <tr> 
        <td width="287" height="2"> 
          <div align="center"><font size="3" face="arial" color="#555555"><b>
			Name of 3rd Selection<br>
            <font size="-2" color="#333333">(Menu option 3)</font> </b> </font></div>

        </td>
        <td align="center" width="373" height="2"><font size="2"><b>
          <input type="text" name="page3" size="58">
          </b></font></td>
      </tr>
      <tr> 
        <td width="287" height="2"> 
          <div align="center"><font size="3" face="arial" color="#555555"><b>URL 
			of 4th Selection<br>
            </b></font><font size="-2" face="arial" color="#333333"><b>(e.g. 
			hxxp ://w w w.domain. com/page4.htm) 
            </b></font></div>

        </td>
        <td align="center" width="373" height="2"><font size="2"><b>
          <input type="text" name="url4" size="58">
          </b></font></td>
      </tr>
      <tr> 
        <td width="287" height="2"> 
          <p align="center"><font size="3" face="arial" color="#555555"><b>Name 
			of 4th Selection<br>
            <font size="-2" color="#333333">(Menu option 4)</font> </b></font><font size="3" face="arial"><b> 
            </b></font></p>

        </td>
        <td align="center" width="373" height="2"><font size="2"><b>
          <input type="text" name="page4" size="58">
          </b></font></td>
      </tr>
      <tr> 
        <td width="287" height="2"> 
          <div align="center"><font size="3" face="arial" color="#555555"><b>URL 
			of 5th Selection<br>
            </b></font><font size="-2" face="arial" color="#333333"><b>(e.g. 
			hxxp ://w w w.domain. com/page5.htm) 
            </b></font></div>

        </td>
        <td align="center" width="373" height="2"><font size="2"><b>
          <input type="text" name="url5" size="58">
          </b></font> </td>
      </tr>
      <tr> 
        <td width="287" height="2"> 
          <div align="center"><font size="3" face="arial" color="#555555"><b>
			Name of 5th Selection<br>

            <font size="-2" color="#333333">(Menu option 5)</font> </b></font></div>
        </td>
        <td align="center" width="373" height="2"><font size="2"><b>
          <input type="text" name="page5" size="58">
          </b></font> </td>
      </tr>
      <tr> 
        <td width="287" height="2"> 
          <div align="center"> 
            <p align="center"><font size="3" face="arial"><b> 
              <input type="button" value="Create Drop-Down Menu" onclick="MakeIt(this.form);" name="button">

              </b></font> <br>
              <input type="button" name="Button" value="Select  Code" onclick="this.form.code.select();
             this.form.code.focus()">
            </p>
            <p align="center"><font size="1"> <a href="hxxp ://w w w.searchbliss. com/">
			SearchBliss</a> 
              / 2001</font></p>
          </div>

        </td>
        <td align="center" width="373" height="2"> 
          <div align="center"><font size="2" color="#ffffff"><b> 
            <textarea name="code" rows="6" cols="50"></textarea>
            </b></font></div>
        </td>
      </tr>
    </tbody></table>
  </div>

</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
	-->

AJAX news ticker - JavaScript Refresh Page - JavaScript Unclosable Window

JavaScriptBank · #4 (**permalink**) 09-21-2009, 02:58 AM

Floating Images II animates any image (or block of HTML) up and down the browser window, like an elevator, and stays in view even if... detail

[IMG]hxxp ://w w w.javascriptbank. com/javascript.images/image/floating-images-ii-up-down.jpg[/IMG]
Demo: Floating images II

How to setup

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

Code:

<SCRIPT LANGUAGE="JavaScript">
// Bruce W.Anderson (appletlib@about. com)

<!-- Begin
var xPosLeft = 20;
var xPosRight = 800;
var step = 1;
var delay = 30;
var yPos = 0;
var height = 0;
var offset = 0;
var yon = 0;
var name = navigator.appName;
if (name == "Microsoft Internet Explorer") {
yPos = document.body.clientHeight;
xPosRight = document.body.clientWidth - 150;
point1.style.top = yPos;
point2.style.top = yPos;
}
else {
yPos = window.innerHeight;
document.point1.pageY = yPos;
document.point1.visibility = "hidden";
document.point2.pageX = window.innerWidth - 155;
}
function changePos() {
if (yon == 0) {
yPos = yPos - step;
}
else {
yPos = yPos + step;
}
if (name == "Microsoft Internet Explorer") {
height = document.body.clientHeight;
offset = point1.offsetHeight;
}
else {
height = window.innerHeight;
offset = document.point1.clip.height;
}  
if (yPos < 0) {
yon = 1;
yPos = 0;
}
if (yPos >= (height - offset)) {
yon = 0;
yPos = (height - offset);
}
if (name == "Microsoft Internet Explorer") {
point1.style.left = xPosLeft;
point1.style.top = yPos + document.body.scrollTop;
point2.style.left = xPosRight;
point2.style.top = yPos + document.body.scrollTop;
}
else {
document.point1.pageX = xPosLeft;
document.point1.pageY = yPos + window.pageYOffset;
document.point2.pageX = xPosRight;
document.point2.pageY = yPos + window.pageYOffset;
   }
}
function start()
{
if (name != "Microsoft Internet Explorer") {
document.point1.visibility = "visible";
}
loopfunc();
}
function loopfunc()
{
changePos();
setTimeout('loopfunc()',delay);
}
//  End -->
</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:

<BODY onLoad="start()">
<div id="point1" STYLE="position:absolute;visibility:visible;">
<img src="logojs.gif" width=150 height=48 border=0>
</div>

<div id="point2" STYLE="position:absolute;visibility:visible;">

<img src="logojs.gif" width=150 height=48 border=0>
</div>
</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 · #5 (**permalink**) 09-28-2009, 06:43 AM

Deciding where to go to lunch can take longer than simply going to lunch when more than one person is involved in the decision. This JavaScript takes the pain out of figurin... detail

[IMG]hxxp ://w w w.javascriptbank. com/javascript.images/form/the-lunch-location-generator.jpg[/IMG]
Demo: Lunch Decision Maker

How to setup

Step 1: Place HTML below in your BODY section
HTML

Code:

<P align=center>The random answer is:</P>
<TABLE cellPadding=10 align=center cellborder="2">
  <TBODY>
  <TR>
    <TD align=middle bgColor=#0000a0><FONT color=darkred 
      size=5>***************************************<BR>
      <SCRIPT language=JavaScript>
var Answers=new Array() //create array variable;

// Possible answers. Fill in the values with your own choices
Answers[0] = "McDonalds";
Answers[1] = "Burger King";
Answers[2] = "Taco Bell";
Answers[3] = "White Castles";
Answers[4] = "Arbys";
Answers[5] = "Ruby Tuesdays";
Answers[6] = "Fazolis";
Answers[7] = "Wendys";
Answers[8] = "Cafeteria";
Answers[9] = "Pizza Hut";
Answers[10] = "CiCis";
Answers[11] = "Don Pablos";
Answers[12] = "Dicks Bodacious BBQ";
Answers[13] = "Steak n Shake";
// Answers[##] = "BBB";  <-- add new entries like ones above


// ======================================
// Do not change anything below this line
// ======================================
var nbr = Answers.length;
var theAnswer=Math.round(Math.random()*(nbr-1));
function showAnswer() 
{ 
     document.write(Answers[theAnswer]);
}
showAnswer();
</SCRIPT>
      <BR>*************************************** </FONT></TD></TR></TBODY></TABLE>
<INPUT onclick=history.go(0) type=button value="Bad choice....Try again..."> 
	<!--
    	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 Countdown Timer - JavaScript Currency Format - JavaScript Format Phone Number

JavaScriptBank · #6 (**permalink**) 10-05-2009, 07:13 AM

Demonstrates a technique for detecting the shift, ctrl and alt keys:

+ The keydown listener sets shiftMode to true when event.keyCode == 16.
+ The keyup listener sets shiftMode to fals... detail

[IMG]hxxp ://w w w.javascriptbank. com/javascript.images/utility/arrowkeys-detecting-the-shiftctrlalt-keys.jpg[/IMG]
Demo: Detecting The Shift/Ctrl/Alt Keys

How to setup

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

Code:

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

var shiftMode = false; // if true the shift key is down
var ctrlMode = false; // if true the ctrl key is down
var altMode = false; // if true the alt key is down 

function winOnLoad()
{
  log();
  xAddEventListener(document, 'keydown', docOnKeydown, false);
  xAddEventListener(document, 'keyup', docOnKeyup, false);
  xAddEventListener(document, 'keypress', docOnKeypress, false);
}

function docOnKeydown(ev)
{
  var e = new xEvent(ev);
  switch (e.keyCode) {
    case 16:
      shiftMode = true;
      log('shift down');
      break;
    case 17:
      ctrlMode = true;
      log('ctrl down');
      break;
    case 18:
      altMode = true; // not supported by Opera and I agree
      log('alt down');
      break;
  }
}

function docOnKeyup(ev)
{
  var e = new xEvent(ev);
  switch (e.keyCode) {
    case 16:
      shiftMode = false;
      log('shift up');
      break;
    case 17:
      ctrlMode = false;
      log('ctrl up');
      break;
    case 18:
      altMode = false; // not supported by Opera and I agree
      log('alt up');
      break;
  }
}

function docOnKeypress(ev)
{
  var e = new xEvent(ev);
  if (e.keyCode == 13) {
    if (shiftMode) log('shift+enter');
    if (ctrlMode) log('ctrl+enter');
    if (altMode) log('alt+enter');
  }
}

function log(s)
{
  var ta = xGetElementById('log');
  if (s) ta.value += s + '\n';
  else ta.value = '';
}
</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:

<form onsubmit="return false">
<textarea id="log" rows="20" cols="20"></textarea>
<br><input type="reset" value="Clear Textarea">
</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
	-->

Step 3: downloads
Files
x_core.js
x_event.js

Javascript Music Player - Random Text Generator - Floating Image Script

JavaScriptBank · #7 (**permalink**) 10-12-2009, 06:58 AM

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

[IMG]hxxp ://w w w.javascriptbank. com/javascript.images/time/countdown-timer.jpg[/IMG]
Demo: JavaScript Countdown Timer

How to setup

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

Code:

<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 w w w.JavaScriptBank. com
    	Come to view and download over 2000+ free javascript at w w w.JavaScriptBank. com
	-->

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

Code:

<script language="javascript">
// Created by: Neill Broderick :: hxxp ://w w w.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 w w w.JavaScriptBank. com
    	Come to view and download over 2000+ free javascript at w w w.JavaScriptBank. com
	-->

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

Code:

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

AJAX news ticker - JavaScript Refresh Page - JavaScript Unclosable Window

JavaScriptBank · #8 (**permalink**) 10-21-2009, 06:49 AM

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

[IMG]hxxp ://w w w.javascriptbank. com/javascript.images/image/image-slideshow-transition.jpg[/IMG]
Demo: Image slideshow transition

How to setup

Step 1: Place JavaScript below in your HEAD section
JavaScript

Code:

<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 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 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 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 · #9 (**permalink**) 10-25-2009, 07:13 PM

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

[IMG]hxxp ://w w w.javascriptbank. com/javascript.images/multimedia/web-based-music-player.jpg[/IMG]
Demo: Web based Music Player

How to setup

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

Code:

<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

Code:

<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 Bookmark Page script - JavaScript Color Wheel - JavaScript Image slideshow

JavaScriptBank · #10 (**permalink**) 11-01-2009, 03:57 PM

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

[IMG]hxxp ://w w w.javascriptbank. com/javascript.images/link/make-link-open-in-new-tab-window.jpg[/IMG]
Demo: Make link open in new tab/window

How to setup

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

Code:

<script language=javascript>
/*
	Kevin Yank
	hxxp ://w w w.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 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="hxxp ://javascriptbank. com/">Home</a> | 
	<a href="hxxp ://javascriptbank. com/4rum/">Forum</a> | 
	<a href="hxxp ://javascriptbank. com/javascript/">JavaScript</a> | 
	<a href="hxxp ://javascriptbank. com/service/">Services</a> | 
	<a href="hxxp ://javascriptbank. com/javascript/submit-javascript-bank.html">Submit script</a> | 
	<a href="hxxp ://javascriptbank. com/thietkeweb/javascriptmall/">Documentary</a> | 
	<a href="hxxp ://javascriptbank. com/javascript/contact-javascript-bank.html">Contact us</a> | 
	<a href="hxxp ://javascriptbank. com/javascript/aboutus-javascript-bank.html">About us</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 Line Graph script - JavaScript Virtual Keyboard - JavaScript Horizontal Slider

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode