.
Microsoft Windows Hosting, ASP, ASP.NET, Multiple Domain Name Plans
home
|
about us
|
contact us
Hosting web sites since 1997
WEB HOSTING
ECOMMERCE
DOMAIN NAMES
SUPPORT
REFERRAL PARTNERS
ORDER
LOGIN
For Phone Support Call:
1.212.753.1520
TOOLS
ASP Scripts
asp.NET Scripts
HTML Scripts
JAVA Scripts
PERL Scripts
PHP Scripts
WML Scripts
Support Tools
JAVA Scripts
.
Banner Rotation
/
Bgcolor change
/
Bgimage change
/
Block keys
/
Break frames
/
Browser detect
/
Browse hard disk
/
Capitalize letter
/
Celfar
/
Center popup
/
Change image
/
Char detect
/
Close delay
/
Close on click
/
Close window
/
Confirm
/
Crazy window
/
Date count
/
Date format
/
Date parts
/
Date status bar
/
Days left
/
Day quote
/
Day redirect
/
Decimalhexa
/
Disable field
/
Disable textbox
/
Display Link tool tip
/
Dynamic listbox
/
Effectbgfade
/
Email link href
/
Encode hexa
/
Exit window
/
Expire new
/
External Javascript
/
External js
/
Format Currency
/
Form check age
/
Form dropdown
/
Form validation
/
Form Validator
/
Frames only
/
Full screen
/
Go nowhere
/
History sniffer
/
How to Bookmark page
/
How to redirect
/
Image change
/
Imagemap
/
Image mouse over
/
Image preload
/
Is date
/
Javascript history
/
Jjulian date
/
Js animation
/
Last modified
/
Limit text area
/
Link javascript
/
Lower case
/
Monthday redirect
/
Mouse over image
/
Mouse over
/
Move items between select box
/
Move select list
/
Move Window
/
Multiline message
/
Open close child
/
Open window
/
Page footer
/
Page timeout
/
Password check
/
Pop on load
/
Press Key launcher
/
Print page
/
Prompt on load
/
Protect image
/
Radio button
/
Random number
/
Random quote
/
Redirect browser type
/
Refresh button
/
Refresh page
/
Rgbhex
/
Rotate timeout
/
Slideshow
/
Special chars
/
Spell Check
/
Status bar click
/
Status bar focus
/
Status bar mouse over
/
Status bar scroll
/
String ascii char
/
String InStr
/
String integer
/
String reverse
/
Strip spaces
/
Strip zeros
/
Textbox on change
/
Time based message
/
Timer alert
/
Time based
/
Time count
/
Time status bar
/
Uppercase
/
User history
/
User language
/
User os
/
User properties
/
Validate IP address
/
Validate length
/
Validate only numbers
/
Validate remove left spaces
/
Validate remove right spaces
/
Weekday image
/
Weekday redirect
/
Windows Alert Confirm Prompt
/
Windows Banner
/
Window pop
.
..
BannerRotation
Banner rotation =SOURCE+ <IMG src="1.gif" WIDTH=400 HEIGHT=75 NAME="adBanner" BORDER=0> <SCRIPT LANGUAGE=JAVASCRIPT > var a=new Image(); var b=new Image(); var c=new Image(); a.src = "1.gif" ; b.src = "2.gif" ; c.src = "3.gif" ; adImages = new Array (a, b, c); i=0; function rotate(){ i++; if (i == 3) { i = 0 ; } document.images.adBanner.src=adImages[i].src; setTimeout ("rotate()", 3000) ; } setTimeout ("rotate()", 3000) ; </SCRIPT> <HTML> <HEAD> <TITLE>Image Array</TITLE> </HEAD> <BODY > <CENTER> <IMG src="1.gif" WIDTH=400 HEIGHT=75 NAME="adBanner" BORDER=0> </CENTER> <SCRIPT LANGUAGE=JAVASCRIPT > var a=new Image(); var b=new Image(); var c=new Image(); a.src = "1.gif" ; b.src = "2.gif" ; c.src = "3.gif" ; adImages = new Array (a, b, c); i=0; function rotate(){ i++; if (i == 3) { i = 0 ; } document.images.adBanner.src=adImages[i].src; setTimeout ("rotate()", 3000) ; } setTimeout ("rotate()", 3000) ; </SCRIPT> </BODY> </HTML>
back to top
..
..
Bgcolorchange
How to change the background color of a Page Paste the following code in the header section of your HTML page <HTML> <HEAD> <SCRIPT LANGUAGE="JavaScript"> function change_bgcolor(icolor) { document.bgColor= icolor; } </SCRIPT> </HEAD> Write the following anywhere in your HTML page. Change the color Codes to suit your needs <A HREF="javascript:change_bgcolor('white')">White</A><BR> <A HREF="javascript:change_bgcolor('red')">Red</A><BR> <A HREF="javascript:change_bgcolor('green')">Green</A><BR> <A HREF="javascript:change_bgcolor('yellow')">Yellow</A><BR> <A HREF="javascript:change_bgcolor('black')">Black</A><BR> <A HREF="javascript:change_bgcolor('brown')">Brown</A><BR> You could also use a form element to get the same. <form name="myform"> <input type=radio name=bgchoice checked onClick="document.bgColor='white'">White<br> <input type=radio name=bgchoice onClick="document.bgColor='red'">Red<br> <input type=radio name=bgchoice onClick="document.bgColor='blue'">Blue<br><br> </form>
back to top
..
..
Bgimagechange
How to change the background Image <SCRIPT LANGUAGE="JavaScript"> function change_bgimage() { if (document.body.background == "some.gif") { document.body.background="other.gif"; } else { document.body.background="some.gif"; } } </SCRIPT> HTML code <BODY BACKGROUND="some.gif"> <A HREF="javascript:change_bgimage()">Swap the Background Image</A> </BODY> </HTML>
back to top
..
..
Blockkeys
Block some specific keys from entry This basically make use of the onKeypress event and compare it with their ASCII decimal codes Works only in Internet Explorer <form onSubmit="return false;"> This field will not accept special characters: (like # @ ! # * $ % ^ & .... etc) <TEXTAREA rows="2" cols="20" name="msg" onKeypress="if ((event.keyCode > 32 && event.keyCode < 48) || (event.keyCode > 57 && event.keyCode < 65) || (event.keyCode > 90 && event.keyCode < 97)) event.returnValue = false;">
back to top
..
..
Breakframes
Break out of Frames First detect if the frame exists Load the deisired page on the 'window.top' <script language="JavaScript"> function breakFrames() { if(parent.frames.length!=0) window.top.location.href="content.htm"; else alert("\nThere are currently no frames in this document."); } </script> <FORM> <INPUT TYPE='button' VALUE='Break Out Of Frames' onClick='breakFrames()'> </FORM>
back to top
..
..
Browserdetect
How to determine the browser version The following code will determine your browser type and version and print it on the HTML page. There are many more things that you could possibly do once you know the browser type, like you could forward the user to a particular page depending on the browser type. <HTML> <HEAD> <SCRIPT Language="JavaScript"> var uagent = navigator.userAgent; var appver = navigator.appVersion.substring(0,1); if (uagent.indexOf("MSIE") != -1) { document.write("Your Browser is Microsoft Internet Explorer<BR>"); } else { if (uagent.indexOf("Mozilla") != -1) { document.write("Your Browser is Netscape Navigator<BR>"); } else { document.write("Your Browser is of Unknown Type<BR>"); } } document.write("Your Browser Version is " + appver + "<BR>"); </SCRIPT> </HEAD>
back to top
..
..
Browseharddisk
Browse the local hard drives. Place the following script in your html page <CENTER> <FORM action="file:///c|/"><input type="submit" value="Browse c:\ drive"></FORM> <BR> <FORM action="file:///a|/"><input type="submit" value="Browse a:\ drive"></FORM> <BR> <FORM action="file:///b|/"><input type="submit" value="Browse b:\ drive"></FORM> <BR> <FORM action="file:///d|/"><input type="submit" value="Browse d:\ drive"></FORM> </CENTER>
back to top
..
..
Capitalizeletter
How to capitalize the first letter of the word First define a small function to detect the first letter of the word and convert the same to Upper case Then call that function from an Form Element <script language="JavaScript1.2"><!-- function toUpper() { var pattern = /(\w)(\w*)/; // a letter, and then one, none or more letters var a = document.form1.text1.value.split(/\s+/g); // split the sentence into an array of words for (i = 0 ; i < a.length ; i ++ ) { var parts = a[i].match(pattern); // just a temp variable to store the fragments in. var firstLetter = parts[1].toUpperCase(); var restOfWord = parts[2].toLowerCase(); a[i] = firstLetter + restOfWord; // re-assign it back to the array and move on } document.form1.text1.value = a.join(' '); // join it back together } //--></script> </head> HTML Code for form elements <body> <form name="form1"> <input type="text" name="text1"> <input type="button" onClick="toUpper()" value="To Upper Case"> </form> </body> </html>
back to top
..
..
Celfar
Convert Celcius to Fahrenheit This is a bit more that cool as this uses the onkeyup function It makes the conversion more dynamic than you could think !! <FORM> <INPUT TYPE="text" NAME="F" VALUE="" SIZE="6" MAXLENGTH="6" onkeyup="eval('C.value = ' + this.form.C_expr.value)"> ° F = <INPUT TYPE="hidden" NAME="F_expr" VALUE="(Math.round(((212-32)/100 * C.value + 32)*100))/100 "> <INPUT TYPE="text" NAME="C" VALUE="" SIZE="6" MAXLENGTH="6" onkeyup="eval('F.value = ' + this.form.F_expr.value)"> ° C <INPUT TYPE="hidden" NAME="C_expr" VALUE="(Math.round((100/(212-32) * (F.value - 32))*100))/100 "> </FORM>
back to top
..
..
Centerpopup
Open a new window aligned at the center First write a small script to open a new window with a desired preference <SCRIPT LANGUAGE="JavaScript"> <!-- Begin // A small function to open a page called test.htm function popwin() { window.open('test.htm', 'popupnav', 'width=200,height=170,resizable=1,scrollbars=auto'); } // A small function to call the popwin function after some delay function centerPop() { delay = 2; timer = setTimeout(" popwin()", delay*1000); } // End --> </script> Now in the BODY tag add call the centerPop Function <BODY OnLoad="centerPop();">
back to top
..
..
Changeimage
Change Image on Select Get the value of image in dorp down box and call the image.src property <SCRIPT LANGUAGE="JavaScript1.1"> function change_image(form) { var imgName = form.imgranges.options[form.imgranges.selectedIndex].value document.myimage.src = imgName } </SCRIPT> HTML Code to display the image and the dorp down box to select image <IMG SRC="img1.gif" NAME="myimage" HEIGHT=90 WIDTH=120> <FORM NAME="myform"> <SELECT NAME="imgranges" onChange="change_image(this.form)"> <OPTION VALUE="img1.gif">Image 1 <OPTION VALUE="img2.gif">Image 2 <OPTION VALUE="img3.gif">Image 3 <OPTION VALUE="img4.gif">Image 4 </SELECT> </FORM>
back to top
..
..
Chardetect
Detect for the presence of a character Write a common function to detect a char Place the following script in the header portion of the webpage <SCRIPT LANGUAGE="JavaScript"> <!-- Begin function validate(){ var invalid = " "; // Checks for space in this case if (document.submitform.firstname.value.indexOf(invalid) > -1) { alert("Sorry, space is NOT allowed."); return false; } else { return true; } } // End --> </script> Write a script to make a form with a text box and call the above function This script here alerts you if it finds a 'space' in the entry <form name=submitform onSubmit="return validate()"> First Name : <input type=text name=firstname> <BR><BR> <input type=submit value="Check for Space"> </form>
back to top
..
..
Closedelay
Close a window after few seconds delay First write a small script to open a new window <SCRIPT LANGUAGE="JavaScript"> <!-- Begin // A small function to open a page called test.htm function popwin() { closetime = 2; // '0' for not closing the window preview = window.open('test.htm', 'popupnav', 'width=200,height=170,resizable=1,scrollbars=auto'); // This checks to close the window after 2 seconds as specified if (closetime) setTimeout("preview.close();", closetime*1000); } // End --> </script> Now in the BODY tag add call the centerPop Function <BODY OnLoad="popwin();">
back to top
..
..
Closeonclick
Close Window on Clicking anywhere on the Document Paste the following script in the HEAD portion of the document <SCRIPT LANGUAGE="JavaScript"> <!-- function closeWin() { window.close(); } if (window.Event) document.captureEvents(Event.ONCLICK); document.onclick = closeWin; // --> </SCRIPT>
back to top
..
..
Closewindow
Close a Window This is a relatively simple task Define a HTML button and call the window.close function <FORM> <INPUT TYPE='button' VALUE='Close' " onClick='window.close()'"></FORM> </CENTER> </FORM>
back to top
..
..
Confirm
Confirm from the user before proceding <script language="JavaScript"> function confirmUser() { if (!confirm("\nAre you sure you wish to proceed ?")) return false; else location.href="http://www.yahoo.com" return true; } </script> HTML Code to generate the Button to call confirm script. <form action="alert_confirm.htm" method="post" onClick="return confirmUser()"> <input type="button" name="submit" value="Click here to Visit Yahoo"> </form>
back to top
..
..
Crazywindow
Wow, a real crazy window Write the following in the header portion of the HTML file <SCRIPT LANGUAGE="JavaScript"> <!-- Begin if(document.layers || document.all) { a = 1; setInterval("Jump()", 10); } function Jump() { a = a + 1; self.moveBy((Math.random() * a * 2 - a), (Math.random() * a * 2) - a); } // End --> </script> Now to open a window provide a button script as follows. On clicking that button invoke the above script You might have to use ' CTRL-ALT-DEL' to close the window <form><input type=button value="Open The Crazy Window" onClick="demo=window.open('test_crazy.htm');"></form> =END
back to top
..
..
Datecount
Date from a given date and number of days This makes use of the 'toUpperCase()' Function <script language="JavaScript"> <!-- function addDays(myDate,days) { return new Date(myDate.getTime() + days*24*60*60*1000); } // User Any date that you need thisdate = new Date; // Currently calculating for 10 days daysfromnow = 10; document.write("<B>" + daysfromnow + " days from now, the date will be </B>" + addDays(thisdate,daysfromnow)) //--> </script>
back to top
..
..
Dateformat
Date formats in JavaScript Define a small function to show date Then call that function. <script language="JavaScript"> var todayDate=new Date() var year=todayDate.getYear() if (year<2000) year="19"+year var day=todayDate.getDay() var month=todayDate.getMonth() var daym=todayDate.getDate() if (daym<10) daym="0"+daym var dayarray=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday") var montharray=new Array("January","February","March","April","May","June","July","August","September","October","November","December") document.write("<b>Today is : "+dayarray[day]+", "+montharray[month]+" "+daym+", "+year+"</b><BR>") document.write("<b>"+month+"/"+daym+"/"+year+"</b><BR>") </script>
back to top
..
..
Dateparts
Date and Time Parts in JavaScript First Get the Date today Then use Javascript function to split the date parts <script language="JavaScript"> today = new Date(); document.write("<b>Date : </b>"+today+"<BR>"); gtoday = today.toGMTString(); document.write("<b>GMT Date Time : </b>"+gtoday+"<BR>"); mydate = today.getDate(); document.write("<b>The Date : </b>"+mydate+"<BR>"); myday = today.getDay(); document.write("<b>The Day : </b>"+myday+"<BR>"); myhour = today.getHours(); document.write("<b>The Hour : </b>"+myhour+"<BR>"); myminutes = today.getMinutes(); document.write("<b>The Minutes : </b>"+myminutes+"<BR>"); myseconds = today.getSeconds(); document.write("<b>The Seconds : </b>"+myseconds+"<BR>"); mytime = today.getTime(); document.write("<b>The Time in Secs : </b>"+mytime+"<BR>"); mymonth = today.getMonth(); document.write("<b>The Month : </b>"+mymonth+"<BR>"); myyear = today.getFullYear(); document.write("<b>The Year : </b>"+myyear+"<BR>"); </script>
back to top
..
..
Datestatusbar
Show date and time in Statusbar Define a small function to show date Then call that function. <script language="JavaScript"> function doClock() { window.setTimeout( "doClock()", 1000 ); today = new Date(); self.status = today.toString(); } // Call the function doClock() </script>
back to top
..
..
Daysleft
Calculate the number of days remaining till a given date Say lets calculate Days left till 31/12/2000 <SCRIPT LANGUAGE="JavaScript"> <!-- function y2k(number) { return (number < 1000) ? number + 1900 : number; } function timeTillDate(whenDay,whenMonth,whenYear) { var now = new Date(); var then = new Date(y2k(whenYear),whenMonth-1,whenDay); var difference = Date.UTC(y2k(then.getYear()),then.getMonth(),then.getDate(),0,0,0) - Date.UTC(y2k(now.getYear()),now.getMonth(),now.getDate(),0,0,0); return difference/(1000*60*60*24); } document.write("<B> Days left till 31 Dec 2000 is :</B>" + timeTillDate(31,12,2000) + " Days "); //--></SCRIPT>
back to top
..
..
Dayquote
Quote for each day of the month on the top of page Write the following in the header portion of the HTML file <script language="Javascript"> <!-- Begin theDate= new Date(); var day = theDate.getDate(); var year = theDate.getYear(); year = (year < 2000) ? year + 1900 : year; var textdate = (theDate.getMonth() + 1) + '/' + theDate.getDate() + '/' + year; var numquotes = 31; quotes = new Array(numquotes+1); quotes[1] = "I am quote 1"; quotes[2] = "I am quote 2"; quotes[3] = "I am quote 3"; quotes[4] = "I am quote 4"; quotes[5] = "I am quote 5"; quotes[6] = "I am quote 6"; quotes[7] = "I am quote 7"; quotes[8] = "I am quote 8"; quotes[9] = "I am quote 9"; quotes[10] = "I am quote 10"; quotes[11] = "I am quote 11"; quotes[12] = "I am quote 12"; quotes[13] = "I am quote 13"; quotes[14] = "I am quote 14"; quotes[15] = "I am quote 15"; quotes[16] = "I am quote 16"; quotes[17] = "I am quote 17"; quotes[18] = "I am quote 18"; quotes[19] = "I am quote 19"; quotes[20] = "I am quote 20"; quotes[21] = "I am quote 21"; quotes[22] = "I am quote 22"; quotes[23] = "I am quote 23"; quotes[24] = "I am quote 24"; quotes[25] = "I am quote 25"; quotes[26] = "I am quote 26"; quotes[27] = "I am quote 27"; quotes[28] = "I am quote 28"; quotes[29] = "I am quote 29"; quotes[30] = "I am quote 30"; quotes[31] = "I am quote 31"; document.write('<b>Quote of the day for ' + textdate + '</b><br>'); document.write('<i>' + quotes[day] + '</i><br>'); // End --> </script>
back to top
..
..
Dayredirect
Place the following script in your html page Lest assume that we have an /html file for each day of the week. e.g., Sunday.html, Mondoy.html, Tuesday.html....and so on. And that we need to redirect the user to the page depending on the day of the week Copy the following code in the header portion of the HTML page <SCRIPT LANGUAGE="JavaScript"> <!-- Begin function initArray() { this.length = initArray.arguments.length; for (var i = 0; i < this.length; i++) this[i+1] = initArray.arguments[i]; } var WeekDayArray = new initArray("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"); var today = new Date(); var day = WeekDayArray[today.getDay()+1]; window.location = day + ".html"; // End --> </SCRIPT>
back to top
..
..
Decimalhexa
Convert Decimal to Hexadecimal write a small function to convert decimal into hexadecimal <script language="JavaScript"> <!-- var hexChars = "0123456789ABCDEF"; function Dec2Hex () { var d = document.myform.decbox.value; var a = d % 16; var b = (d - a)/16; hex = "" + hexChars.charAt(b) + hexChars.charAt(a); document.myform.hexbox.value = hex; return false; } //--> </script> HTML Code to generate the form elements and call the convert script <FORM name="myform"> Decimal <input type="text" name="decbox" value="" maxlength=3> <BR> Hexadecimal <input type="text" name="hexbox" value=""> <BR> <BR> <input type="submit" name="Convert" value="Convert" onClick="return Dec2Hex();"> </FORM>
back to top
..
..
Disablefield
<form name="myForm"> <input name="myField" type="text" disabled onFocus="if (this.disabled) this.blur()"> </form> or <script language="JavaScript"><!-- document.myForm.myField.disabled=true; //--></script>
back to top
..
..
Disabletextbox
How to disable a text box Just use the 'Disabled' function <form> <input type="text" name="username" disabled="true" value="try-me"> </form>
back to top
..
..
DisplayLinktooltip
Display a ToolTip on a Link Not possible in Netscape Navigator. In Microsoft Internet Explorer its a peice of cake. Add a TITLE attribute to the <A> tag and IE will automatically display this text as a tooltip when users hover their mouse over the link. <HTML> <BODY> <A HREF="http://www.generalhosting.com.net" TITLE="Hi ! General Hosting !!" >Click here</A>. </BODY> </HTML>
back to top
..
..
Dynamiclistbox
Dynamic List Box <script language="javascript"> <!-- function setOption(form, index) { for (var i = 0; i < form.List2.length; i++) { form.List2.options[i].text = ""; form.List2.options[i].value = ""; } if (index == 0) { form.List2.options[0].text = "India"; form.List2.options[0].value = "india"; form.List2.options[1].text = "Japan"; form.List2.options[1].value = "japan"; form.List2.options[2].text = "USA"; form.List2.options[2].value = "usa"; form.List2.options[3].text = "Germany"; form.List2.options[3].value = "germany"; } else if (index == 1) { form.List2.options[0].text = "Blue"; form.List2.options[0].value = "#0000FF"; form.List2.options[1].text = "Red"; form.List2.options[1].value = "#FF0000"; form.List2.options[2].text = "Yellow"; form.List2.options[2].value = "#FFFF00"; form.List2.options[3].text = "Green"; form.List2.options[3].value = "#00FF00"; } else if (index == 2) { form.List2.options[0].text = "One"; form.List2.options[0].value = "1"; form.List2.options[1].text = "Two"; form.List2.options[1].value = "2"; form.List2.options[2].text = "Three"; form.List2.options[2].value = "3"; form.List2.options[3].text = "Four"; form.List2.options[3].value = "4"; } form.List2.selectedIndex = 0; } //--> </script> The HTML form elements can be generated by the follwoing scripts <form name="myform"> <select name="List1" OnChange="setOption(this.form, this.selectedIndex)"> <option>Country <option>Colours <option>Numbers </select> <select name="List2" OnChange="this.form.ValueIn2.value=this.options[this.selectedIndex].value"> <option>India <option>Japan <option>USA <option>Germany </select> </form>
back to top
..
..
Effectbgfade
Fade the background color Place the following script in the header portion of the webpage <SCRIPT LANGUAGE="JavaScript"> <!-- Begin var red,dir=5,redstr; function fadeloop(){ red=red+dir; if (red<0){ red=0;dir=-dir; }else if (red>255){ red=255;dir=-dir; } redstr=red.toString(16); if (red<16) redstr="0"+redstr; document.bgColor="#"+redstr+"0000"; setTimeout("fadeloop()",5); } // End --> </SCRIPT> <body bgcolor="#000000" onLoad="red=0;fadeloop()">
back to top
..
..
Emaillinkhref
Send e mail on a click A code embedded in an HTML tag is as follows <A HREF="mailto:info@yourdomain.net">Send Mail </A> To write the subject as well as the body of the mail use the following code <A HREF="mailto:info@your-domain.net?subject=Test Mail from &body=Hi Ravi">Send Test Mail to with a subject and message</A> Or a little more enhanced script would be as follows Send a mail and cc and bcc to other also <A HREF="mailto:info@your-domain.net?cc=info@your-domain.net&bcc=info@your-domain.net&subject=Test Mail">Send a test mail to info and cc to info</A>
back to top
..
..
Encodehexa
How can I encode a character string into its hexadecimal ASCII representation? Write a small function to convert each char into hexadecimal <script language="JavaScript"> <!-- function hexMe() { var text1 = document.myform.hexval.value; var text2=''; for (i=0;i<text1.length;i++) text2 += text1.charCodeAt(i).toString(16); document.myform.hexval.value = text2; return false; } //--> </script> HTML code to generate the form elements to call the hex converter function <FORM name="myform" onClick="return hexMe()"> <input type="text" name="hexval" value=""> <input type="submit" name="submit" value="Convert to Hexadecimal"> </FORM>
back to top
..
..
Exitwindow
Open a new window when the user leaves the page First write a small script to open a new window with a desired preference <SCRIPT LANGUAGE="JavaScript"> <!-- Begin function leavepage() { window.open('feedback.htm','','toolbar=no,menubar=no,location=no,height=500,width=500'); } // End --> </SCRIPT> Now the trick is to call the function in the BODY tag as follows <BODY onUnload="leavepage()">
back to top
..
..
Expirenew
Expiring the New Icon First Add the following javascript in the header portion of the HTML file <script language="Javascript"> <!-- // please keep these lines on when you copy the source // made by: Nicolas - http://www.javascript-page.com var image = "new.gif" function expnew(when) { when = new Date(when) date = new Date() if (when.getTime() > date.getTime()) { document.write("<img src="+image+">") } } //--> </script> Now to show the 'new' icon till date 6/2/2002 use the following HTML code. <script language="Javascript"> <!-- expnew("6/2/2002") //--> </script>
back to top
..
..
Externaljavascript
Calling external Javascript File This is a very good approach Keeping a set of javascripts that would be used in many pages helps a great deal if you decide in future to change something in it. You would not have to make the change in all pages Place the following script in the header portion of the webpage <script language="JavaScript" src="/jscript/basic.js"></script>
back to top
..
..
Externaljs
A js file is the javascript you would embed in your page. You just link to it instead of embedding it. Place the following script in the header portion of the webpage <SCRIPT LANGUAGE="JavaScript" SRC="js/dim_pop.js"></SCRIPT>
back to top
..
..
FormatCurrency
function formatCurrency(num) { num = num.toString().replace(/\$|\,/g,''); if(isNaN(num)) num = "0"; sign = (num == (num = Math.abs(num))); num = Math.floor(num*100+0.50000000001); cents = num%100; num = Math.floor(num/100).toString(); if(cents<10) cents = "0" + cents; for (var i = 0; i < Math.floor((num.length-(1+i))/3); i++) num = num.substring(0,num.length-(4*i+3))+','+ num.substring(num.length-(4*i+3)); return (((sign)?'':'-') + '$' + num + '.' + cents); }
back to top
..
..
Formcheckage
Place the following script in the header portion of the webpage <SCRIPT LANGUAGE="JavaScript"> <!-- Begin function validate(form){ var adultAge= 18; if (form.age.value>=adultAge) alert(form.age + "Welcome you are above the age " + adultAge); else alert(form.age + "Sorry you are below " + adultAge + "."); return false } // End --> </SCRIPT> <FORM name="testform" onSubmit="return validate(this.form)"> Age:<input type="text" size="3" name="age"> <input type="submit" value="Submit"> </FORM>
back to top
..
..
Formdropdown
Go to the selected item in drop Down box Write a function in JavaScript to go to a predefined set of pages <script language="JavaScript"> <!-- function buildArray() { var a = buildArray.arguments; for (i=0; i<a.length; i++) { this[i] = a[i]; } this.length = a.length; } var urls1 = new buildArray("", "http://www.yahoo.com", "http://www.altavista.com", "http://www.hotbot.com", "http://www.infoseek.com"); function go(which, num, win) { n = which.selectedIndex; if (n != 0) { var url = eval("urls" + num + "[n]") if (win) { openWindow(url); } else { location.href = url; } } } // --> </script> The HTML code to call the baove function from a drop down box. <form name="myform"> <FONT SIZE="2" FACE="Arial"> Select an Item and it would automatically take you there. <select name="menu1" onChange="go(this, 1, false)"> <option>Select an item <option> - Yahoo <option> - Altavista <option> - Hotbot <option> - Infoseek </select>
back to top
..
..
Formvalidation
Form Validation Script The three most useful functions that you would end up using for user friendliness would be // When the script encounters a text field that contains invalid data, you can direct the cursor to that field and automatically select the interior text. // Use the combination of following three document.forms[0].elements[0].focus(); document.forms[0].elements[0].blur(); document.forms[0].elements[0].select(); <B>Place the following script in the header portion of the webpage</B><BR> <SCRIPT LANGUAGE="JavaScript"> <!-- function checkName(field) { // Check for blank Spaces if (field.value == "") { alert("Value is required"); field.focus(); field.blur(); field.select(); } } // --> </SCRIPT> Now write the following code in the HTML page for validating a empty entry <FORM> Full Name: <INPUT TYPE="text" NAME="userName" VALUE="" SIZE="15" onChange="checkName(this)"> Email address: <INPUT TYPE="text" NAME="email" VALUE="" SIZE="15" onChange="checkEmail(this)"> </FORM>
back to top
..
..
FormValidator
function Form1_Validator(Form) { if (Form.Name.value == "") { alert("Please enter a value for the \"Name\" field."); Form.Name.focus(); return (false); } if (Form.Name.value.length < 2) { alert("Please enter at least 2 characters in the \"Name\" field."); Form.Name.focus(); return (false); } if (Form.Address.value == "") { alert("Please enter a value for the \"Address\" field."); Form.Address.focus(); return (false); } if (Form.Address.value.length < 2) { alert("Please enter at least 2 characters in the \"Address\" field."); Form.Address.focus(); return (false); } if (Form.City_ST_ZIP.value == "") { alert("Please enter a value for the \"City_ST_ZIP\" field."); Form.City_ST_ZIP.focus(); return (false); } if (Form.City_ST_ZIP.value.length < 2) { alert("Please enter at least 2 characters in the \"City_ST_ZIP\" field."); Form.City_ST_ZIP.focus(); return (false); } if (Form.Phone.value == "") { alert("Please enter a value for the \"Phone\" field."); Form.Phone.focus(); return (false); } if (Form.Phone.value.length < 10) { alert("Please enter at least 10 characters in the \"Phone\" field."); Form.Phone.focus(); return (false); } if (Form.Email.value == "") { alert("Please enter a value for the \"Email\" field."); Form.Email.focus(); return (false); } if (Form.Email.value.length < 5) { alert("Please enter at least 5 characters in the \"Email\" field."); Form.Email.focus(); return (false); } if (Form.EMAIL.value.indexOf('@', 0) == -1 || Form.EMAIL.value.indexOf('.', 0) == -1) { alert("Please enter a valid EMAIL address."); Form.EMAIL.focus(); return (false);} return (true); }
back to top
..
..
Framesonly
Allow frame pages to be loaded only together. If a page is requested directly , it will redirect to the home URL. <SCRIPT LANGUAGE="JavaScript"> // this page should never be load alone if (window.location == "http://generalhosting.com/right_page.htm") { window.location = "http://generalhosting.com/"; } </SCRIPT>
back to top
..
..
Fullscreen
=INFO+ Open a full screen window =END =SOURCE+ First write a small script to open a new window <SCRIPT LANGUAGE="JavaScript"> <!-- Begin function fullScreen(theURL) { window.open(theURL, '', 'fullscreen=yes, scrollbars=auto'); } // End --> </script> Now Paste this code in the HTML page <a href="javascript:void(0);" onClick="fullScreen('fullscreen.htm');">Open a full screen Window</a> If you are making the user to see a full screen window then please do give them am option to close the window You could use the following code for the same <a href="javascript:window.close();">Close This Window</a> =END
back to top
..
..
Gonowhere
Go no where on URL Link This is nothing but not stating a value for the anchor <a href="#">Click here and U'll go no where </a><BR> <a href="javascript:">Click here and U'll go no where</a><BR> <a href="javascript:void(null)">Click here and U'll go no where</a><BR>
back to top
..
..
Historysniffer
History Sniffer This is a more of a jazz script. Find where the user is coming from and then redirect the user accordingly A History Sniffer <script language="JavaScript"><!-- if (document.referrer.indexOf('page2.htm') > -1) location.href = 'page2.htm'; else if (document.referrer.indexOf('page3.htm') > -1) location.href = 'page2.htm'; else location.href = 'default.htm'; //--></script>
back to top
..
..
HowtoBookmarkpage
Bookmark this page A simple button that call a function to BookMark This page <script Language="JavaScript"> <!-- function bookmarkMe() { window.external.addFavorite('http://www.generalhosting.com','generalhosting.com : Feed your Tech '); } // --> </script> <FORM> <input type="button" onClick="bookmarkMe()" name="2" value="BookMark Me"> </FORM> The same effect on Right Click on the document <script Language="JavaScript"> <!-- function bookMe() { window.external.addFavorite('http://www.generalhosting.com','generalhosting.com : Feed your Tech'); } document.onmousedown=bookMe // --> </script>
back to top
..
..
Howtoredirect
Redirect to generalhosting.com Use the following in the header portion of the HTML page. <META HTTP-EQUIV="REFRESH" CONTENT="30;URL=http://www.generalhosting.com"> The complete sample HTML page code for the above effect. <HTML> <HEAD> <META HTTP-EQUIV="REFRESH" CONTENT="30;URL=http://www.generalhosting.net"> <TITLE>generalhosting.net</TITLE> </HEAD> <BODY> After 30 seconds this page will automatically redirect to <A HREF="http://www.generalhosting.net">Will go to generalhosting.net in 30 seconds</A>. </BODY> </HTML>
back to top
..
..
Imagechange
How to change the image on Mouse Over This can be done by using the onMouseOver and onMouseOut events for the image. But remember that images do not support the onMouseOver and onMouseOut properties. But theres a work around. Wrap the image in a hyperlink. Hyperlink supports the onMouseOver and onMouseOut properties. <a href="somepage.htm" onMouseOver="document . images ['cat'] . src = 'test2.gif';" onMouseOut ="document . images ['cat'] . src = 'test1.gif';"> <img name="cat" src="comp1.jpg" border=0></a>
back to top
..
..
Imagemap
Image Map First define the mapping coordinates as follows <MAP NAME="mymap"> <AREA SHAPE=RECT COORDS="14,15,151,87" HREF="home.htm" onMouseOver="window.status='Home'; return true;"> <AREA SHAPE=RECT COORDS="162,16,283,85" HREF="feedback.htm" onMouseOver="window.status='Feedback'; return true;"> <AREA SHAPE=RECT COORDS="294,15,388,87" HREF="info.htm" onMouseOver="window.status='Information'; return true;"> <AREA SHAPE=RECT COORDS="13,98,79,178" HREF="mailto:info@your-domain.net" onMouseOver="window.status='Email Us'; return true;"> </MAP> Now in the image tag call the map as follows <IMG SRC="imagemap.gif" USEMAP="#mymap">
back to top
..
..
Imagemouseover
Alert on Mouse over Image <img src="someimage.gif" onmouseover="alert('Hello from WonderSky')"> The above code works fine with IE but not with all versions of Netscape Navigator. Netscape doesn't seem to support the onMouseOver event for images. The trick is to use the <A> mouse over on this is supported. So, wrap the image in a set of <A> tags that include your onMouseOver handler, like following. <HTML> <BODY> <a href="" onMouseOver="alert('Hi from WonderSky');"><img src="someimage.gif" border="0"></a> </BODY> </HTML>
back to top
..
..
Imagepreload
How to pre-load an Image The Image object which makes it possible for JavaScript programs to load images without displaying them in the browser window. First you create an Image Object The set the image object's src property to the image's URL. Set the following code in the Header portion of the page. <script> myimage = new Image (); myimage . src = "someimage.gif"; </script>
back to top
..
..
Isdate
Calculate for the validity of a date Say, lets calculate the validity of date 31 Feb, 2000 <script language="JavaScript"> <!-- function y2k(number) { return (number < 1000) ? number + 1900 : number; } function isDate (day,month,year) { // checks if date passed is valid // will accept dates in following format: // isDate(dd,mm,ccyy), or // isDate(dd,mm) - which defaults to the current year, or // isDate(dd) - which defaults to the current month and year. // Note, if passed the month must be between 1 and 12, and the // year in ccyy format. var today = new Date(); year = ((!year) ? y2k(today.getYear()):year); month = ((!month) ? today.getMonth():month-1); if (!day) return false var test = new Date(year,month,day); if ( (y2k(test.getYear()) == year) && (month == test.getMonth()) && (day == test.getDate()) ) return true; else return false } if (isDate(31,2,2000)) document.write("<B>Is Valid</B>"); else document.write("<B>Is Invalid</B>"); //--> </script>
back to top
..
..
Javascripthistory
The JavaScript History Property Forward Button <script language="JavaScript"> <!-- javascript:window.history.forward(1); //--> </script> Back Button <script language="JavaScript"> <!-- javascript:window.history.forward(-1); //--> </script> Back button from Link <SCRIPT LANGUAGE="JavaScript"> <!-- function back() { history.go(-1); } //--> </SCRIPT> <A HREF="javascript:back()">Back</A> This is a more of a jazz script. Find where the user is coming from and then redirect the user accordingly A History Sniffer Sniff the history and then redirect <script language="JavaScript"><!-- if (document.referrer.indexOf('page2.htm') > -1) location.href = 'page2.htm'; else if (document.referrer.indexOf('page3.htm') > -1) location.href = 'page2.htm'; else location.href = 'default.htm'; //--></script>
back to top
..
..
Jjuliandate
Calculate the Julian Date Say lets calculate the julian Date for Today <SCRIPT LANGUAGE="JavaScript"> <!-- function makeArray() { this[0] = makeArray.arguments.length; for (i = 0; i<makeArray.arguments.length; i++) this[i+1] = makeArray.arguments[i]; } var accumulate = new makeArray( 0, 31, 59, 90,120,151,181,212,243,273,304,334); var accumulateLY = new makeArray( 0, 31, 60, 91,121,152,182,213,244,274,305,335); function LeapYear(year) { if ((year/4) != Math.floor(year/4)) return false; if ((year/100) != Math.floor(year/100)) return true; if ((year/400) != Math.floor(year/400)) return false; return true; } function getJulian(day,month,year) { if (LeapYear(year)) return (day + accumulateLY[month]); else return (day + accumulate[month]); } var today = new Date(); document.write('<B>Julian day = </B>' + getJulian(today.getDate(),today.getMonth()+1,today.getYear)); //--> </SCRIPT>
back to top
..
..
Jsanimation
Animation using JavaScript Define a small animator function This swaps the image based on the current image Note: you must have two images, for swapping <script language="JavaScript"> var i=1; function animator() { anipic = document.images[0].src; ref = anipic.substring(0,anipic.length-5)+i+".gif"; document.images[0].src = ref; i++; if (i==2) { i=0; } } // Now call the animator function after a time interval to get the affect of animation function jsanim() { animator(); setTimeout("jsanim()", 500); } </script> HTML Code . The function must be called in the body tag <body onLoad="jsanim()"> <IMG HEIGHT=16 WIDTH=28 SRC = "eye0.gif">
back to top
..
..
Lastmodified
Determine the last time this page was modified Simple script that reads the HTML page and prints the page. <script language="Javascript"> <!-- document.write("The page was last updated on: "+document.lastModified+"") //--> </script>
back to top
..
..
Limittextarea
Restrict entry in a text area Place the following script in the header portion of the webpage <SCRIPT LANGUAGE="JavaScript"> <!-- Begin function checkLength(field, countfield, maxlimit) { if (field.value.length > maxlimit) // if too long...trim it! field.value = field.value.substring(0, maxlimit); // otherwise, update 'characters left' counter else countfield.value = maxlimit - field.value.length; } // End --> </script> Copy the following code in the HTML page. There are two textboxes. One for entering the value and the other for counting the entries <form name=myform action="code_limit_textarea.htm"> <font size="1" face="arial, helvetica, sans-serif"> ( You may enter up to 50 characters. )<BR> <textarea name=usermsg wrap=physical cols=28 rows=4 onKeyDown="checkLength(this.form.usermsg,this.form.countLen,50);" onKeyUp="checkLength(this.form.usermsg,this.form.countLen,50);">
back to top
..
..
Linkjavascript
Call JavaScript Function from a link. Write a small Javascript function to be called from the click of a link. <SCRIPT LANGUAGE="JavaScript"> function myFunc() { alert ("Hey , you clicked me now !!. Well, I sort of liked it") } </SCRIPT> Now write the following in the HTML page to call the javascript function from the browser. <A HREF="javascript:myFunc()">Click Here</A>
back to top
..
..
Lowercase
Forcing lower CASE This makes use of the 'toLowerCase()' Function <SCRIPT LANGUAGE="JavaScript"><!-- function convert() { document.myForm.myText1.value = document.myForm.myText1.value.toLowerCase(); return false; } //--></SCRIPT> HTML code for form elements <FORM NAME="myForm" onSubmit="return convert(this)"> <INPUT TYPE="TEXT" NAME="myText1" VALUE=""> <INPUT TYPE="SUBMIT" VALUE="Convert to LowerCase"> </FORM>
back to top
..
..
Monthdayredirect
Redirect the user to a page depending on the day of the month Place the following script in your html page Lest assume that we have an .html file for each day of the month e.g., 1.html, 2.html, 3.html....and so on. And that we need to redirect the user to the page depending on the day of the month Copy the following code in the header portion of the HTML page <SCRIPT LANGUAGE="JavaScript"> <!-- Begin var today = new Date(); var day = today.getDate(); window.location = day + ".html"; // End --> </SCRIPT>
back to top
..
..
Mouseoverimage
Change image on MouseOver <SCRIPT LANGUAGE="JavaScript"> <!-- IMG01 = "on.gif" //image when mouse is over the link IMG02 = "off.gif" //image when mouse is not over the link function imgover(imgname){ imgname.src = IMG01 } function imgout(imgname){ imgname.src = IMG02 } //--> </SCRIPT> Script to show the links and the images next to it. This Javascript displays a small arrow before the link which you have your mouse over. <IMG NAME="IMG01" SRC="off.gif" WIDTH=10 HEIGHT=10 BORDER=0> <A HREF="http://www.yahoo.com" onMouseOver="imgover(IMG01)" onMouseOut="imgout(IMG01)">Yahoo <IMG NAME="IMG02" SRC="off.gif" WIDTH=10 HEIGHT=10 BORDER=0> <A HREF="http://www.altavista.com" onMouseOver="imgover(IMG02)" onMouseOut="imgout(IMG02)">Alta Vista
back to top
..
..
Mouseover
A Basic Mouse Over Function To Show the message in Status bar <a href="www.yahoo.com" onMouseOver="self.status='I know u gonna go Yahoo';return true" >Yahoo</a> To pop up an alert message <a href="www.yahoo.com" onMouseOver="alert('I am sure, U clicked me !')" >Yahoo</a>
back to top
..
..
Moveitemsbetweenselectbox
Move items between selected form fields Place the following script in the header portion of the page <SCRIPT LANGUAGE="JavaScript"> <!-- function getSelectedString(selectItem) { var i; var j = 0; var outlist = ""; for (i = 0; i < selectItem.options.length; i++) { if (j > 0) { outlist = outlist + ", "; } outlist = outlist + selectItem.options[i].value; j++; } return outlist; } function addItems(fromItem, toCtrl) { var i; var j; var itemexists; var nextitem; // step through all items in fromItem for (i = 0; i < fromItem.options.length; i++) { if (fromItem.options[i].selected) { // search toCtrl to see if duplicate j = 0; itemexists = false; while ((j < toCtrl.options.length) && (!(itemexists))) { if (toCtrl.options[j].value == fromItem.options[i].value) { itemexists = true; alert(fromItem.options[i].value + " found!"); } j++; } if (!(itemexists)) { // add the item nextitem = toCtrl.options.length; toCtrl.options[nextitem] = new Option(fromItem.options[i].text); toCtrl.options[nextitem].value = fromItem.options[i].value; } } } } function removeItems(fromItem) { var i = 0; var j; var k = 0; while (i < (fromItem.options.length - k)) { if (fromItem.options[i].selected) { // remove the item for (j = i; j < (fromItem.options.length - 1); j++) { fromItem.options[j].text = fromItem.options[j+1].text; fromItem.options[j].value = fromItem.options[j+1].value; fromItem.options[j].selected = fromItem.options[j+1].selected; } k++; } else { i++; } } for (i = 0; i < k; i++) { fromItem.options[fromItem.options.length - 1] = null; } } //--> </SCRIPT> Now add the following as part of the HTML Page <FORM NAME="main" ACTION="code_move_selectlist.htm" METHOD="GET"> <INPUT TYPE="HIDDEN" NAME="Avail"> <INPUT TYPE="HIDDEN" NAME="Sel"> <TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0> <TR> <TD VALIGN="TOP"> List 1<BR> <SELECT MULTIPLE NAME="AvailItems" SIZE="5"> <OPTION VALUE="1">Item 1</OPTION> <OPTION VALUE="2">Item 2</OPTION> </SELECT> </TD> <TD ALIGN="CENTER"> <INPUT TYPE="BUTTON" NAME="AddBtn" VALUE=" >> " OnClick="addItems(this.form.AvailItems, this.form.SelItems); removeItems(this.form.AvailItems);"> <BR> <BR> <INPUT TYPE="BUTTON" NAME="RemoveBtn" VALUE=" << " OnClick="addItems(this.form.SelItems, this.form.AvailItems); removeItems(this.form.SelItems);"> <BR> </TD> <TD VALIGN="TOP"> List 2<BR> <SELECT MULTIPLE NAME="SelItems" SIZE="5"> <OPTION VALUE="3">Item 3</OPTION> <OPTION VALUE="4">Item 4</OPTION> </SELECT> </TD> </TR> </TABLE> <BR> <BR> <INPUT TYPE="BUTTON" VALUE="Submit" OnClick="this.form.Avail.value = getSelectedString(this.form.AvailItems); this.form.Sel.value = getSelectedString(this.form.SelItems); this.form.submit();"> </FORM> </BODY> </HTML>
back to top
..
..
Move select list
Move items between select box Place the following script in the header portion of the page <SCRIPT LANGUAGE="JavaScript"> <!-- function getSelectedString(selectItem) { var i; var j = 0; var outlist = ""; for (i = 0; i < selectItem.options.length; i++) { if (j > 0) { outlist = outlist + ", "; } outlist = outlist + selectItem.options[i].value; j++; } return outlist; } function addItems(fromItem, toCtrl) { var i; var j; var itemexists; var nextitem; // step through all items in fromItem for (i = 0; i < fromItem.options.length; i++) { if (fromItem.options[i].selected) { // search toCtrl to see if duplicate j = 0; itemexists = false; while ((j < toCtrl.options.length) && (!(itemexists))) { if (toCtrl.options[j].value == fromItem.options[i].value) { itemexists = true; alert(fromItem.options[i].value + " found!"); } j++; } if (!(itemexists)) { // add the item nextitem = toCtrl.options.length; toCtrl.options[nextitem] = new Option(fromItem.options[i].text); toCtrl.options[nextitem].value = fromItem.options[i].value; } } } } function removeItems(fromItem) { var i = 0; var j; var k = 0; while (i < (fromItem.options.length - k)) { if (fromItem.options[i].selected) { // remove the item for (j = i; j < (fromItem.options.length - 1); j++) { fromItem.options[j].text = fromItem.options[j+1].text; fromItem.options[j].value = fromItem.options[j+1].value; fromItem.options[j].selected = fromItem.options[j+1].selected; } k++; } else { i++; } } for (i = 0; i < k; i++) { fromItem.options[fromItem.options.length - 1] = null; } } //--> </SCRIPT> Now add the following as part of the HTML Page <FORM NAME="main" ACTION="code_move_selectlist.htm" METHOD="GET"> <INPUT TYPE="HIDDEN" NAME="Avail"> <INPUT TYPE="HIDDEN" NAME="Sel"> <TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0> <TR> <TD VALIGN="TOP"> List 1<BR> <SELECT MULTIPLE NAME="AvailItems" SIZE="5"> <OPTION VALUE="1">Item 1</OPTION> <OPTION VALUE="2">Item 2</OPTION> </SELECT> </TD> <TD ALIGN="CENTER"> <INPUT TYPE="BUTTON" NAME="AddBtn" VALUE=" >> " OnClick="addItems(this.form.AvailItems, this.form.SelItems); removeItems(this.form.AvailItems);"> <BR> <BR> <INPUT TYPE="BUTTON" NAME="RemoveBtn" VALUE=" << " OnClick="addItems(this.form.SelItems, this.form.AvailItems); removeItems(this.form.SelItems);"> <BR> </TD> <TD VALIGN="TOP"> List 2<BR> <SELECT MULTIPLE NAME="SelItems" SIZE="5"> <OPTION VALUE="3">Item 3</OPTION> <OPTION VALUE="4">Item 4</OPTION> </SELECT> </TD> </TR> </TABLE> <BR> <BR> <INPUT TYPE="BUTTON" VALUE="Submit" OnClick="this.form.Avail.value = getSelectedString(this.form.AvailItems); this.form.Sel.value = getSelectedString(this.form.SelItems); this.form.submit();"> </FORM> </BODY> </HTML>
back to top
..
..
MoveWindow
Moving the Window <SCRIPT language=JavaScript1.2> <!-- Begin function rattle() { x=4; y=12; if (self.moveBy) { for (i = x; i > 0; i--) { for (j = y; j > 0; j--) { self.moveBy(0,i); self.moveBy(i,0); self.moveBy(0,-i); self.moveBy(-i,0); } } } } // End --> </SCRIPT> ------------- HTML version ------------------- <HTML><HEAD> <TITLE>Shake iit</TITLE> <SCRIPT language=JavaScript1.2> <!-- Begin function rattle() { x=4; y=12; if (self.moveBy) { for (i = x; i > 0; i--) { for (j = y; j > 0; j--) { self.moveBy(0,i); self.moveBy(i,0); self.moveBy(0,-i); self.moveBy(-i,0); } } } } // End --> </SCRIPT> </HEAD> <BODY> <P> <FORM><P><INPUT onclick=rattle(this.form) type=button value="Shake it"> </FORM> <body></HTML>
back to top
..
..
Multilinemessage
How to show line breaks in Message Boxes say you need to add line breaks to dialog boxes displayed using the alert(), prompt(), or confirm() methods. Just add the ' \n ' Special Character <HTML> <HEAD> <SCRIPT LANGUAGE="JavaScript"> <!-- function showPrompt() { var myString = "I span across lines. \n This is message one. \n This is message two."; alert(myString); } // --> </SCRIPT> </HEAD> In the body tag place the following code <BODY> <A HREF="javascript:showPrompt()">Click Here</A> </BODY> </HTML>
back to top
..
..
Openclosechild
Open and Close Child Window Call the onLoad and onUnload events in the BODY tag <BODY onLoad="openChild()" onUnload="closeChild()"> The openChild function that gets called when the document loads This opens the child window function openChild() { win = window.open("mychild.html", "cld", "height=200,width=400"); } The closeChild function that closes the Child window if still open function closeChild() { if (win && win.open && !win.closed) win.close(); }
back to top
..
..
Openwindow
Open a Window Define a Small funtion to pop up a window Then call the function froma Link or Button Click <script language="JavaScript"> <!-- var popup = null; var over = "Launch Pop-up Navigator"; function popwin() { window.open('test.htm', 'popupnav', 'width=200,height=170,resizable=1,scrollbars=auto'); } // --> </script> Click on the link below to open a New Window <a href="javascript:popwin()">Open Window</a> Click on the button below to open a New Window <FORM> <INPUT TYPE='button' VALUE='Open Window' " onClick='popwin();'"></FORM> </CENTER> </FORM>
back to top
..
..
Pagefooter
How to write a common footer for the HTML Page Copy and paste the following code in a file and name it as footer.js <!-- Begin document.write('<center>'); document.write('| <a href="index.html">Home</a> '); document.write('| <a href="feedback.htm">Feedback</a> '); document.write('| <a href="contact.htm">Contact</a> '); document.write('|</center>'); // End --> Now copy the following code at the bottom of the HTML page where you want the footer <SCRIPT LANGUAGE="JavaScript" src="footer.js"></script>
back to top
..
..
Pagetimeout
Use Timeout to go to another page or close a window Timeout feature to automatically go to a differnet HTML page within a set time <body onLoad="setTimeout('window.location.href=\"http://www.irt.org/\"',10000)"> Timeout feature to delay when submitting a form before closing the window THis closes a window after a specified time <form onSubmit="setTimeout('window.close',5000)"> <input type="submit" value="Close Window"> </form>
back to top
..
..
Passwordcheck
<script Language="JavaScript"> <!-- function Validator(theForm) { if (theForm.password.value == "") { alert("Please enter a value for the \"Password\" field."); theForm.password.focus(); return (false); } var checkOK = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyzƒŠŒŽšœžŸÀÁÂÃÄÅÆÇÈÉÊËÌÍÎÏÐÑÒÓÔÕÖØÙÚÛÜÝÞßàáâãäåæçèéêëìíîïðñòóôõöøùúûüýþÿ0123456789-"; var checkStr = theForm.password.value; var allValid = true; for (i = 0; i < checkStr.length; i++) { ch = checkStr.charAt(i); for (j = 0; j < checkOK.length; j++) if (ch == checkOK.charAt(j)) break; if (j == checkOK.length) { allValid = false; break; } } if (!allValid) { alert("Please enter only letter and digit characters in the \"Password\" field."); theForm.password.focus(); return (false); } if (theForm.chkpwd.value == "") { alert("Please enter a value for the \"Re-entry\" field."); theForm.chkpwd.focus(); return (false); } if (theForm.chkpwd.value.length < 3) { alert("Please enter at least 3 characters in the \"Re-entry\" field."); theForm.chkpwd.focus(); return (false); } var checkOK = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyzƒŠŒŽšœžŸÀÁÂÃÄÅÆÇÈÉÊËÌÍÎÏÐÑÒÓÔÕÖØÙÚÛÜÝÞßàáâãäåæçèéêëìíîïðñòóôõöøùúûüýþÿ0123456789-"; var checkStr = theForm.chkpwd.value; var allValid = true; for (i = 0; i < checkStr.length; i++) { ch = checkStr.charAt(i); for (j = 0; j < checkOK.length; j++) if (ch == checkOK.charAt(j)) break; if (j == checkOK.length) { allValid = false; break; } } if (!allValid) { alert("Please enter only letter and digit characters in the \"Re-entry\" field."); theForm.chkpwd.focus(); return (false); } if ( theForm.chkpwd.value != theForm.password.value) { alert("Passwords do not match."); theForm.chkpwd.focus(); return (false); } return (true); } --> </script> <form METHOD="POST" NAME="register" ACTION="register.asp" onsubmit="return Validator(this)" > Choose Password: <INPUT TYPE="password" NAME="password" SIZE="30" MAXLENGTH="40" value="" > Confirm Password: <INPUT TYPE="password" NAME="chkpwd" SIZE="30" MAXLENGTH="40" value="" > <INPUT TYPE="submit" NAME="Register" VALUE="Register" > </form>
back to top
..
..
Poponload
Pop Message on loading the page This can simple be done by calling alert on the body onLoad function <body onLoad="alert('You are welcome to my page!')" onUnload="alert('Please visit me again !')">
back to top
..
..
PressKeylauncher
Open web page with the touch of a key board Place the following script in the header portion of the webpage <SCRIPT LANGUAGE="JavaScript"> <!-- Begin var key = new Array(); // Define key launcher pages here key['w'] = "http://www.generalhosting.net/"; key['d'] = "http://www.yahoo.com/"; key['c'] = "http://www.altavista.com/"; key['b'] = "http://www.excite.com/"; function getKey(keyStroke) { isNetscape=(document.layers); eventChooser = (isNetscape) ? keyStroke.which : event.keyCode; which = String.fromCharCode(eventChooser).toLowerCase(); for (var i in key) if (which == i) window.location = key[i]; } document.onkeypress = getKey; // End --> </script>
back to top
..
..
Printpage
Printing a Page or Document Printing the document This uses the 'window.print' property <SCRIPT LANGUAGE="JavaScript"> <!-- Begin if (window.print) { document.write('<form><input type=button name=print value="Print this page" onClick="javascript:window.print()"></form>'); } // End --> </script> Action : if (window.print) { document.write(''); } // End --> In a frame based HTML page, if you wish to print just the middle frame <form> <input type="button" value="Print" onClick="if (document.print) top.frames[1].document.print()"> </form> Printing 4 seperate frames at one go <html> <head> <script language="JavaScript"> <!-- function printAll() { for (var i=0;i<frames.length;i++) if (window.print) frames[i].print(); } //--></script> </head> <frameset onLoad="printAll()" rows="*,*,*"> <frame src="apage.htm"> <frame src="anotherpage.htm"> <frame src="yetanotherpage.htm"> </frameset> </html>
back to top
..
..
Promptonload
Prompt User for his name Use the window.promt function to get the user name Then display the name in the HTML Page <body> <script language="JavaScript"> username=window.prompt("What is your name?","") </script> <center> <font size=6 color='black'>Welcome to the Page,</font></center> <script language="JavaScript"> document.write("<center><font size=4 color='red'>"+username+"</font></center>") </script>
back to top
..
..
Protectimage
Alert on Mouse Click Place the following script in the header portion of the page <SCRIPT LANGUAGE="JavaScript"> <!-- Begin function protect(e) { alert("Sorry, you don't have permission to right-click."); return false; } function trap() { if(document.images) for(i=0;i<document.images.length;i++) document.images[i].onmousedown = protect; } // End --> </SCRIPT> Now in the body tag place the following command And if the user clicks on the web page he is alerted with a message. <BODY OnLoad="trap()">
back to top
..
..
Radiobutton
How to find which radio button is checked Write a small function to be called when an element is checked <SCRIPT LANGUAGE="Javascript"> <!-- function test_checked(form) { var msg msg ="" for (var i = 0; i < 3; i++) { msg += myform.myrad[i].value if (myform.myrad[i].checked) msg += ' is CHECKED' msg += "\n" } alert(msg) } // --> </SCRIPT> HTML Code to generate the radio buttons and call the function <FORM NAME="myform"> <INPUT TYPE="radio" NAME="myrad" Value="A" onClick = "">A <INPUT TYPE="radio" NAME="myrad" Value="B" onClick = "">B <INPUT TYPE="radio" NAME="myrad" Value="C" onClick = "">C <INPUT TYPE="button" NAME="button" Value="Test Order" onClick="test_checked(this.form)"> </FORM>
back to top
..
..
Random number
Generate a random number Write the following in the header portion of the HTML file This is a small function to generate random numbers between a given min and max number range <SCRIPT LANGUAGE="JavaScript"> <!-- Begin function getRandomNum(lbound, ubound) { return (Math.floor(Math.random() * (ubound - lbound)) + lbound); } // End --> </script> Now to show the random number generated whereever you wish on the page use the following code <SCRIPT LANGUAGE="JavaScript"> <!-- Begin document.write("Random number in [1, 100] is <B>" + getRandomNum(1,100) + "</B>"); // End --> </script>
back to top
..
..
Randomquote
Write the following in the header portion of the HTML file <SCRIPT LANGUAGE="JavaScript"> <!-- This script and many more are available free online at --> <!-- The JavaScript Source!! http://javascript.internet.com --> <!-- Begin var totalquotes = 5 var quote = new Array( totalquotes+1) quote[0]="I am quote 0" quote[1]="I am quote 2" quote[2]="I am quote 3" quote[3]="I am quote 4" quote[4]="I am quote 5" quote[5]="I am quote 6" function myRan(){ var i = -1 while (i < 0 || i > totalquotes || isNaN(i)){ i = parseInt(Math.random()*( totalquotes+1)) } return i } quo = myRan() quox = quote[quo] document.write(quox) // End --> </SCRIPT>
back to top
..
..
Redirectbrowsertype
Redirecting User depending on Browser Type This is a simple javascript that first detects the users browser type Then redirects the user to another page depending on the browser type <SCRIPT LANGUAGE="JavaScript"><!-- if (navigator.appName == 'Netscape') location.href = 'netscape.html'; else { if (navigator.appName == 'Microsoft Internet Explorer') location.href = 'explorer.html'; else if (navigator.appName == '*') location.href = 'other.html'; } //--></SCRIPT>
back to top
..
..
Refreshbuton
Reload the page on Button Click There are multiple functions to get the effect You could use either location.href.reload(true); OR location.href = location.href; OR history.go(0); The Whole code . JavaScript Function and the HTML Code <SCRIPT LANGUAGE="JavaScript"> <!-- function refme() { history.go(0); } //--> </SCRIPT> <form> <input type="button" bane="ref" value="Refresh" onClick="refme()"> </form> Another simple way of doing the above would be <form> <input type="button" value="Click me to Refresh" onClick="history.go(0)"> </form> What in case of frames ?? Use JavaScript to refresh another frame every 10 seconds: <SCRIPT LANGUAGE="JavaScript"> <!-- function refreshFrame() { parent.otherFrameName.location.href = 'http://www.somewhere.com/'; setTimeout('refreshFrame()',10000);}refreshFrame(); //--> </SCRIPT>
back to top
..
..
Refreshpage
Reload the page on Button Click There are multiple functions to get the effect You could use either location.href.reload(true); OR location.href = location.href; OR history.go(0); The Whole code . JavaScript Function and the HTML Code <SCRIPT LANGUAGE="JavaScript"> <!-- function refme() { history.go(0); } //--> </SCRIPT> <form> <input type="button" bane="ref" value="Refresh" onClick="refme()"> </form> Another simple way of doing the above would be <form> <input type="button" value="Click me to Refresh" onClick="history.go(0)"> </form> What in case of frames ?? Use JavaScript to refresh another frame every 10 seconds: <SCRIPT LANGUAGE="JavaScript"> <!-- function refreshFrame() { parent.otherFrameName.location.href = 'http://www.somewhere.com/'; setTimeout('refreshFrame()',10000);}refreshFrame(); //--> </SCRIPT>
back to top
..
..
Rgbhex
Convert RGB Colors to HexaDecimal Colors First Write a Small Conversion Code <script language="JavaScript"> <!-- var hexChars = "0123456789ABCDEF"; function ConvertRGBH () { var red = document.myform.rbox.value; var green = document.myform.gbox.value; var blue = document.myform.bbox.value; if ((red >255) || (red < 0) || (green<0) || (green>255) || (blue<0) || (blue>255)){ alert ("Please enter digits between 0 and 255"); return false; } getr = Dec2Hex(red); getg = Dec2Hex(green); getb = Dec2Hex(blue); document.myform.hexbox.value = "#" + getr + getg + getb; return false; } function Dec2Hex (Dec) { var a = Dec % 16; var b = (Dec - a)/16; hex = "" + hexChars.charAt(b) + hexChars.charAt(a); return hex; } //--> </script> HTML Code to generate the form elements and call the convert script <FORM name="myform"> R <input type="text" name="rbox" value="" maxlength=3> <BR> G <input type="text" name="gbox" value="" maxlength=3> <BR> B <input type="text" name="bbox" value="" maxlength=3> <BR> HEX <input type="text" name="hexbox" value="" maxlength=3> <BR> <input type="submit" name="Convert" value="Convert" onClick="return ConvertRGBH();"> </FORM>
back to top
..
..
Rotatetimeout
Use Timeout to rotate through a set of HTML Pages Cycle through several HTML files with a timeout set between each page Place this script on each html page <SCRIPT LANGUAGE="JavaScript"> <!-- function loadOne() { window.frames[0].location.href = 'page1.html'; setTimeout("loadTwo()",5000); } function loadTwo() { window.frames[0].location.href = 'page2.html'; setTimeout("loadThree()",5000); } function loadThree() { window.frames[0].location.href = 'page3.html'; } setTimeout("loadOne()",5000); //--> </SCRIPT>
back to top
..
..
Slideshow
The image and message Slide Show Place the following script in the header portion of the page <script type="text/javascript" language="javascript"> <!-- Hide code from older browsers myMsg = new Array( "This is Message 0", "This is Message 1", "This is Message 2", "This is Message 3", "This is Message 4", "This is Message 5", "This is Message 6", "This is Message 7", "This is Message 8", "This is Message 9", "This is Message 10" ) thisImg = 0 imgCt = myMsg.length function newSlide(direction) { if (document.images) { thisImg = thisImg + direction if (thisImg < 0) { thisImg = imgCt-1 } if (thisImg == imgCt) { thisImg = 0 } document.slideshow.src = "test" + thisImg + ".gif" document.imgForm.imgText.value = myMsg[thisImg] } } document.imgForm.imgText.value = myMsg[thisImg] // Stop hiding code --> </script> Now to show the slide show place the following code in the HTML page under the BODY Section Here its assumes that the images are prefixed as 'test' and suffixed with a counter. For e.g., test1.gif, test2.gif, test3.gif, test4.gif, test5.gif,.... and so on. <h1>Ravi's Slide Show </h1> <B><a href="javascript:newSlide(-1)">Previous</a></B> <B><a href="javascript:newSlide(1)">Next</a></B><BR><BR> <img height="50" width="100" src="test0.gif" alt="My message" name="slideshow" align="left"><BR><BR> <form name="imgForm" action="" align="left"> <textarea name="imgText" rows="9" cols="30" readonly>
back to top
..
..
Specialchars
Writing the Special Characters on the HTML page This is a pretty simple and cool script <SCRIPT LANGUAGE="JavaScript"> <!-- Begin for(var count=33; count<255; count++) { document.write('<center><TABLE border=0><TR><TD ALIGN=left>' + count); document.write('</TD><TD ALIGN=center>= </TD><TD ALIGN=right>' + '&' + '#'); document.write(count + ';</TD></TR></TABLE></center>'); } // End --> </script>
back to top
..
..
SpellCheck
<html> <header> <script> function spellchck(wrd){ var oWrd = new ActiveXObject("Word.Application"); // create an instance of MS Word window.focus(); // to return the focus from MS Word try{ oWrd.visible = false; // don't show Word's window if(!oWrd.checkSpelling(wrd)){ with(oWrd){ Documents.Add(); Documents(1).Activate(); var oSuggestions = GetSpellingSuggestions(wrd); if (oSuggestions.Count == 0) { alert("no suggestions"); oWrd.Documents(1).Close(); oWrd.Quit(); return ""; } var strList = ""; for(var i = 1; i <= oSuggestions.Count; i++) strList += oSuggestions(i).Name +","; strList = strList.substring(0, strList.length -1); // to remove the last "," alert (strList); } } else { alert("correct"); return ""; } } catch(err){ alert (err.description); oWrd.Documents(1).Close(); oWrd.Quit(); return ""; } oWrd.Documents(1).Close(); oWrd.Quit(); return strList; } </script> </header> <body> <form onSubmit='javascript:spellchck(test.value);return false;'> <input name="test"> <input type=submit value=submit > </form> </body> </html>
back to top
..
..
Statusbarclick
Show message in status Bar on Mouse click A simple script to write something to the status bar And erase the same on ckicking another <script language="JavaScript"> <!-- hide function statbar(txt) { window.status = txt;} // --> </script> The HTML script to create the buttons and call the scripts <form> <input type="button" name="look" value="Write in Statusbar" onClick="statbar('Hey, you just wrote me in the Statusbar!');"> <input type="button" name="erase" value="Erase from statusbar" onClick="statbar('');"> </form>
back to top
..
..
Statusbarfocus
Show message in Status Bar on Focus First lets create two functions for an element in focus and out of focus <script language="JavaScript"> <!-- function infocus(text) { window.status = text; } function outfocus() { window.status = ""; } // --> </script> HTML Code to show the text boxes. <form> Text1: <input type="text" name="Text1" value="" onFocus="infocus('Your focus is on textbox 1')" onBlur="outfocus()"> Text2: <input type="text" name="Text2" value="" onFocus="infocus('Your focus is on textbox 2')" onBlur="outfocus()"> </form>
back to top
..
..
Statusbarmouseover
Show message in Status bar on mouse over This is a simple script that can be embedded in the anchor tag itself. <a href="goto_test.asp" onMouseOver="window.status='Your Mouse is over the link!'; return true;" onMouseOut="window.status='';"> Bring Your Mouse Here</a>
back to top
..
..
Statusbarscroll
Show a scrolling message in Status Bar This is a simple script that can be embedded in the anchor tag itself. <script language="JavaScript"> <!-- hide var scrtxt = "Hey buddy, Look at me, I am scrolling" + "And u know what ? " + "U made me scroll !"; var length = scrtxt.length; var width = 100; var pos = -(width + 2); function scroll() { pos++; var scroller = ""; if (pos == length) { pos = -(width + 2); } if (pos < 0) { for (var i = 1; i <= Math.abs(pos); i++) { scroller = scroller+" ";} scroller = scroller + scrtxt.substring(0, width - i + 1); } else { scroller = scroller + scrtxt.substring(pos, width + pos); } window.status = scroller; setTimeout("scroll()", 100); } // --> </script> Now to call the script above on page load, call the function in the body TAG as shown below. <body onLoad="scroll()">
back to top
..
..
Stringasciichar
ASCII to String Use the String.fromCharCode(i) function <script language="JavaScript"> for(i=97;i<123;i++){ document.write(String.fromCharCode(i)); document.write("<BR>"); } </script>
back to top
..
..
StringInStr
The JavaScript equivalent of the InStr function in ASP, a function that will indicated whether a character or string pattern appears in the string passed to the function. strObj.indexOf(subString[, startIndex]); alert("7up".indexOf('u'));
back to top
..
..
Stringinteger
Convert String to Number Though JavaScript is an untyped language i.e., you don't have to explicitly declare your variables to be a specific type, but still at times you might need to explicitly convert from a string to a number or vice-versa x = "5" y = parseInt(x); The y returns 5 as integer. Check out parseFloat() . Used to convert decimals/floats
back to top
..
..
Stringreverse
Reverse a String Write a small function to reverse a String Then call it from a HTML form element <SCRIPT LANGUAGE="JavaScript"> <!-- function reverse() { var value = document.myForm.myText.value; for (var text = '',i=value.length-1;i>-1;i=i-1) text += value.charAt(i); document.myForm.myText.value = text; } //--> </SCRIPT> HTML code to call the reverse function <FORM NAME="myForm"> <INPUT TYPE="TEXT" NAME="myText"> <INPUT TYPE="BUTTON" onClick="reverse()" VALUE="Reverse Me"> </FORM>
back to top
..
..
Stripspaces
Remove/Strip Leading and Trailing Spaces Write a small function to reverse a String Then call it from a HTML form element Strip leading and Trailing Blanks off a filed <SCRIPT LANGUAGE="JavaScript"> <!-- function stripSpaces() { x = document.myForm.myText.value; while (x.substring(0,1) == ' ') x = x.substring(1); while (x.substring(x.length-1,x.length) == ' ') x = x.substring(0,x.length-1); document.myForm.myText.value = x } //--> </SCRIPT> HTML code to call the function to trim the Spaces <FORM NAME="myForm"> <INPUT TYPE="TEXT" NAME="myText"> <INPUT TYPE="BUTTON" VALUE="Strip White Space" onClick="stripSpaces()"> </FORM>
back to top
..
..
Stripzeros
Strip Leading Zeros Define a function to strip leading zeroes <script language="JavaScript"> <!-- var num,newTerm function stripZeros(num){ while (num.charAt(0) == "0") { newTerm = num.substring(1, num.length); num = newTerm; } if (num == "") num = "0"; return num; } function stripNow () { form.stripbox.value = stripZeros(form.stripbox.value); } //---> </script> HTML Code to call the function to strip the leadinf zeros <FORM name="form" method="post"> <INPUT TYPE=button NAME=button1 VALUE="Strip the Zeros" onClick="stripNow()"> <INPUT TYPE=text NAME="stripbox" SIZE=12 MAXLENGTH=12 onFocus="this.select()"> </FORM>
back to top
..
..
Textboxonchange
Pop Message when text in box changes Create a small function to alert a message as follows and then call the onChange function of text box. <script language="JavaScript"> <!-- function myChange(myval) { alert("The Current value in the text box is " + myval); } // --> </script> HTML Code to show the text box. <form> <input type="text" onChange=" myChange(this.value)"> </form>
back to top
..
..
Timebasedmessage
Show message or Image depending on the time <HTML> <HEAD> <SCRIPT LANGUAGE="JavaScript"> function showTimeMsg() { now = new Date(); nowHour = now.getHours(); if ((nowHour > 7) && (nowHour < 19)) { // show circles between 8am and 6pm document.write("Good Day"); } else { // show squares at all other times document.write("Take Rest Now"); } } </SCRIPT> </HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript">showTimeMsg()</SCRIPT> </BODY> </HTML> Now if you wish to show image instead of a message then replace the mesaage with image TAGS as follows <HTML> <HEAD> <SCRIPT LANGUAGE="JavaScript"> function showTimeMsg() { now = new Date(); nowHour = now.getHours(); if ((nowHour > 7) && (nowHour < 19)) { // show day.gif between 8am and 6pm document.write("<IMG SRC=\"day.gif\">"); } else { // show night.gif at all other times document.write("<IMG SRC=\"night.gif\">"); } } </SCRIPT> </HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript">showTimeMsg()</SCRIPT> </BODY> </HTML>
back to top
..
..
Timeralert
Show Alert Message after some time Define a small function to show date Then call that function. <script language="JavaScript"> <!-- hide function timer() { setTimeout("alert('I am popping after 2 seconds you clicked the button!')", 2000); } // --> </script> Code to show the button to be clicked to pop up a message <form> <input type="button" value="Click me " onClick="timer()"> </form>
back to top
..
..
Timebased
Show message based on Time of Day Just strip the hours from time and call the respective messages <script language="JavaScript"> <!-- day = new Date() hr = day.getHours() if (hr ==1) document.write("Good morning! But take some rest. Its 1AM") if (hr ==2) document.write("Good morning! But I said take rest, Its 2 AM") if (hr ==3) document.write("Hey, U never Listen, Huh ! it's 3AM") if (hr ==4) document.write("Do what you want. Its 4AM ") if (hr ==5) document.write("Whoa 5AM ! Its about for daylight. I am sure you would not be up for the sunrise") if (hr ==6) document.write("Hey, Its the 6AM Sunrise. Enjoy the new day") if ((hr == 6) || (hr ==7) || (hr ==8) || (hr == 9) || (hr ==10)) document.write("A Very Good Morning! Its " + hr + " AM") if (hr ==11) document.write("Its 11 AM. Plan for Lunch") if (hr ==12) document.write("NOON! Beat the crowd and rush to the cafeteria") if (hr ==14) document.write("It's 2PM. Have your lunch if u haven't yet !") if ((hr==15) || (hr==16) || (hr==13)) document.write("A very Good Afternoon!") if ((hr==17) || (hr==18) || (hr==19) || (hr==20) || (hr==21) || (hr==22)) document.write("Good Evening ! Play some games") if (hr==23) document.write("It's almost midnight...Be a good tomy and go to sleep") if (hr==0) document.write("It's midnight... do you ever sleep?") //---> </script>
back to top
..
..
Timecount
Time from a given time The follwoing script will alert a message after sometime <script language="JavaScript"> <!-- // say 'Hello world' after 5 seconds = 5000 miliseconds setTimeout('alert("Hello world")',5000); //--> </script> But the above script can also be used differently Say alert after sometime of a Button Click ! <script language="JavaScript"> <!-- function sayHello(){ // say 'Hello world' after 5 seconds = 5000 miliseconds setTimeout('alert("Hello world")',5000); } //--> </script> The HTML Code to generate a button to call the alert <form> <input type="button" onClick="sayHello();" value="Click and I'll alert after 5 Seconds"> </form>
back to top
..
..
Timestatusbar
Show time in Status Bar Define a small function to show time Then call that function. <script language="JavaScript"> <!-- function show(){ var Digital=new Date() var hours=Digital.getHours() var minutes=Digital.getMinutes() var seconds=Digital.getSeconds() var sf="AM" if (hours>12){ sf="PM" hours=hours-12 } if (hours==0) hours=12 if (minutes<=9) minutes="0"+minutes if (seconds<=9) seconds="0"+seconds window.status=hours+":"+minutes+":" +seconds+" "+sf setTimeout("show()",1000) return false; } show() </script>
back to top
..
Uppercase
Forcing UPPER CASE This makes use of the 'toUpperCase()' Function <SCRIPT LANGUAGE="JavaScript"><!-- function convert() { document.myForm.myText1.value = document.myForm.myText1.value.toUpperCase(); return false; } //--></SCRIPT> HTML code for form elements <FORM NAME="myForm" onSubmit="return convert(this)"> <INPUT TYPE="TEXT" NAME="myText1" VALUE=""> <INPUT TYPE="SUBMIT" VALUE="Convert to Uppercase"> </FORM>
back to top
..
..
Userhistory
Tell the users the number of pages the user has visited in current session Call the onLoad and onUnload events in the BODY tag <SCRIPT LANGUAGE="Javascript"> <!-- var times=history.length; document.write('You have been to '+times+' site(s) in this browser session.'); --> </SCRIPT>
back to top
..
..
Userlanguage
Find the language setting of the brwoser Determine the user's language setting and redirect to the appropriate language homepage <SCRIPT LANGUAGE="JavaScript1.2"> <!-- Begin if (navigator.appName == 'Netscape') var language = navigator.language; else var language = navigator.browserLanguage; if (language.indexOf('en') > -1) document.location.href = 'English.html'; else if (language.indexOf('nl') > -1) document.location.href = 'dutch.html'; else if (language.indexOf('fr') > -1) document.location.href = 'french.html'; else if (language.indexOf('de') > -1) document.location.href = 'german.html'; else if (language.indexOf('ja') > -1) document.location.href = 'japanese.html'; else if (language.indexOf('it') > -1) document.location.href = 'italian.html'; else if (language.indexOf('pt') > -1) document.location.href = 'portuguese.html'; else if (language.indexOf('es') > -1) document.location.href = 'Spanish.html'; else if (language.indexOf('sv') > -1) document.location.href = 'swedish.html'; else if (language.indexOf('zh') > -1) document.location.href = 'chinese.html'; else document.location.href = 'English.html'; // --> </script>
back to top
..
..
Useros
Find the users Operating System This just writes the users language as detected in the users window. The feature can be used to redirect the user to a different page depending on the language <script language="JavaScript"><!-- document.write("<B> Your Operating System is : </B>" + navigator.userAgent); //--></script>
back to top
..
..
Userproperties
User properties <SCRIPT LANGUAGE="JavaScript"> <!-- This script and many more are available free online at --> <!-- The JavaScript Source!! http://javascript.internet.com --> <!-- begin function display() { window.onerror=null; colors = window.screen.colorDepth; document.form.color.value = Math.pow (2, colors); if (window.screen.fontSmoothingEnabled == true) document.form.fonts.value = "Yes"; else document.form.fonts.value = "No"; document.form.navigator.value = navigator.appName; document.form.version.value = navigator.appVersion; document.form.colordepth.value = window.screen.colorDepth; document.form.width.value = window.screen.width; document.form.height.value = window.screen.height; document.form.maxwidth.value = window.screen.availWidth; document.form.maxheight.value = window.screen.availHeight; document.form.codename.value = navigator.appCodeName; document.form.platform.value = navigator.platform; if (navigator.javaEnabled() < 1) document.form.java.value="No"; if (navigator.javaEnabled() == 1) document.form.java.value="Yes"; if(navigator.javaEnabled() && (navigator.appName != "Microsoft Internet Explorer")) { vartool=java.awt.Toolkit.getDefaultToolkit(); addr=java.net.InetAddress.getLocalHost(); host=addr.getHostName(); ip=addr.getHostAddress(); alert("Your host name is '" + host + "'\nYour IP address is " + ip); } } // end --> </script>
back to top
..
..
ValidateIPaddress
//------------------------------------------------------------------------ // Check if it is validate the IP address // input: IP address text object // returns:0 if it is valid // 1 Empty // 2 Invalid Format, number of dots is not 3 // 3 non-integers present in the value // 4 start ip > 223 // 5 Should not start with 127 // 6 out of bound // 7 All zeros // 8 Should not be 0 // support functions: // IsAllSpaces // countChars // isInteger //------------------------------------------------------------------------ function isValidIP(objIP) { var strIPtext = objIP.value; if ((strIPtext.length == 0) || IsAllSpaces(strIPtext)) { // IP Empty return 1; } if ( countChars(strIPtext,".") != 3) { // Invalid Format, number of dots is not 3 return 2; } var arrIP = strIPtext.split("."); for(var i = 0; i < 4; i++) { if ( (arrIP[i].length < 1 ) || (arrIP[i].length > 3 ) ) { // Invalid Format, continuous dots or more than 3 digits given between dots return 2; } if ( !isInteger(arrIP[i]) ) { // non-integers present in the value return 3; } arrIP[i] = parseInt(arrIP[i]); if(i == 0) { // start IP value if(arrIP[i] == 0) { // start IP value must not be 0 return 8; } if(arrIP[i] > 223) { // start IP must not be > 223 return 4; } if(arrIP[i] == 127) { // start IP must not be 127 - Loopback ip return 5; } } else { // the 2nd, 3rd and 4th IP values between the dots // these must not be more than 255 if (arrIP[i] > 255) { // IP out of bound return 6; } } } objIP.value = arrIP.join("."); if(objIP.value == "0.0.0.0") { // IP all zeros return 7; } return 0; } // end of isValidIP //-------------------------------------------------------------------------- // Check to see if all characters in string are spaces // input: strText-sourceString // returns: // 0 - not all spaces // 1 - all spaces function IsAllSpaces(strText) { var bIsAllSpaces; if (countChars(strText," ") == strText.length) { bIsAllSpaces = 1; } else { bIsAllSpaces = 0; } return bIsAllSpaces ; } //-------------------------------------------------------------------------- // Count the number of occurences of given character in the text // input: strText-sourceString, charToCount-character to be checked // returns: The count of no of character function countChars(strText,charToCount) { var intStartingPosition = 0; var intFoundPosition =0; var intCount = 0; // checking for the null character if (charToCount=="") { return intCount; } while((intFoundPosition=strText.indexOf(charToCount,intStartingPosition)) >= 0) { intCount++; intStartingPosition = intFoundPosition + 1; } return intCount ; } //-------------------------------------------------------------------------- // Check if given input is INTEGER or not // input: Text value, text length // returns: True if the field is integer else false function isInteger(strText) { var blnResult = true; var strChar; // checking for null string if (strText.length==0) { blnResult=false; } for(var i=0;i < strText.length;i++) { strChar=strText.substring(i,i+1); if(strChar < "0" || strChar > "9") { blnResult = false; } } return blnResult; }
back to top
..
..
Validatelength
Validate length of an Input String <HTML> <HEAD> <SCRIPT LANGUAGE="JavaScript"> <!-- function checkForm(myParam) { var myStr = new String; myStr = myParam.value; if (myStr.length < 4) { alert("UserName must be more than 4 Chars"); myParam.focus(); } return 0; } //--> </SCRIPT> </HEAD> HTML Code to generate form elements and call the validation function <FORM ACTION="validate_length.htm" NAME="myform" > Username: <INPUT TYPE="TEXT" NAME="user" VALUE="" OnChange="checkForm(this)" > <BR> Password: <INPUT TYPE="PASSWORD" NAME="password" VALUE="" ><BR> <INPUT TYPE="Submit" NAME="submit" VALUE="Submit"> </FORM>
back to top
..
..
Validateonlynumbers
// Allow only numbers input from the keyborad // input :Object -TextBox Object // returns :none function checkKeyforCharacters(obj) { // Clear any previous error messages ClearErr(); if (!((window.event.keyCode >=65 && window.event.keyCode <=92)|| (window.event.keyCode >=97 && window.event.keyCode <=123)|| (window.event.keyCode >=48 && window.event.keyCode <=57)|| (window.event.keyCode == 45)|| (window.event.keyCode == 95))) { window.event.keyCode = 0; obj.focus(); } } <input type=text name="input" SIZE="30" value="" OnKeypress="checkKeyforCharacters(this)">
back to top
..
..
Validateremoveleftspaces
// Remove all left trailing spaces from the input // input :String // returns :String function LTrimtext(str) { var res="", i, ch, index; x = str.length; index = "false"; for (i=0; i < str.length; i++) { ch = str.charAt(i); if (index == "false") { if (ch != ' ') { index = "true"; res = ch; } } else { res = res + ch; } } return res; }
back to top
..
..
Validateremoverightspaces
// Remove all right trailing spaces from the string input // input :String // returns :String function RTrimtext(str) { var res="", i, ch, index, j, k; x = str.length; index = "false"; if(x==0 || x==1) return str; for(i=x; i >= 0; i--) { ch = str.charAt(i); if (index == "false") { if( (ch == ' ') || (ch == '') ) { continue; } else { index = "true"; j = i; } } if (index == "true") { for(k=0; k<=j; k++) { res = res + str.charAt(k); } return res; } } }
back to top
..
..
Weekdayimage
Show the weekday image Place this script where every you wish to show the image on the web page <SCRIPT LANGUAGE="JavaScript"> <!-- Begin today = new Date(); day = today.getDay(); arday = new Array("sunday.gif", "monday.gif", "tuesday.gif","wednesday.gif", "thursday.gif", "friday.gif", "saturday.gif"); document.write("<img src='" + arday[day] + "'>"); // End --> </script>
back to top
..
..
Weekdayredirect
Redirect the user to a page depending on the day of the week Place the following script in your html page Lest assume that we have an /html file for each day of the week. e.g., Sunday.html, Mondoy.html, Tuesday.html....and so on. And that we need to redirect the user to the page depending on the day of the week Copy the following code in the header portion of the HTML page <SCRIPT LANGUAGE="JavaScript"> <!-- Begin function initArray() { this.length = initArray.arguments.length; for (var i = 0; i < this.length; i++) this[i+1] = initArray.arguments[i]; } var WeekDayArray = new initArray("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"); var today = new Date(); var day = WeekDayArray[today.getDay()+1]; window.location = day + ".html"; // End --> </SCRIPT>
back to top
..
..
WindowsAlertConfirmPrompt
All types of Alert <FORM NAME = "Alerts"> <INPUT TYPE = "button" VALUE="Alert Box" onClick = "window.alert('Hi, I am a Alert Box');"> <INPUT TYPE = "button" VALUE="Confirm Box" onClick = "window.confirm('Hi, I am a confirm Box');"> <INPUT TYPE = "button" VALUE="Prompt Box" onClick="var temp = window.prompt('Hi, I am Prompt Box','Default');"> </FORM>
back to top
..
..
WindowsBanner
How to open a banner window <html> <head> <SCRIPT LANGUAGE="JavaScript"> function opWin(w,h,url) { specs = "toolbar=yes,location=no,directories=no,status=no,menubar=no,resizable=no, copyhistory=no,scrollbars=yes" + ",width=" + w + ",height=" + h; window.open(url,'',specs) } </SCRIPT> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <meta name="GENERATOR" content="Microsoft FrontPage 4.0"> <meta name="ProgId" content="FrontPage.Editor.Document"> <title>Banner Window</title> </head> <body onload = javascript:opWin(550,350,'http://generalhosting.com') > Just a test page for open banner window. </body> </html>
back to top
..
..
Windowpop
Popping up a Customized New window First write a small JavaScript function to open a customized window. <script language="JavaScript"> <!-- function newAlert(msgName,msgvar) { alrtWndo = window.open("","Alert","height=140,width=280,toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizeable=no"); alrtWndo.document.write("<body ><center><font color='blue'>"); alrtWndo.document.write(msgvar); alrtWndo.document.write("<BR><FORM>"); alrtWndo.document.write("<INPUT TYPE=BUTTON VALUE='OK' onClick='window.close()'>"); alrtWndo.document.write("</form></center></body>"); alrtWndo.document.close(); } //--> </script> The HTML code that would pop a new window on mouse click <a href="javascript:newAlert('Click','This was from a click')">Click Here! The HTML code that would pop a new window on mouse over <a href="javascript:newAlert('Click','This was from a mouse over action')" onmouseover="newAlert('Mouse Over','This is from the second Image')">Pass Mouse over Here!
back to top
..
30-Day Money Back Guarantee
|
Terms & Conditions
| © GeneralHosting.com, Official Microsoft Windows 2003 Hosting
