Advanced
JavaScript Code for You


Drop Down Menu for Use on Multiple Pages
Menus on This Page (How To)
Tigra Menu
TimeStamp Picker (American Format)
 TimeStamp Picker (European Format)
Banner Rotator
Additional Information
Click on any green divider line to return here.

 

Drop Down Menu for Use on Multiple Pages

Click here to see a demo of this menu

 
Place at top of HEAD section on every page that uses the menu. 

<SCRIPT Language="JavaScript" src="myMenu.js">
</SCRIPT>

Place this code on every page at the location you want the menu to appear.
Change the value of the thisSubject variable as described in Notes. 

<!-- Begin Drop Down Menu for Use on Multiple Pages -------------------->
<!-- Script available at http://www.crays.com/jsc ---------------------->
<FORM NAME="menu">

<SCRIPT language="JavaScript">
<!--
var thisSubject = "Introduction" // unique on each page

var myString = '<SELECT NAME=\"dropDown\" onChange=\"loadPage(this)\">\n'
for(var i = 0; i<pageURL.length; i++){
  if(pageSubject[i] != thisSubject)
    myString += '<OPTION VALUE=\"' 
  else
    myString += '<OPTION SELECTED VALUE=\"'
  myString +=  pageURL[i] + '\">'+ pageSubject[i] + '\n'
  }
myString += '</SELECT>\n'
document.write(myString)
//-->
</SCRIPT>

</FORM>
<!-- End Drop Down Menu for Use on Multiple Pages ---------------------->

Copy this code to a text editor and save it as myMenu.js
Edit code as described in the Notes below.


Notes:

This script can be installed on multiple pages of your site and easily maintained from the myMenu.js file.

If you add or delete pages that use the menu, you will not have to go to every page to change the script. Just make the necessary changes in the myMenu.js file and any page you add.

The myMenu.js file is setup to produce the menu shown in our demo. You will want to change it to make a menu of your choice.

myMenu.js contains two arrays. Edit these arrays for the menu you want to display. pageSubject contains the information that will be displayed in the drop down menu and pageURL is the url that your visitor will be taken to from his selection. You can add or remove elements to the arrays and you will not have to make changes to the existing pages.

You will need to change the value of the thisSubject variable in the code that you place on a new page. The purpose of this is to make the default selection in the drop down box be the page that you browser is currently displaying.

You can find more detailed information on the implementation of this script in the demo pages of the menu.

 

Menus on This Page (How To)

You will see a menu like this

at the top and bottom of every page in this Code4U Section of JavaScript Corral. I will now describe how this was done so that you can implement something similar on your pages.

The instructions here are written as if you will be implementing this script on your Site. I recommend that you follow the instructions and set up the script on a test page so you can understand how it was done. Then you can edit it to make it to work the way you want.

Place at top of HEAD section on every page that uses menu. 

<SCRIPT Language="JavaScript" src="jsC4Unav.js">
</SCRIPT>

Place this code on every page at the location you want the Menu to appear. 

<SCRIPT Language="JavaScript">
<!--
document.write(c4uNav)
//-->
</SCRIPT>

Copy this code to a text editor and save it as jsC4Unav.js
Edit code as described in the Notes below.


Notes:

This script is installed on multiple pages of this JavaScript Corral site and is easily maintained from the jsC4Unav.js file.

It is important to understand that you will not be copying this exact script to your Site but will be using it as an example of how you can do something similar.

The "js" file used here was named jsC4Unav.js. You will probably want to rename it to something of your choice. You likewise will probably change the name of the variable c4uNav.

Examine the c4uNav variable in the jsC4Unav.js file and you will see that it is a string that is printed to the page using the document.write() method.

That is all there is to doing this. The technique demonstrated here really makes it easier to maintain a menu on multiple pages.

 

Tigra Menu

by Denis Gritcyuk

This is the latest script by Dennis. It is a really cool menu.

