|
Table of Contents
Links and window scripts
onClick Alert Message
Navigation Buttons
Dialog Box with Confirm
Email Button
New Window
New Window with controllable options
New Window with controllable options Close Box
Status Bar Message
onMouseOver alert Message
onMouseOut alert Message
onMouseOver and onMouseOut Commands
Browser Test
Date and Time display
Page load with alert message
Confirm message before loading a Page
Scrolling status bar message
Scrolling banner
Form Scripts
onFocus Alert
onBlur form background color changer
Test if form is filled out before submission
Make your own pulldown navigation menu (like this TOC)
Temperature conversion calculator
Metric Length conversion calculator
Image Scripts
Click a button to change an image (without reloading page)
Alert Message when user aborts an image load
Load different image when first doesn't (automatically)
Confirm Message when user aborts an image load
Advanced Scripts
Counter that counts only YOUR visits to YOUR site
--------------------------------------------------------------------------------
Return to Main Page
--------------------------------------------------------------------------------
onClick Alert Message Link
This script generates an alert message in response to a mouse click. This is an example script so, you don't have to keep it exactly as it is. You can modify it to say whatever you want, or make it generate an alert, by clicking on any link you want.
Here is the script:
<HTML>
<HEAD>
<TITLE>OnClick alert message</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function pushbutton() {
alert("Here is where you write what you want it to say");
}
</SCRIPT>
</HEAD>
<BODY>
<CENTER>
<A HREF="" onclick="pushbutton();">Click Here!</A>
</CENTER>
</BODY>
</HTML>
--------------------------------------------------------------------------------
Table Of Contents
--------------------------------------------------------------------------------
Navigation Buttons
This script creates forward and backward navigation buttons to move between the URLs in the browser's history list. It's basically the same thing as your foward and back button on your browser, except they are on your page. you can modify this example to suit whatever you want.
here is the script:
<HTML>
<HEAD>
<TITLE>History Buttons</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function nav(x) {
history.go(x);
}
</script>
</HEAD>
<BODY>
<CENTER>
<h1>History Buttons</h1>
<h2>Here are the two buttons made with navigator form buttons: </h2><P>
<FORM>
<INPUT TYPE="button" VALUE="GO BACK" onClick="nav(-1)">
<INPUT TYPE="button" VALUE="GO FORWARD" onClick="nav(1)">
</FORM>
<P>
<h2>And here is a custom button with a javascript link.</h2><P>
<A HREF=javascript:history.go(-2)><IMG SRC="images/back2.gif" BORDER=0></A>
</CENTER>
</BODY>
</HTML>
--------------------------------------------------------------------------------
Table Of Contents
--------------------------------------------------------------------------------
Dialog Box with Confirm
The Dialog Box with Confirm asks the viewer for confirmation before opening a link and leaving the current page. You can set it up on whatever link you want to, and you can also change what the message says to whatever you want
WARNING this script works only in Netscape 3.0 or higher
here is the script:
<HTML>
<HEAD>
<TITLE>Confirm Dialog Box
</HEAD>
<BODY BGCOLOR=FFFFFF>
<CENTER>
<H1>Confirm Dialog Box</H1><P>
<A HREF = "http://www.browserbydesign.com/" onClick="return confirm('Are you sure you are ready to leave the safe confines of our website');">When you click, a confirm dialog box displays. </a>
</CENTER>
</BODY>
</HTML>
--------------------------------------------------------------------------------
Table Of Contents
--------------------------------------------------------------------------------
Email Button
This script creates a button that allows to you send E-mail to a specified address by clicking on it. It looks better than a link, and is just a cool feature you can do with Javascript. To specify which E-mail address the button sends to, replace "whatever@whatever.com", with your E-mail address.
Here is the script:
<HTML>
<HEAD>
<title>Email button
<HEAD>
<FORM>
<INPUT TYPE="button" VALUE="send e-mail" onClick="self.location='mailto:Whatever@whatever.com';">
</FORM>
</BODY>
</HTML>
--------------------------------------------------------------------------------
Table Of Contents
--------------------------------------------------------------------------------
New Window
This script creates a button, that creates a new window, when it is clicked. You can specify what address the new window goes to, by changing the URL that is in bracketes in the script.
Here is the script:
<HTML>
<body bgcolor=FFFFFF>
<CENTER>
<P>
<FORM>
<INPUT TYPE="button" VALUE="Click Here to open new Window" onClick='window.open("http://www.geocities.com");'>
</FORM>
</CENTER>
</BODY>
</HTML>
--------------------------------------------------------------------------------
Table Of Contents
--------------------------------------------------------------------------------
New Window with controllable options
This Script does precisley what it says, it opens a new window with options that you specify. If you look at the script you see that there are things such as: menubar=no,scrollbars=no,width=200,height=225... you can customize these so when the new window pops up, for whatever reason you want, it will fit your page properly and such.
<HTML>
<HEAD>
<TITLE>Open new custom window</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function NewWindow() {
win2=window.open("http://www.somewhere.com","NewWindow","toolbar=no,directories=no,menubar=no,scrollbars=no,width=200,height=225");
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<input type="button" value="New Window" onclick='NewWindow();'>
</FORM>
</BODY>
</HTML>
--------------------------------------------------------------------------------
Table Of Contents
--------------------------------------------------------------------------------
New Window with controllable options & a Close Box
As you can see, this is a very complicated set of script. I suggest just copying and pasting it to a page and seeing what it does, then editing it slightly so it suits your needs. What it does is it shows two buttons on the screen and if you click on one of them it will open up a new window that has a button on it so you can close it right from there. Pretty convenient eh? Also, the good thing about this is the fact that it actually "creates" a web page... that means there is no loading time so its practically insant. To customize the page that pops up all you have to do is enter HTML code in between where it says window1.document.writeln(" ");. You write the HTML code between the ""s. As I said before... just copy and paste the script and customize it when it actually works on your page.
<HTML>
<HEAD>
<TITLE>Open/close new custom window</TITLE>
<SCRIPT LANGUAGE="JavaScript">
hrefloc=this.location
// this assigns the current URL to the global variable hrefloc, called later
// in the script as a workaround for a problem involving accessing files from
// a local disk.
function NewWindow1() { //this defines the first window, accessed by button#1
window1=window.open("", "NewWindow1", "toolbar=no,directories=no,menubar=no,scrollbars=no,width=200,height=225");
window1.document.writeln("<Body bgcolor=ffffff>");
window1.document.writeln("<title>Whatever</title>");
window1.document.writeln("<center>");
window1.document.writeln("<FORM><INPUT TYPE='button' VALUE=Close onClick='window.close()'></FORM></CENTER>");
window1.document.writeln("</BODY></HTML>");
window1.document.close();
}
function NewWindow2() { //this defines the second window, accessed by button#2
window2=window.open("", "NewWindow2","toolbar=no,directories=no,menubar=no,scrollbars=no,width=200,height=225");
window2.document.writeln("<TITLE>Whatever2</TITLE>");
window2.document.writeln("<body bgcolor=ffffff>");
window2.document.writeln("<center>");
window2.document.writeln("<FORM><INPUT TYPE='button' VALUE='Close' " + "onClick='window.close()'>");
window2.document.writeln("");
window2.document.close();
}
</script>
</HEAD>
<BODY BGCOLOR=FFFFFF>
<FORM>
<input type="button" value="SELECTION 1" onclick=NewWindow1()>
<P>
<input type="button" value="SELECTION 2" onclick=NewWindow2()>
</FORM>
</BODY>
</HTML>
--------------------------------------------------------------------------------
Table Of Contents
--------------------------------------------------------------------------------
Status Bar Message
This script displays a message in the status bar window when the mouse is over one of the links. It's a fairly simple script, and can easily be modified to suit whatever your mind desires.
Here is the script:
<CENTER>
<A HREF="link1.html" onMouseOver="window.status='This is a clock';return true"><img src="file:///C|/pictures/images/clock.jpg"></A>
<A HREF="link2.html" onMouseOver="window.status='This is a cup of java';return true"><img src="file:///C|/pictures/images/cup.jpg"></A>
</CENTER>
</BODY>
</HTML>
--------------------------------------------------------------------------------
Table Of Contents
--------------------------------------------------------------------------------
onMouseOver alert Message
This script brings up an alert message, when a viewer drags the mouse over an anchored area. It is a short script, and easy to customize.
Here is the script:
<HTML>
<SCRIPT LANGUAGE="JavaScript">
function AlertText() {
alert("This site is still in progress, try again in a few days");
}
</SCRIPT>
</HEAD>
<BODY>
<CENTER>
<a href="link.html" onMouseOver="AlertText();"><H1>Our new improved web site!</H1></a>
</CENTER>
</BODY>
</HTML>
--------------------------------------------------------------------------------
Table Of Contents
--------------------------------------------------------------------------------
onMouseOut alert Message
This script brings up an alert message when the mouse leaves an anchored area. This is very simple script, that can easily be changed, for you own purposes.
Here is the script:
<<BODY>
<CENTER>
<A HREF="http://www.transmitmedia.com" onMouseOut='alert("You must click on an image in order to proceed!")'><IMG SRC="file:///c|/pictures/images/cup.jpg"></A>
</CENTER>
</BODY>
--------------------------------------------------------------------------------
Table Of Contents
--------------------------------------------------------------------------------
onMouseOver and onMouseOut Commands
This script is an example that presents a link object that uses 2 different mouse event handlers. When the mouse is dragged over the picture a message appears in the status bar. When the mouse is dragged off the picture, an alert message pops up on your screen. You modify this example to do whatever you want. I think it's cool to be able to activate two different actions, by changing the mouse location over an object.
Here is the Example. The script for it is below the Example.
Here is the script for the example:
<HTML>
<CENTER>
</HEAD>
<A HREF="#" onMouseOver="window.status='Entering down town.....'; return true;"
onMouseOut='alert("Leaving the big city so soon?")'>
<IMG SRC="city.jpg"></A>
</CENTER>
</BODY>
</HTML>
--------------------------------------------------------------------------------
Table Of Contents
--------------------------------------------------------------------------------
Browser Test
This script indicates to the visitor which browser they are using when the page loads. This is good if you have a page with serveral versions, and have an entry page like the one this page has. That way people can tell exactly which browser they are using, if they are not sure.
Here is the script:
<HTML>
<HEAD>
<TITLE>Testing All Browsers</TITLE>
<! This actually only tests browsers that understand JavaScript. You would probably use this to direct non-enabled browsers somewhere else.>
<SCRIPT>
function browsertest() {
thisapp=navigator.appName;
thisversion=navigator.appVersion;
thisappcodename=navigator.appCodeName;
alert("You are using " + thisapp + " version " + thisversion + ", which is code named " + thisappcodename + ".");
}
</SCRIPT>
</HEAD>
<BODY onLoad="browsertest()">
</BODY>
</HTML>
--------------------------------------------------------------------------------
Table Of Contents
--------------------------------------------------------------------------------
Date and Time display
This script displays a textbox with the current time and date. The local time and date refers to the viewers machine, not the server. You can put it were ever you want in your web page.
Here is the script:
<SCRIPT LANGUAGE="JavaScript">
function TimeOutfunc() {
timeout = window.setTimeout("TimeOutfunc()", 1000);
var today = new Date();
document.forms[0].elements[0].value = today.toString();
}
</SCRIPT>
<BODY ONLOAD="timeout = setTimeout('TimeOutfunc();',1000);">
<CENTER>
<FORM>
<INPUT TYPE="text" NAME="disp" VALUE="" SIZE="25">
</FORM>
<P>
</CENTER>
</BODY>
<p>
--------------------------------------------------------------------------------
Table Of Contents
--------------------------------------------------------------------------------
Page load with alert message
This script generates an alert message before a page loads. This is useful if your site requires something specifically, such as a certain plug-in, because you can let the viewer know what ever it is he needs to know about your page. you can make the message say whatever you want.
Here is the script:
<SCRIPT LANGUAGE="JavaScript">
function entryAlert() {
alert("Welcome to my website!!!");
return " ";
}
</SCRIPT>
<BODY onLoad = 'entryAlert();'>
body text here
</BODY>
</HTML>
--------------------------------------------------------------------------------
Table Of Contents
--------------------------------------------------------------------------------
Confirm message before loading a Page
This script allows a visitor to confirm if they want to enter the page or not. A perfect implementation of this feature would be to display some sort of warning or disclaimer, that would affect weather or not the viwer wants to continue viewing the site. You can modify what the script say very easily.
Here is the script:
<SCRIPT LANGUAGE="JavaScript">
function entryConfirm() {
if (!confirm
("This site takes about 3 minutes to load. Do you want to continue loading it?"))
history.go(-1);
}
</script>
</HEAD>
<BODY onload = 'entryConfirm();'>
</BODY>
--------------------------------------------------------------------------------
Table Of Contents
--------------------------------------------------------------------------------
Scrolling status bar message
This script displays a scrolling message along the bottom of the browser window. It can be a description of your page or what ever.
Here is the script
<SCRIPT LANGUAGE="JavaScript">
var timed = 0;
var scrollGo = false;
var delay=100; //make this variable lower to speed scrolling, higher to slow it down
var space=100;
function scroll_start() {
var i=0;
msg="Write in a message here to scroll across the screen";
for (i=0;i<space;i++)
msg=" "+msg;
scrollGo=true;
timerid=window.setTimeout("scrollmsg(0)",delay);
}
function scrollmsg(pos) {
var out = "";
scrollGo=false;
if (pos < msg.length)
self.status = msg.substring(pos, msg.length);
else
pos=-1;
++pos;
scrollGo=true;
timerid=window.setTimeout("scrollmsg("+pos+")",delay);
}
</SCRIPT>
<BODY onLoad="scroll_start();">
</BODY>
--------------------------------------------------------------------------------
Table Of Contents
--------------------------------------------------------------------------------
Scrolling banner
This script places a scrolling marquee style banner in you page. A good thing to use this for, is advertising, because people with usually read a message that is scrolling across the page.
Here is the script:
<SCRIPT LANGUAGE="JavaScript">
var ScrollString="Hi. This text can be changed to whatever you want. it will scroll from right to left. ";
var timer = 0;
function Scrollon() {
document.box.boxtext.value = ScrollString;
ScrollString=ScrollString.substring(1,ScrollString.length)
+ ScrollString.charAt(0);
// decrease timeout value (50) to speed up, increase to slow down
timer = setTimeout("Scrollon()",50) ;
}
</SCRIPT>
<BODY onLoad = Scrollon()>
<FORM NAME = "box" onSubmit = "0">
<CENTER>
<INPUT TYPE="text" NAME="boxtext" SIZE="45" VALUE="">
</CENTER>
</BODY>
|
