[JavaScriptBank.com]

JavaScript library

Trivia Questions

Answer the question correctly to advance to the next round. Includes a hidden form system that prevents the user from jumping to different questions.... detail

[IMG]hxxp ://w w w.javascriptbank. com/javascript.images/game/trivia-questions.jpg[/IMG]
Demo: Trivia Questions

How to setup

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

<script language="JavaScript">
// Jeremy Greenfield (paperairplane@noisebox. com )
<!-- Begin
function Round1()
{
Q1=prompt("Who invented the lightbulb?","Your Answer Here");
if (Q1=="Thomas Edison")
{
alert("Correct!")
document.verify.Question2.value="Granted"
}
else
{
alert("Incorrect! Try Again.")
}
}
function Round2()
{
Q2=prompt("In science, H202 was one molecule of what?","Your Answer Here \(lower case\)")
if (Q2=="hydrogen peroxide")
{
alert("Correct!")
document.verify.Question3.value="Granted"
}
else
{
alert("Incorrect! Try Again.")
}
}
function Round3()
{
Q3=prompt("Which state has the longest sea border?","Your Answer Here")
if (Q3=="Alaska")
{
alert("Correct!")
document.verify.Question4.value="Granted"
}
else
{
alert("Incorrect! Try Again.")
}
}
function Round4()
{
Q4=prompt("The theory E=MC2 was made by whom?","Your Answer Here")
if (Q4=="Albert Einstein")
{
alert("Correct!")
document.verify.Question5.value="Granted"
}
else
{
alert("Incorrect! Try Again.")
}
}
function Round5()
{
Q3=prompt("What is 12 to the third power? Do not use a calculator!","Your Answer Here \(do not include comma\)")
if (Q3=="1728")
{
alert("Correct!")
alert("You answered every question correctly! Congrats! \n\n\n\n\n\n\n\n\n Created By Jeremy Greenfield")
alert("Thanks for playing!")
}
else
{
alert("Incorrect! Try Again.")
}
}
function PendRound2()
{
if (document.verify.Question2.value=="Granted")
{
Round2()
}
if (document.verify.Question2.value=="Denied")
{
alert("You must answer the previous rounds correctly before advancing to this round.") 
}
}
function PendRound3()
{
if (document.verify.Question3.value=="Granted")
{
Round3()
}
if (document.verify.Question3.value=="Denied")
{
alert("You must answer the previous rounds correctly before advancing to this round.") 
}
}
function PendRound4()
{
if (document.verify.Question4.value=="Granted")
{
Round4()
}
if (document.verify.Question4.value=="Denied")
{
alert("You must answer the previous rounds correctly before advancing to this round.") 
}
}
function PendRound5()
{
if (document.verify.Question5.value=="Granted")
{
Round5()
}
if (document.verify.Question5.value=="Denied")
{
alert("You must answer the previous rounds correctly before advancing to this round.") 
}
}
//  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

<form name="verify">

<input type="hidden" name="Question2" value="Denied"><input type="hidden" name="Question3" value="Denied"><input type="hidden" name="Question4" value="Denied"><input type="hidden" name="Question5" value="Denied">
<input type="button" value="Round 1" name="R1" style="color: rgb(0, 0, 255); font-family: Courier New;" onclick="Round1()">
<input type="button" value="Round 2" name="R3" style="color: rgb(0, 0, 255); font-family: Courier New;" onclick="PendRound2()">
<input type="button" value="Round 3" name="R3" style="color: rgb(0, 0, 255); font-family: Courier New;" onclick="PendRound3()">
<input type="button" value="Round 4" name="R4" style="color: rgb(0, 0, 255); font-family: Courier New;" onclick="PendRound4()">
<input type="button" value="Round 5" name="R5" style="color: rgb(0, 0, 255); font-family: Courier New;" onclick="PendRound5()">
</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
	-->

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.com]

Create a survey asking people to rank things, and this JavaScript will validate that everything is ranked, and no rankings are repeated. Could be adapted into a detail

[IMG]hxxp ://w w w.javascriptbank. com/javascript.images/utility/rank-em.jpg[/IMG]
Demo: Rank 'em

