 |
|
 |
| Simple JavaScript Goodies for Your Web Pages - Part II |  |
|
|
Simple JavaScript Goodies for Your Web Pages - Part II
Pull Down Navigation Menu:
If you'd like to provide your visitors with a means of navigating around your site, or provide them with a list of other sites to visit, one way of doing this is with a pull down navigation menu. The code provided below will create a drop down list and a "GO!" button on your web page. When the user selects a page to go to and clicks the button, they'll be taken to the web page they've selected. To adapt this code for your own use, simply change the URL in the VALUE of each OPTION to a URL of your own choosing, and change the "title" text to the right of each OPTION line to the name of the page the visitor will be taken to. For best results, copy and paste the SCRIPT code into the HEAD section of your page and copy and paste the FORM code in the body of your page where you'd like the drop down list to appear.
Copy and paste this SCRIPT code into the HEAD section of your page:
<script language="JavaScript">
<!-- Hide the script from old browsers --
function goThere(form) {
var navIndex=form.myPages.selectedIndex;
location=form.myPages.options[navIndex].value
}
//-->
</SCRIPT>
|
Copy and paste this FORM code into the body of your page where you'd like the drop down box to appear:
<CENTER>
<FORM NAME="navigateForm">
<SELECT NAME="myPages" SIZE=1>
<OPTION SELECTED VALUE="">---------- A Simple Menu -----------
<OPTION VALUE="http://www.wherever.com">Title of Page 1
<OPTION VALUE="http://www.wherever.com">Title of Page 2
<OPTION VALUE="http://www.wherever.com">Title of Page 3
<OPTION VALUE="http://www.wherever.com">Title of Page 4
</SELECT>
<INPUT TYPE="BUTTON" VALUE="GO!" onClick="goThere(this.form)">
</FORM>
</CENTER>
|
The drop down navigation menu and button should appear like this on your page:
Time-sensitive JavaScript:
With JavaScript's built in Date Object and it's getHours method, you can give your pages a fresh appeal by making them time-sensitive. The following code uses JavaScript to generate a custom greeting based on the user's local time. The first SCRIPT that has the "greeting" function should be placed in the HEAD section of your page, while the second SCRIPT should be placed in the body of your page where you'd like the greeting to appear.
Copy and paste this SCRIPT into the HEAD section of your page:
<SCRIPT LANGUAGE="JavaScript">
<!-- Hide the script from old browsers --
function greeting() {
Now = new Date()
Hour = Now.getHours()
if(Hour < 12)
msg = "Good Morning!"
else
if(Hour < 18)
msg = "Good Afternoon!"
else
msg = "Good Evening!"
return( msg )
}
// --End Hiding Here -->
</SCRIPT>
|
Copy and paste this SCRIPT code into the body of your page where you'd like the greeting to appear:
<SCRIPT LANGUAGE="JavaScript">
<!-- Hide the script from old browsers --
document.write(greeting())
// --End Hiding Here -->
</SCRIPT><BR>
|
When included on your page, this script will display something like the following:
Add a Digital Clock:
It's also fun to use JavaScript's date object to include a digital clock on your web page. The code below will allow you to do just that by displaying a small box on your page with the current time displayed within that box. Again, for best results, copy and paste the SCRIPT code into the HEAD section of your page and copy and paste the FORM code in the body of your page where you'd like the clock to appear. To make the clock start when your page is loaded, you must also add the onLoad event handler to your BODY tag. Your BODY tag should look something like this:
|
<body onLoad="showtime()"> |
<script language="JavaScript">
<!-- Hide the script from old browsers --
function showtime () {
var now = new Date();
var hours = now.getHours();
var minutes = now.getMinutes();
var seconds = now.getSeconds()
var timeValue = "" + ((hours >12) ? hours -12 :hours)
timeValue += ((minutes < 10) ? ":0" : ":") + minutes
timeValue += ((seconds < 10) ? ":0" : ":") + seconds
timeValue += (hours >= 12) ? " P.M." : " A.M."
document.clock.face.value = timeValue;
timerID = setTimeout("showtime()",1000);
}
// --End Hiding Here -->
</script>
|
Copy and paste this FORM code into the body of your page where you'd like the clock to appear:
<form name="clock" onSubmit="0">
<input type="text" name="face" size=13 value="">
</form>
|
When this JavaScript is included on your page, you should see something like this:
|
|
