Scribd
Upload
221 views

Java Script Examples

The document contains examples of using different JavaScript controls including buttons, text boxes, radio buttons, check boxes, combo boxes, and alerts. It demonstrates how to perform calculations and string manipulations using these controls by defining functions with onclick and onblur event handlers.

Uploaded by

Nipul Dey
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
221 views

Java Script Examples

The document contains examples of using different JavaScript controls including buttons, text boxes, radio buttons, check boxes, combo boxes, and alerts. It demonstrates how to perform calculations and string manipulations using these controls by defining functions with onclick and onblur event handlers.

Uploaded by

Nipul Dey
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
You are on page 1/ 29

Java Script Examples

Controls

1. Button & TextBox

<HTML>
<HEAD><CENTER> </center></HEAD>
<SCRIPT LANGUAGE="JAVASCRIPT">
function fadd_click()
{
accept();
document.f1.c.value=eval(x)+eval(y);
}
function fdiff_click()
{
accept();
document.f1.c.value=eval(x)-eval(y);
}
function fmult_click()
{
accept();
document.f1.c.value=eval(x)*eval(y);
}
function fQuo()
{
accept();
document.f1.c.value=eval(x)/eval(y);
}

function accept()
{
x=window.prompt("enter the value");
y=window.prompt("enter the value");
}
</SCRIPT>
<BODY>
<FORM NAME=f1>
<CENTER>
<INPUT TYPE=BUTTON NAME=B1 VALUE=" + " onClick="fadd_click()">&nbsp&nbsp&nbsp
<INPUT TYPE=BUTTON NAME=B4 VALUE=" - " onClick="fdiff_click()">&nbsp&nbsp&nbsp
<INPUT TYPE=BUTTON NAME=B2 VALUE=" * " onClick="fmult_click()">&nbsp&nbsp&nbsp
<INPUT TYPE=BUTTON NAME=B3 VALUE="/" onClick="fQuo()">&nbsp&nbsp&nbsp
<INPUT TYPE = TEXT NAME="c">&nbsp&nbsp&nbsp
</center>
</FORM>
</BODY>
</HTML>

2.Radio Buttons
<HTML>
<HEAD><H4><center> RADIO BUTTONS WITH EVENT ONCLICK()
<center></H4></HEAD>
<body>
<SCRIPT LANGUAGE="JavaScript">
function radio1()
{
document.f1.t.value=document.f1.r1.value;
}
function radio2()
{
document.f1.t.value=document.f1.r2.value;
}
function radio3()
{
document.f1.t.value=document.f1.r3.value;
}
</script>

<form name=f1>
<center>
<input type=text name=t><br><br>
<input type=radio name=r1 value="ORACLE" onClick="radio1()">ORACLE &nbsp&nbsp&nbsp
<input type=radio name=r2 value="VISUAL BASIC" onClick="radio2()">VBASIC &nbsp&nbsp&nbsp
<input type=radio name=r3 value="JAVA" onClick="radio3()">JAVA &nbsp&nbsp&nbsp
<BR>
<INPUT TYPE=RESET>
</CENTER>
</FORM>
</BODY>
</HTML>

3.Check Box
<HTML>
<HEAD><H4><center>
JAVASCRIPT USING CHECKBOX WITH DIFFERENT VALUE WITH DIFFERENT
NAME EVENT ONCLICK() <center></H4></HEAD>
<body>
<SCRIPT LANGUAGE="JavaScript">
function chek1()
{
document.f1.t.value=document.f1.c1.value;
}
function chek2()
{
document.f1.t.value=document.f1.c2.value;
}
function chek3()
{
document.f1.t.value=document.f1.c3.value;
}
</script>
<form name=f1>
<center>
<input type=text name=t><br><br>
<input type=checkbox name=c1 value="ORACLE" onClick="chek1()">ORACLE &nbsp&nbsp&nbsp
<input type=checkbox name=c2 value="VISUAL BASIC" onClick="chek2()">VBASIC &nbsp&nbsp&nbsp
<input type=checkbox name=c3 value="JAVA" onClick="chek3()">JAVA &nbsp&nbsp&nbsp
<BR>
<INPUT TYPE=RESET>
</CENTER>
</FORM>

</BODY>
</HTML>

4.Button, TextBox Radio Button & CheckBox

<HTML>
<HEAD><H4><center>
JAVASCRIPT USING CHECKBOXS WITH DIFFERENT VALUE WITH SAME NAME
EVENT USING WITH BUTTON ONCLCIK()
<center></H4></HEAD>
<body>
<SCRIPT LANGUAGE="JavaScript">
function b1_click()
{
ctr=document.f1.c1.length; /* counts no of elements in checkbox array*/
st=new String(); /* to allocate string variable*/
flag=0;
for(i=0;i<ctr;i++)
{
if(document.f1.c1[i].checked) /* to chek every element in chek arra*/
{
flag=1;
st = st + " " + document.f1.c1[i].value;
}
}
if(flag==0)
{ document.f1.t.value="Not selected any thing"; }
else
{ document.f1.t.value=st }
}
</script>