How to setup

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

<SCRIPT LANGUAGE="JavaScript">
// Kent Rauch (kent@restekcorp. com) | hxxp ://w w w.restekcorp. com
<!-- Begin
function validator() {
// copyright 2002 Kent Rauch

 // global declaration
 badrank = false;

 rankem(1,4);
 rankem(2,5);

 if (!badrank) {
  // this is a "phony submit" for testing purposes
  document.clear();
  document.write("success! it be sweet<br>\n");
 }

}

// ---------------------------------------------------------
// Validate ranking questions: each value used exactly once.

function rankem(question, q_size) {
// copyright 2002 Kent Rauch

 var aLert1 = "";
 var aLert2 = "";

 // supports up to 26 items to be ranked -- extend this array to increase
 var cal = "a.b.c.d.e.f.g.h.i.j.k.l.m.n.o.p.q.r.s.t.u.v.w.x.y.z";
 cal = cal.split('.');

 var a = 0;

 var irate = "rink" + question;

 eval(irate + " = new Object();");

 var myrate = "";

 for (var x = 0; x < q_size; ++x) {
  myrate = "q"+question+cal[x];
  eval(irate + "[" + x + "] = document.test_form." + myrate + ".selectedIndex");
  if (eval(irate + "[" + x + "]")) {
   ++a;
   for (var y = 0; y < x; ++y) {
    if (eval(irate + "[" + y + "]") == eval(irate + "[" + x + "]")) {
     aLert1 = "Question "+ question +": please use each ranking only once.\n";
    }
   }
  }
 }

 if (a != q_size) {
  aLert2 = "Question " + question +":please rank all items.\n";
 }

 var aLert = aLert1 + aLert2;

 if (aLert) {
  alert(aLert);
  badrank = true;
 }


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

<form name="test_form">
<table border=0>
<tr valign="top"><td>
1. Ice Cream:<br>
<select name="q1a"> <option><option>1<option>2<option>3<option>4 </select>
vanilla<br>
<select name="q1b"> <option><option>1<option>2<option>3<option>4 </select>

chocolate<br>
<select name="q1c"> <option><option>1<option>2<option>3<option>4 </select>
raspberry<br>
<select name="q1d"> <option><option>1<option>2<option>3<option>4 </select>
mint<br>

</td>
<td width="80"> </td>
<td>
2. Cars:<br>
<select name="q2a"> <option><option>1<option>2<option>3<option>4<option>5 </select>
Corvette<br>
<select name="q2b"> <option><option>1<option>2<option>3<option>4<option>5 </select>

Mustang<br>
<select name="q2c"> <option><option>1<option>2<option>3<option>4<option>5 </select>
Testarosa<br>
<select name="q2d"> <option><option>1<option>2<option>3<option>4<option>5 </select>

Esprit<br>
<select name="q2e"> <option><option>1<option>2<option>3<option>4<option>5 </select>
RX-7<br>
</td></tr>
<tr><td colspan=2>
<input type="button" onClick="validator();" value=" send survey ">
</td></tr>
</table>

To set up a ranked-list survey question as in the examples above, name the <select>

	s
as q + the number of the question + a, b, c, etc. In this case, the form elements are named:<blockquote>q1a<br>q1b<br>q1c<br>q1d<br>q2a<br>q2b<br>q2c<br>q2d<br>q2e</blockquote><p>To use the validation, call rankem(a,b) where the parameters are the question number and its length.
In this case, the form handler calls the function twice:<blockquote>rankem(1,4);<br>rankem(2,5);</blockquote><p>Each call will generate a separate alert if there's anything amiss. The global "badrank" variable
is a status flag so the main form handler knows if it's allowed to submit(). Note that this demo
doesn't acutally do a submit(); instead it just displays a message.


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

[JavaScriptBank.com]

This JavaScript creates the colorfull squares and the flashing background. Very nice.... detail

[IMG]hxxp ://w w w.javascriptbank. com/javascript.images/background/flashs-colorful-squares.jpg[/IMG]
Demo: Flashs Colorful Squares

How to setup

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

<BODY bgColor=#aa00bb onload="setTimeout('bgchange()',100)">
<TABLE border=0>

  <TBODY>
  <TR>
    <SCRIPT language=JavaScript>

now=new Date;
x=now.getTime() %32768;
function Random(min,max) {
x=(1103515245*x+12345) % 32768;
return Math.floor(x*(max-min+1)/32768+min);
}

var colArray = new Array;
colArray[1] = '0';
colArray[2] = '1';
colArray[3] = '2';
colArray[4] = '3';
colArray[5] = '4';
colArray[6] = '5';
colArray[7] = '6';
colArray[8] = '7';
colArray[9] = '8';
colArray[10] = '9';
colArray[11] = 'A';
colArray[12] = 'B';
colArray[13] = 'C';
colArray[14] = 'D';
colArray[15] = 'E';
colArray[16] = 'F';
var rancolor
function rancol(){
rancolor = colArray[Random(1,11)]+colArray[Random(1,11)]+colArray[Random(5,16)]+colArray[Random(5,16)]+colArray[Random(1,16)]+colArray[Random(1,16)];
return rancolor;
}

function bgchange() {
document.bgColor = rancol();
setTimeout("bgchange()",1);
}

var j=0;
for (var i=0;i!=180;i++) {
j++;
document.write('<td bgcolor=#'+ rancol() +'>        </td>');
if (j == 15) {
document.write('</tr><tr>');
j = 0;
}}

document.write('</tr></table>');

    </SCRIPT>

  </TR></TBODY></TABLE>
</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 Music Player - Random Text Generator - Floating Image Script

[mrwhite]

Nice! Ever thought about writing some cell phone apps?

[JavaScriptBank.com]

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

<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

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

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

[JavaScriptBank.com]

Prevent your visitors from modifying the value stored in a textbox (without using input type=hidden) Just try to change the text in the box! Amazingly, it's a short less than one line script!... detail

[IMG]hxxp ://w w w.javascriptbank. com/javascript.images/snippet/locked-textbox.jpg[/IMG]
Demo: Locked Textbox

How to setup

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

<form name=form>

<input type=text name=box value="Locked text!" onFocus="this.blur()" size=12>

// an even more reliable method is to use:
<input type=text name=box value="Locked text!" onChange="this.value='Locked text!';" size=12 readonly>

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

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

[JavaScriptBank.com]

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

Step 2: Place JavaScript below in your HEAD section
JavaScript

<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

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

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

[JavaScriptBank.com]

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

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

Javascript Music Player - Random Text Generator - Floating Image Script

[JavaScriptBank.com]

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 body... detail at JavaScriptBank. com - 2.000+ free JavaScript codes

[IMG]hxxp ://w w w.javascriptbank. com/javascript.images/ajax/ajax-page-content-loader.jpg[/IMG]
Demo: AJAX Page Content Loader

How to setup

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

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

Step 2: Place JavaScript below in your HEAD section
JavaScript

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

// Created by: Eddie Traversa (2005) :: hxxp ://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: Download files below
Files
demo.xml

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

[JavaScriptBank.com]

JavaScript - an indispensable part for developing websites and web pages, whether that is simple pages or professional website, and whether you are senior or junior. Nowadays, JavaScript frameworks be... detail at JavaScriptBank. com - 2.000+ free JavaScript codes

[IMG]hxxp ://w w w.javascriptbank. com/javascript.images/article/top-10-javascript-frameworks-by-google--yahoo--bing.jpg[/IMG]
Demo: Top 10 JavaScript Frameworks by Google, Yahoo, Bing

How to setup

AJAX news ticker - JavaScript Refresh Page - JavaScript Unclosable Window

[JavaScriptBank.com]

This JavaScript code - date picker helps you choose a time through a popup window. Perhaps this feature is not new on J... detail at JavaScriptBank. com - 2.000+ free JavaScript codes

[IMG]hxxp ://w w w.javascriptbank. com/javascript.images/time/time-picker-with-child-window.jpg[/IMG]
Demo: Time Picker with child window

How to setup

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

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

Step 2: Place HTML 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

Javascript Music Player - Random Text Generator - Floating Image Script