Click here to visit his site for a demo and learn more.

 

Timestamp Picker (American Date Format)

by Denis Gritcyuk

 MM/DD/YYYY
Click here to Date Stamp
Click on Calendar image to demo

 

Place this script in the HEAD section of your page

Code used in BODY section for above demo 

<FORM name="tstest4">
<TABLE cellpadding=10 cellspacing=0 border=1><TR><TD bgcolor="#DBEAF5">
<FONT face="tahoma, verdana" size=1 color="black"> MM/DD/YYYY</FONT><BR>
<INPUT type="Text" size=11 name="timestamp4" value="">
<a 
href="javascript:show_calendar4('document.tstest4.timestamp4', 
      document.tstest4.timestamp4.value)">
<img src="img/cal.gif" width="16" height="16" border="0" 
   alt="Click here to Date Stamp"></A>
</TD></TR></TABLE>
<FONT face="tahoma, verdana" size=1>Click on Calendar image to demo</FONT>
</FORM>

Images used:
   


Notes:

The author of this script is Denis Gritcyuk. Visit his page for more information and to contact him.

This script is intended for someone with JavaScript programing knowledge.

Script can be modified to work for your particular situation. See author's notes in the script.

 

Timestamp Picker (European Date Format)

by Denis Gritcyuk

 DD-MM-YYYY
Click here to Date Stamp
Click on Calendar image to demo

 

Place this script in the HEAD section of your page

Code used in BODY section for above demo 

<FORM name="tstest2">
<TABLE cellpadding=10 cellspacing=0 border=1><TR><TD bgcolor="#DBEAF5">
<FONT face="tahoma, verdana" size=1 color="black"> DD-MM-YYYY</FONT><BR>
<INPUT type="Text" size=11 name="timestamp2" value="">
<a 
href="javascript:show_calendar2('document.tstest2.timestamp2', 
      document.tstest2.timestamp2.value)">
<img src="img/cal.gif" width="16" height="16" border="0" 
   alt="Click here to Date Stamp">
</TD></TR></TABLE>
<FONT face="tahoma, verdana" size=1>Click on Calendar image to demo</FONT>
</FORM>

Images used:
   


Notes:

The author of this script is Denis Gritcyuk. Visit his page for more information and to contact him.

This script is intended for someone with JavaScript programing knowledge.

Script can be modified to work for your particular situation. See author's notes in the script.

 

Banner Rotator

Basic code to store Ads 

<SCRIPT Language="JavaScript">
<!-- 
var maxAdNo = 2
var adNo
var myAd = new Array()

myAd[0] = 'HTML code for Ad'
myAd[1] = 'HTML code for Ad'
myAd[2] = 'HTML code for Ad'

//-->
</SCRIPT>

Place this code where you want Banner to appear 

<SCRIPT Language="JavaScript">
<!--
  adNo = Math.round(Math.random() * maxAdNo)
  document.write(myAd[adNo])
//-->
<//SCRIPT>


Notes:

Click here to reload this page and you will see that the banner above changes. It currently rotates between 3 different banners in a random process. Clicking on any of the banners will take you to the appropriate page.

This script is intended for someone with JavaScript programing knowledge.

This script can be used for both text ads and banners.

Just replace the HTML code for Ad with the HTML code for each of your ads. For example, a text ad could look like this: 

  myAd[0] =  '<A href="http://www.javascriptmall.com">JavaScript Mall</A>'
           + ' - Great JavaScript Site!'

Adjust the variable maxAdNo and the number of elements in the Array to match the number of Ads you want to display.

 


Additional Information on These Scripts


Some of the Scripts on this page has been contributed by other authors. The information on the script clearly identifies the author if this is the case.

The Scripts on this page require that you know and understand how to use JavaScript. These Scripts are not cut-n-paste but do give the basics that a person experienced with JavaScript can understand and use.





Miscellaneous     Code 4 U