<form name=f1>
<center>
<input type=text name=t size=30><br><br>
<input type=checkbox name=c1 value="ORACLE">ORACLE &nbsp&nbsp&nbsp
<input type=checkbox name=c1 value="VISUAL BASIC">VBASIC
&nbsp&nbsp&nbsp
<input type=checkbox name=c1 value="JAVA">JAVA &nbsp&nbsp&nbsp
<BR>
<BR>
<INPUT TYPE=BUTTON NAME=B1 value="Click to result"
onClick="b1_click()"><br>
<INPUT TYPE=RESET>
</CENTER>
</FORM>

</BODY>
</HTML>

5. ComboBox

<HTML>
<HEAD><center><b>COMBO BOX (SELECT TYPE)</center></b></HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
function fun()
{
x=document.f1.t1.value;
y=document.f1.t2.value;
/* to find the selected option combo box document.f1.s1.selectedIndex */
st=document.f1.s1.options[document.f1.s1.selectedIndex].value;
if(st=='add')
{ document.f1.t3.value=eval(x)+eval(y) }
else
if(st=='mult')
{ document.f1.t3.value=eval(x)*eval(y) }
else
if(st=='sub')
{ document.f1.t3.value=eval(x)-eval(y) }

}
</SCRIPT>

<FORM NAME=f1>
<CENTER><b>
FIRSTNO:<INPUT TYPE=TEXT NAME=t1 SIZE=5><BR>
SECONDNO:<INPUT TYPE=TEXT NAME=t2 SIZE=5><BR>
SELECT AND PRESS TAB TO GET RESUTL:
<SELECT NAME=s1 onBlur="fun()">
<option value="mult">mulitply</option>
<option value="add" selected>addition</option>
<option value="sub">subtract</option>
</SELECT>
<BR>
RESULT:<INPUT TYPE=TEXT NAME=t3 SIZE=5>
<BR>
<INPUT TYPE=RESET></b>
</FORM>
</BODY>
</HTML>

6.Alert Window

