.
WinWeb
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 = fr