<HTML>
<HEAD><CENTER> </center></HEAD>
<SCRIPT LANGUAGE="JAVASCRIPT">
function fcheck()
{
r=window.prompt("enter the value");
window.alert("Diameter" +2*eval(r)+
"\n Area " + 3.14159*eval(r) *eval(r) +
"\n Circumference " +2*3.14159*eval(r));

</SCRIPT>
<BODY>
<FORM NAME=f1>
<CENTER>
<INPUT TYPE=BUTTON NAME=B1 VALUE=" Circle " onClick="fcheck()">&nbsp&nbsp&nbsp
</center>
</FORM>
</BODY>
</HTML>

7.String Manipulation

<HTML>
<HEAD><CENTER> </center></HEAD>
<SCRIPT LANGUAGE="JAVASCRIPT">
function fcheck()
{
x = window.prompt("Enter the First name");
y = window.prompt("Enter the Last name");
document.write(x +" " + y);

</SCRIPT>
<BODY>
<FORM NAME=f1>
<CENTER>
<INPUT TYPE=BUTTON NAME=B1 VALUE=" Concate " onClick="fcheck()">&nbsp&nbsp&nbsp
</center>
</FORM>
</BODY>
</HTML>

9.. Spilt & SubString

<HTML><HEAD>
<TITLE>String Method split and substring</TITLE>
<SCRIPT LANGUAGE = "JavaScript">
function splitButtonPressed()
{
var strings = myForm.inputVal.value.split( " " );
myForm.output.value = strings.join( "\n" );

myForm.outputSubstring.value =
myForm.inputVal.value.substring( 0, 10 );
}
</SCRIPT>
</HEAD><BODY>
<FORM NAME = "myForm">
<P>Enter a sentence to split into words<BR>
<INPUT NAME = "inputVal" TYPE = "text" SIZE = "40">
<INPUT NAME = "splitButton" TYPE = "button" VALUE = "Split" ONCLICK = "splitButtonPressed()"></P>
<P>The sentence split into words is<BR>
<TEXTAREA NAME = "output" ROWS = "8" COLS = "34">
</TEXTAREA></P>

<P>The first 10 characters of the input string are <INPUT NAME = "outputSubstring" TYPE = "text" SIZE =
"15">
</P>
</FORM></BODY></HTML>

9. String Manipulation

<HTML>
<HEAD>
<TITLE>
Searching Strings with indexOf and lastIndexOf
</TITLE>
<SCRIPT LANGUAGE = "JavaScript">
var letters = "abcdefghijklmnopqrstuvwxyzabcdefghijklm";
function buttonPressed()
{
searchForm.first.value = letters.indexOf( searchForm.inputVal.value );
searchForm.last.value = letters.lastIndexOf( searchForm.inputVal.value );
searchForm.first12.value = letters.indexOf( searchForm.inputVal.value, 12 );
searchForm.last12.value = letters.lastIndexOf( searchForm.inputVal.value, 12 );
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME = "searchForm">
<H1>The string to search is:<BR>
abcdefghijklmnopqrstuvwxyzabcdefghijklm</H1>
<P>Enter substring to search for
<INPUT NAME = "inputVal" TYPE = "text">
<INPUT NAME = "search" TYPE = "button" VALUE = "Search" ONCLICK = "buttonPressed()"><BR></P>
<P>First occurrence located at index
<INPUT NAME = "first" TYPE = "text" SIZE = "5">
<BR>Last occurrence located at index
<INPUT NAME = "last" TYPE = "text" SIZE = "5">
<BR>First occurrence from index 12 located at index
<INPUT NAME = "first12" TYPE = "text" SIZE = "5">
<BR>Last occurrence from index 12 located at index
<INPUT NAME = "last12" TYPE = "text" SIZE = "5"></P>
</FORM>
</BODY>
</HTML>

8.For Loop (Fibonocci )

<HTML>
<HEAD><CENTER> </center></HEAD>
<SCRIPT LANGUAGE="JAVASCRIPT">
function fcheck()
{
c = window.prompt ("Enter No. of Numbers");
f1=0;
f2=1;
a=new Array(c);
a[0]=f1;
a[1]=f2;
for(i=2;i<c;++i)
{
f3=f1+f2;
a[i]=f3;
f1=f2;
f2=f3;
}
for(i=0;i<c;++i)
document.write( "<font color=red size=10>" + " " +a[i] )
}

</SCRIPT>
<BODY>
<FORM NAME=f11>
<CENTER>
<INPUT TYPE=BUTTON NAME=B1 VALUE=" Fibonocci " onClick="fcheck()">&nbsp&nbsp&nbsp
</center>
</FORM>
</BODY>
</HTML>
9. USING EVENTS ONFOCUS/ONBLUR
<HTML>
<TITLE>JAVASCRIPT</TITLE>
<HEAD> <CENTER> USING EVENTS
ONFOCUS/ONBLUR</CENTER></HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
function fun1()
{
a=document.f1.empno.value.length;
if(a==0)
{ window.alert("empno should not empty")
document.f1.empno.focus();
}
else
if(a>4)
{
window.alert("empno should be 4 digits only")
document.f1.empno.focus();
document.f1.empno.select();
}
}

function fun2()
{
n=document.f1.ename.value.length;
if(n==0)
{
window.alert("ename should not be empty")
document.f1.ename.focus();
document.f1.ename.select();
}
else
if(n>15)
{
window.alert("ename should be 15 characters")
document.f1.ename.focus();
document.f1.ename.select();
}

function fun3()
{
c=document.f1.sal.value;
if(c>10000)
{
window.alert("salary should be below 10000")
document.f1.sal.focus();
document.f1.sal.select();
}
}
function re()
{
c=document.f1.re.valmue;
window.alert("salary should be below 10000")
document.f1.sal.focus();
document.f1.sal.select();
}
</SCRIPT>

<FORM NAME=f1>
<CENTER>
EMPNO<INPUT TYPE=TEXT NAME=empno size=6 ><br>
ENAME<INPUT TYPE=text name=ename size=16 onFocus="fun1()"><br>
sal<input type=text name=sal size=7 onFocus="fun2()" onBlur="fun3()" ><br>
<input type=hidden name=h onFocus="fun3()"><br>
<input type=reset NAME=RE onFocus="re">
</CENTER>
</form>

</body>
</html>

Array
10.
<html>
<Script Language="JavaScript">
function showArr()
{ monarray=new Array(12);
monarray[0]="January";
monarray[1]="February";
monarray[2]="March";
monarray[3]="April";
monarray[4]="May";
monarray[5]="June";
monarray[6]="July";
monarray[7]="August";
monarray[8]="September";
monarray[9]="October";
monarray[10]="November";
monarray[11]="December";
for(i=0;i<12;i++)
{ document.write (monarray[i]+"<br>"); }
document.write("Last Modified" + document.lastModified);
}
</Script>
<body bgcolor=cyan>
<center>
<font color=red size=5 style=bold>
<input type=button value="Clik Here To Show Array Information" onClick="showArr()">
</center>
</body>
</html>

Popup Window - 1

<html>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function NewWindow(mypage, myname, w, h, scroll)
{
var winl = (screen.width - w) / 2;
var wint = (screen.height - h) / 2;
winprops =
'height='+h+',width='+w+',top='+wint+',left='+winl+',scrollbars='+scroll+',resizable'
win = window.open(mypage, myname, winprops)
}
</script>
</HEAD>
<BODY>
<a href="animation.html"onclick="NewWindow(this.href,'name','400','400','yes');return
false;">
Click Here To Display Animation in PopUp</a>
</body>
</html>

Popup Windows - 2

<!-- TWO STEPS TO INSTALL CENTERED POPUP:

1. Copy the coding into the HEAD of your HTML document


2. Add the last code into the BODY of your HTML document -->

<!-- STEP ONE: Paste this code into the HEAD of your HTML document -->
<html>
<HEAD>

<SCRIPT LANGUAGE="JavaScript">
<!-- Original: Eric King ([email protected]) -->
<!-- Web Site: http://redrival.com/eak/ -->

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->
<!-- Begin
function NewWindow(mypage, myname, w, h, scroll) {
var winl = (screen.width - w) / 2;
var wint = (screen.height - h) / 2;
winprops =
'height='+h+',width='+w+',top='+wint+',left='+winl+',scrollbars='+scroll+',resizable'
win = window.open(mypage, myname, winprops)
if (parseInt(navigator.appVersion) >= 4) { win.window.focus(); }
}
// End -->
</script>
</HEAD>

<!-- STEP TWO: Copy this code into the BODY of your HTML document -->

<BODY>

<!-- Put the URL inside the link's href="..." section, then carefully -->
<!-- change 'name' to a name for your popup window. The last three -->
<!-- items represent the popup window width, height, and scrollbars. -->

<a href="http://www.yahoo.com/"
onclick="NewWindow(this.href,'name','400','400','yes');return false;">Popup
Yahoo.com</a>
</body>
</html>

Close window

<html>
<BODY onLoad="setTimeout(window.close, 5000)">
<center>Few seconds the window will close</center>
</body>
</html

Coolpull down Window

<!-- TWO STEPS TO INSTALL COOL PULLDOWN MENU:

1. Copy the coding into the HEAD of your HTML document


2. Add the last code into the BODY of your HTML document -->

<!-- STEP ONE: Paste this code into the HEAD of your HTML document -->
<html>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->
<!-- Original: Roberto Ortali ([email protected]) -->

<!-- Begin
var refer=true;
function combo()
{
if (refer) {
document.all.contents.style.visibility="visible";
refer=false;
}
else {
document.all.contents.style.visibility="hidden";
refer=true;
}
}
// End -->
</script>

</HEAD>

<!-- STEP TWO: Copy this code into the BODY of your HTML document -->

<BODY>

<table align="center">
<tr><td>
<table width="200" border="1" cellspacing="0" cellpadding="0"
bordercolor="#d8d8d8">
<tr>
<td bgcolor="d8d8d8">
<font face="verdana" size="2"> Choose a link</font>
</td>
<td align="right" width="21">
<img src="img/combo_arrow.gif" name="combo_arrow" width="21" height="21"
alt="" border="0" onclick="combo()" ></td>
</tr>
</table>
<div id="contents" style="position:absolute; left:?px; top:?px; width:?px; height:?px; z-
index:1; visibility:hidden">
<table width="200" border="1" cellspacing="0" cellpadding="0"
bordercolor="#d8d8d8">
<tr>
<td bgcolor="d8d8d8">
<font face="verdana" size="2">
<a href="http://javascript.internet.com" target="_blank"> <img
src="img/bullet2.gif" border="0" width="8" height="8"> The Javascript
Source</a><br>
<a href="http://www.wdvl.com/" target="_blank">
<img src="img/bullet2.gif" border="0" width="8" height="8">
WDVL
</a><br>
<a href="http://webhost.thelist.com/" target="_blank">
<img src="img/bullet2.gif" border="0" width="8" height="8">
theList
</a><br></font>
</td>
</tr>
</table>
</td></tr>
</table>

</body>
</html>

Customize popup Window

<!-- TWO STEPS TO INSTALL CUSTOMIZED POPUP:

1. Copy the coding into the HEAD of your HTML document


2. Add the last code into the BODY of your HTML document -->

<!-- STEP ONE: Paste this code into the HEAD of your HTML document -->
<html>
<HEAD>

<SCRIPT LANGUAGE="JavaScript">

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin
function popupPage(l, t, w, h) {
var windowprops =
"location=no,scrollbars=no,menubars=no,toolbars=no,resizable=yes" +
",left=" + l + ",top=" + t + ",width=" + w + ",height=" + h;

var URL = "http://www.yahoo.com";


popup = window.open(URL,"MenuPopup",windowprops);
}
// End -->
</script>
</HEAD>
<!-- STEP TWO: Copy this code into the BODY of your HTML document -->

<BODY>

<center>
<table>
<tr>

<td>
<form name=popupform>
<pre>
Customize Your Popup Window!<br>
Distance from left edge: <input type=text name=left size=2 maxlength=4> pixels
Distance from top edge: <input type=text name=top size=2 maxlength=4> pixels

Width of popup window: <input type=text name=width size=2 maxlength=4> pixels


Height of popup window: <input type=text name=height size=2 maxlength=4> pixels
</pre>
<center>
<input type=button value="Open the Popup!"
onClick="popupPage(this.form.left.value, this.form.top.value, this.form.width.value,
this.form.height.value)">
</center>
</form>
</td>

</tr>
</table>
</center>

</body>
</html>

Exit Window

<!-- TWO STEPS TO INSTALL EXIT WINDOW:

1. Paste the coding into the HEAD of your HTML document


2. Copy the onunLoad event handler into the BODY tag -->

<!-- STEP ONE: Copy this code into the HEAD of your HTML document -->
<html>
<HEAD>

<SCRIPT LANGUAGE="JavaScript">

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin
function leave() {
window.open('http://www.yourserver.com/page-to-
open.html','','toolbar=no,menubar=no,location=no,height=500,width=500');
}
// End -->
</SCRIPT>

<BODY onUnload="leave()">

exit window
</body>
</html>

Text Shadowing

<!-- THREE STEPS TO INSTALL COLORFUL TEXT FADER:

1. Copy the coding into the HEAD of your HTML document


2. Add the onLoad event handler into the BODY tag
3. Put the last coding into the BODY of your HTML document -->

<!-- STEP ONE: Paste this code into the HEAD of your HTML document -->

<HEAD>

<SCRIPT LANGUAGE="JavaScript">

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->
<!-- Ken Tholke, [email protected]. -->

<!-- Begin
// add as many or as few messages as you would like
var msg=new Array()
msg[0]="<CENTER>You can see more scripts like this one...</CENTER>";
msg[1]="<CENTER>...when you visit the JavaScript Source.</CENTER>";
msg[2]="<CENTER>Just type in \"<A
href='http://javascript.internet.com/'>javascript.internet.com</A>\"</CENTER>";
msg[3]="<CENTER>Your computer can handle the rest.</CENTER>";

// set your first set of colors. Use as many or as few as you wish.
var colors1=new Array("ffffff", "eeeeff", "ddddff", "ccccff", "bbbbff", "aaaaff", "9999ff",
"8888ff", "7777ff", "6666ff", "5555ff", "4444ff", "3333ff","2222ff", "1111ff", "0000ff")

//set your second set of colors


// *** must have exactly the same number of colors as the array above ***
var colors2=new Array("ffffff", "ffeeee", "ffdddd", "ffcccc", "ffbbbb", "ffaaaa", "ff9999",
"ff8888", "ff7777", "ff6666", "ff5555", "ff4444", "ff3333", "ff2222", "ff1111", "ff0000")

//set the height of the display in pixels


high=60;

//set the width of the display in pixels


wide=350;

//set the pixel coordinates for the upper left hand corner of the display
Xpos=220;
Ypos=180;

// move the display away from the edges of the background


pad=15;

// set the background color of the display


bgcol="ffffff";

//add a background image if you want.


// *** for no image, just leave empty quotes (ex. cellbg=""; ) ***
cellbg="faderbg.jpg";

// set the font


fntFam="verdana,helvetica,arial";
fntSize=14;

// set how how many seconds you want the message to stay remain at totality.
pause=2.5;

// Do not edit these values below!!!

icolor=0;
mcolor=1;
imsg=0;
spWidth=wide-(2*pad);
totality=false;
glowing=true;
var theMsg="";
var cellcontent="";
pause=pause*1000;
if(cellbg.length>4){cellbg=" background="+cellbg}
else{cellbg="";}

function doPause(){
totality=false; t=setTimeout("changecolor()",pause);
}
function initiate(){
getContentColor();
getMsg();
getCellContent();
if(document.all){
msgbg.innerHTML=cellcontent;
msgfade.innerHTML=theMsg;
msgbg.style.posLeft=Xpos;
msgbg.style.posTop=Ypos;
msgfade.style.posLeft=Xpos+pad;
msgfade.style.posTop=Ypos+pad;
t=setTimeout("changecolor()",50);}
if(document.layers){
document.msgbg.document.write(cellcontent);
document.msgbg.document.close();
document.msgfade.document.write(theMsg);
document.msgfade.document.close();
document.msgbg.left=Xpos;
document.msgbg.top=Ypos;
document.msgfade.left=Xpos+pad;
document.msgfade.top=Ypos+pad;
t=setTimeout("changecolor()",100);}
}
function changecolor(){
if(totality==true){doPause();}
else{
getMsg();
getContentColor();
if(document.all){
msgfade.innerHTML=theMsg;
t=setTimeout("changecolor()",50);}
if(document.layers){
document.msgfade.document.write(theMsg);
document.msgfade.document.close();
t=setTimeout("changecolor()",70);}
}
}
function getFadeColor(){
icolor=icolor-1;
if(mcolor==1){contentcolor=colors1[icolor];}
else{contentcolor=colors2[icolor];}
}
function getGlowColor(){
icolor=icolor+1;
if(mcolor==1){contentcolor=colors1[icolor];}
else{contentcolor=colors2[icolor];}
}
function changemsg(){
if(imsg==msg.length-1){imsg=0; mcolor=1;}
else if(imsg != msg.lenght-1 && mcolor==1){imsg=imsg+1; mcolor=0;}
else{imsg=imsg+1; mcolor=1;}
}
function getContentColor(){
if(icolor==colors1.length-1 && glowing==true){
getFadeColor(); glowing=false; totality=true;}
else if(icolor < colors1.length && glowing==true){
getGlowColor();}
else if(icolor < 1 && glowing==false){changemsg(); getGlowColor(); glowing=true;}
else{getFadeColor();}
}
function getMsg() {
theMsg="<span style='font-size:"+fntSize+"pt; font-family:"+fntFam+";
width:"+spWidth+";'>"
theMsg+="<B><font color="+contentcolor+">"+msg[imsg]+"</font></B> "
theMsg+="</span>"
}
function getCellContent(){
cellcontent="<TABLE height="+high+
" width="+wide+" bgcolor="+bgcol+" cellpadding=0
cellspacing=0><TR><TD"+cellbg+"> </TD></TR></TABLE>"}
// End -->
</script>

</HEAD>

<!-- STEP TWO: Insert the onLoad event handler into your BODY tag -->

<BODY onLoad="initiate()">

<!-- STEP THREE: Copy this code into the BODY of your HTML document -->

<DIV id=msgbg style="position: absolute;"></DIV>


<DIV id=msgfade style="position: absolute;"></DIV>

<p><center>
<font face="arial, helvetica" size"-2">Free JavaScripts provided<br>
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
</center><p>

<!-- Script Size: 5.17 KB -->

Popup Window After 3 Sec Close After 5 Sec

<html>
<HEAD>

<SCRIPT LANGUAGE="JavaScript">
<!-- Original: Rick Johnson ([email protected]) -->
<!-- Web Site: http://rickjohnson.tripod.com -->

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin
function popupWin() {
text = "<html>\n<head>\n<title>Pop Window</title>\n<body>\n";
text += "<center>\n<br>";
text += "<a href='http://javascript.internet.com/new' target='_blank'><h2>New
JavaScripts</h2></a>";
text += "</center>\n</body>\n</html>\n";
setTimeout('windowProp(text)', 3000); // delay 3 seconds before opening
}
function windowProp(text) {
newWindow = window.open('','newWin','width=300,height=100');
newWindow.document.write(text);
setTimeout('closeWin(newWindow)', 5000); // delay 5 seconds before closing
}
function closeWin(newWindow) {
newWindow.close(); // close small window and depart
}
// End -->
</script>

</HEAD>
<BODY onLoad="popupWin()">
<center>
This demo will open a small popup window 3 seconds after the page is loaded and
close the window after it has been open for 5 seconds.
</center>

<p><center>
<font face="arial, helvetica" size"-2">Free JavaScripts provided<br>
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
</center><p>
</body>
</html>

Mouse ScroolMenu

<!-- THREE STEPS TO INSTALL MENU SCROLL:

1. Paste the coding into the HEAD of your HTML document


2. Copy the onLoad event handler into the BODY tag
3. Add the last code to the BODY of your HTML document -->
<!-- STEP ONE: Copy this code into the HEAD of your HTML document -->
<html>
<HEAD>

<SCRIPT LANGUAGE="JavaScript">

<!-- Original: Randy Bennett ([email protected]) -->


<!-- Web Site: http://home.thezone.net/~rbennett/utility/javahead.htm -->

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin
function buildMenu() {
speed=35;
topdistance=100;
items=6;
y=-50;
ob=1;
if (navigator.appName == "Netscape") {
v=".top=",dS="document.",sD="";
}
else {
v=".pixelTop=",dS="",sD=".style";
}
}
function scrollItems() {
if (ob<items+1) {
objectX="object"+ob; y+=10; eval(dS + objectX + sD + v + y);
if (y<topdistance) setTimeout("scrollItems()",speed);
else y=-50, topdistance+=40, ob+=1, setTimeout("scrollItems()",speed);
}
}
// End -->
</SCRIPT>

<!-- STEP TWO: Add this onLoad event handler into the BODY tag -->

<BODY onLoad="buildMenu(), scrollItems();">

<!-- STEP THREE: Add the following code to the BODY of your HTML page -->

<div id="object1" style="position:absolute; visibility:show; left:25px; top:-50px; z-


index:2">
<table border=1 width=150 bgcolor=80FFFF>
<td><center>
<a href=http://yoursite.com/page1.html>Link 1!</a>
</center></td>
</table>
</div>

<div id="object2" style="position:absolute; visibility:show; left:25px; top:-50px; z-


index:2">
<table border=1 width=150 bgcolor=80FFFF>
<td><center>
<a href=http://yoursite.com/page2.html>Link 2!</a>
</center></td>
</table>
</div>

<div id="object3" style="position:absolute; visibility:show; left:25px; top:-50px; z-


index:2">
<table border=1 width=150 bgcolor=80FFFF>
<td><center>
<a href=http://yoursite.com/page3.html>Link 3!</a>
</center></td>
</table>
</div>

<div id="object4" style="position:absolute; visibility:show; left:25px; top:-50px; z-


index:2">
<table border=1 width=150 bgcolor=80FFFF>
<td><center>
<a href=http://yoursite.com/page4.html>Link 4!</a>
</center></td>
</table>
</div>

<div id="object5" style="position:absolute; visibility:show; left:25px; top:-50px; z-


index:2">
<table border=1 width=150 bgcolor=80FFFF>
<td><center>
<a href=http://yoursite.com/page5.html>Link 5!</a>
</center></td>
</table>
</div>

<div id="object6" style="position:absolute; visibility:show; left:25px; top:-50px; z-


index:2">
<table border=1 width=150 bgcolor=80FFFF>
<td><center>
<a href=http://yoursite.com/page6.html>Link 6!</a>
</center></td>
</table>
</div>
</body>
</html>

Floating Menu

<!-- THREE STEPS TO INSTALL FLOATING MENU:

1. Copy the coding into the HEAD of your HTML document


2. Add the onLoad event handler into the BODY tag
3. Put the last coding into the BODY of your HTML document -->

<!-- STEP ONE: Paste this code into the HEAD of your HTML document -->
<html>
<HEAD>

<SCRIPT LANGUAGE="JavaScript">
<!-- Original: Randy Bennett ([email protected]) -->
<!-- Web Site: http://home.thezone.net/~rbennett/utility/javahead.htm -->

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin
function checkVersion4() {
var x = navigator.appVersion;
y = x.substring(0,4);
if (y>=4) setVariables();moveOB();
}

function setVariables() {
if (navigator.appName == "Netscape") {
h=".left=";v=".top=";dS="document.";sD="";
}
else{
h=".pixelLeft=";v=".pixelTop=";dS="";sD=".style";
}
objectX="object11"
XX=-70;
YY=-70;
OB=11;
}

function setObject(a) {
objectX="object"+a;
OB=a;
XX=eval("xpos"+a);
YY=eval("ypos"+a);
}

function getObject() {
if (isNav) document.captureEvents(Event.MOUSEMOVE);
}

function releaseObject() {
if (isNav) document.releaseEvents(Event.MOUSEMOVE);
check="no";
objectX="object11";
document.close();
}

function moveOB() {
eval(dS + objectX + sD + h + Xpos);
eval(dS + objectX + sD + v + Ypos);
}

var isNav = (navigator.appName.indexOf("Netscape") !=-1);


var isIE = (navigator.appName.indexOf("Microsoft") !=-1);
nsValue=(document.layers);
check="no";
function MoveHandler(e) {
Xpos = (isIE) ? event.clientX : e.pageX;
Ypos = (nsValue) ? e.pageY : event.clientY;
if (check=="no") {
diffX=XX-Xpos;
diffY=YY-Ypos;
check="yes";
if (objectX=="object11") check="no";
}
Xpos+=diffX;
Ypos+=diffY;
if (OB=="1") xpos1=Xpos,ypos1=Ypos;
moveOB();
}
if (isNav) {
document.captureEvents(Event.CLICK);
document.captureEvents(Event.DBLCLICK);
}
xpos1=50; // make this the left pixel value for object1 below
ypos1=50; // make this the top pixel value for object1 below
xpos11 = -50;
ypos11 = -50;
Xpos=5;
Ypos=5;
document.onmousemove = MoveHandler;
document.onclick = getObject;
document.ondblclick = releaseObject;
// End -->
</script>
</HEAD>

<!-- STEP TWO: Insert the onLoad event handler into your BODY tag -->

<BODY OnLoad="checkVersion4()">

<!-- STEP THREE: Copy this code into the BODY of your HTML document -->

<b>Click on "Moveable Menu" to pick<br>


it up and Double Click to drop it!</b>
<br>
<div id="object1" style="position:absolute; visibility:show; left:50px; top:50px; z-
index:2">
<table border=1 cellpadding=5>
<tr>
<td bgcolor=eeeeee><a href="javascript:void(0)"
onmousedown="setObject(1)">Movable Menu</a></td>
</tr>
<tr>
<td>
<br>
<A HREF="javascript:void(0)">Menu Item # 1</A><br>
<A HREF="javascript:void(0)">Menu Item # 2</a><br>
<A HREF="javascript:void(0)">Menu Item # 3</a>
</td>
</tr>
</table>
</div>

<div id="object11" style="position:absolute; visibility:show; left:-70px; top:-70px; z-


index:2">
</div>

</body>
</html>

Fading Rollover Menu

<!-- TWO STEPS TO INSTALL FLASHY FADING ROLLOVER MENU:

1. Copy the coding into the HEAD of your HTML document


2. Add the last code into the BODY of your HTML document -->

<!-- STEP ONE: Paste this code into the HEAD of your HTML document -->
<html>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->
<!-- Original: ScriptBreaker ([email protected]) -->
<!-- Web Site: http://www.ScriptBreaker.com -->
<!-- Begin
function locktrueie(myform){myform.ie.checked=true;}
function lockfalsenet(myform){myform.nets.checked=true;}
function goToURL() { window.location = "http://www.javascriptsource.com"; }

function nochange(mycheckbox)
{
if (mycheckbox.checked == true){mycheckbox.checked =
false;}else{mycheckbox.checked = true;}
}

// End -->
</script>

</HEAD>

<!-- STEP TWO: Copy this code into the BODY of your HTML document -->

<BODY>

<style>
. tds
{
background-Color:silver;
width:100;
height:20;
text-align:center;
border:1px solid gray;
font-size:14;
filter:alpha(opacity=45);
-moz-opacity:45%;
cursor:crosshair;
}
</style>

<script language="javascript">
nOpac = 50
nPlus = 2
nMin = 1
speed = 30
timer = null;
timer2 = null;
var ie5=(document.all && document.getElementById);
var ns6=(!document.all && document.getElementById);

function fadeImg2(teller)
{
apl[teller][1] = "Up";
changes();
}

function fadeImgend2(teller)
{
apl[teller][1] = "Down";
setTimeout("changes()",50);
}

function changes()
{
next_loop = true;
for (i=0;i<apl.length;i++)
{
obj = link_table.rows[i].cells[0];
opacity = apl[i][0]
if (apl[i][1] == "Up")
{
opacity += nPlus;
apl[i][0] = opacity;
if (apl[i][0] > 105)
{apl[i][1] = "";}
else
{next_loop = false;}
nOpac = opacity;
}
else
{
if (apl[i][1] == "Down")
{
opacity -= nMin;
apl[i][0] = opacity;
if (apl[i][0] < 45)
{apl[i][1] = "";}
else
{next_loop = false;}
nOpac = opacity;
}
}
if(ie5){
obj.style.filter="alpha(opacity="+opacity+")";
}
if(ns6){
obj.style.MozOpacity = opacity + '%';
}
}
if (next_loop == false)
{
timer = setTimeout("changes()",speed);
}
else
{
clearTimeout(timer);
}
}

//for each link option you need to make a new Array;


var apl = new Array();
apl[0] = new Array(45,"");
apl[1] = new Array(45,"");
apl[2] = new Array(45,"");
apl[3] = new Array(45,"");
apl[4] = new Array(45,"");
apl[5] = new Array(45,"");
//expl: apl[6] = new Array(45,"");
</script>

<body>
<table style="border:1px groove blue; width:130;height:180" cellspacing=0
cellpadding=0>
<tr><td align=center bgcolor=silver>
<font color=blue><u>JavaScript Source</u></font><br>
</td></tr>
<tr><td align=center border=2>
<table cellpadding=0 cellspacing=0 name=link_table id=link_table>
<tr>
<td class="tds" onmouseover="fadeImg2(0)" onmouseout="fadeImgend2(0)"
onclick="window.location='#';" style="border:1px solid gray;background-
color:silver;width:100;text-align:center">Home</td>
</tr>
<tr>
<td class="tds" onmouseover="fadeImg2(1)" onmouseout="fadeImgend2(1)"
onclick="window.location='#';" style="border:1px solid gray;background-
color:silver;width:100;text-align:center">New</td>
</tr>
<tr>
<td class="tds" onmouseover="fadeImg2(2)" onmouseout="fadeImgend2(2)"
onclick="window.location='#';" style="border:1px solid gray;background-
color:silver;width:100;text-align:center">About</td>
</tr>
<tr>
<td class="tds" onmouseover="fadeImg2(3)" onmouseout="fadeImgend2(3)"
onclick="window.location='#';" style="border:1px solid gray;background-
color:silver;width:100;text-align:center">Pictures</td>
</tr>
<tr>
<td class="tds" onmouseover="fadeImg2(4)" onmouseout="fadeImgend2(4)"
onclick="window.location='#';" style="border:1px solid gray;background-
color:silver;width:100;text-align:center">Partners</td>
</tr>
<tr>
<td class="tds" onmouseover="fadeImg2(5)" onmouseout="fadeImgend2(5)"
onclick="window.location='#';" style="border:1px solid gray;background-
color:silver;width:100;text-align:center">Contact</td>
</tr>
</table>
</td></tr></table>

</body>
</html>

Date Time
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD>
<META http-equiv=Content-Type content="text/html; charset=windows-1252">
<SCRIPT language=JavaScript>
function abc()
{ myid=window.setTimeout("showtime()",1000); }

function showtime()
{
d=new Date();
m=eval(d.getMonth())+1;
x=d.getDate()+"-"+m+"-"+d.getYear();
y=d.getHours()+":"+d.getMinutes()+":"+d.getSeconds();
document.f1.t1.value=x;
document.f1.t2.value=y;
myid=window.setTimeout("showtime()",1000);
}
</SCRIPT>
<META content="MSHTML 6.00.2800.1106" name=GENERATOR></HEAD>
<BODY onload=abc()>
<FORM name=f1>
<CENTER><FONT color=red size=7>Date <INPUT style="FONT-SIZE: x-large" size=15
name=t1><BR>Time <INPUT style="FONT-SIZE: x-large" size=15 name=t2>
</CENTER></FORM></FONT></BODY></HTML>
Fonts

<HTML><HEAD>
<TITLE>
HTML Markup Methods of the String Object
</TITLE>

<SCRIPT LANGUAGE = "JavaScript">


var anchorText = "This is an anchor",
bigText = "This is big text",
blinkText = "This is blinking text",
boldText = "This is bold text",
fixedText = "This is monospaced text",
fontColorText = "This is red text",
fontSizeText = "This is size 7 text",
italicText = "This is italic text",
linkText = "Click here to go to anchorText",
smallText = "This is small text",
strikeText = "This is strike out text",
subText = "subscript",
supText = "superscript"
document.writeln( anchorText.anchor( "top" ) );
document.writeln( "<BR>" + bigText.big() );
document.writeln( "<BR>" + blinkText.blink() );
document.writeln( "<BR>" + boldText.bold() );
document.writeln( "<BR>" + fixedText.fixed() );
document.writeln( "<BR>" + fontColorText.fontcolor( "red" ) );
document.writeln( "<BR>" + fontSizeText.fontsize( 7 ) );
document.writeln( "<BR>" + italicText.italics() );
document.writeln( "<BR>" + smallText.small() );
document.writeln( "<BR>" + strikeText.strike() );
document.writeln( "<BR>This is text with a " + subText.sub() );
document.writeln( "<BR>This is text with a " + supText.sup() );
document.writeln( "<BR>" + linkText.link( "#top" ) );
</SCRIPT>
</HEAD><BODY>
</HTML>

You might also like