# On_Load Override How-To

Another example of Zen Magic.
Zen Cart's modular system can be used to insert <BODY> tag "onload" event handling on a site-wide or per-page basis very easily. Within your /includes/templates/YOURTEMPLATE folder, you can create a /jscript/on_load folder for this purpose.
Any on_load_*.js file in this directory can be used to modify the body tag with a javascript `on_load()` function.

## Site-Wide Use

For site-wide operation, just name the file `on_load.js` and store it in the /includes/templates/YOURTEMPLATE/jscript/on_load folder. Multiple files may be present, and can be added by adding an underscore and more letters to the filename.

## Page-Specific Use

For page-specific operation, put the file under the `/includes/modules/pages/{pagename}/` folder.

# File Contents

NOTE: on_load_*.js files must contain ONLY the raw code to be inserted in the `<body>` tag in the `on_load=""` parameter.
The effect is like this:
`<body onload="WHATEVER_YOUR_FILE_CONTAINS_GOES_HERE">`
Essentially, the contents of the file will be a function call to the DOM or to functions loaded in a jscript file.

## OVERRIDE Operation:

1. Checks the existence of "on_load" scripts for the individual page first
Looks in "`/includes/modules/pages/{PAGENAME}/`" for files named "on_load_*.js"
2. Then checks for site-wide overrides in "`includes/templates/TEMPLATE/jscript/on_load/on_load_*.js`"

# EXAMPLES

### EXAMPLE #1 (per-page on_load coding)

Two live examples of this exist for the default "login" and "contact us" pages in Zen Cart.
Let's look at the login page:

You'll see that in /includes/modules/pages/login/on_load_main.js the code that is inserted into the <body> tag for that page is this:
`document.getElementById('email_address').focus();`

This is a DOM call to set focus on the "email_address" field on the page as the first spot where the cursor will be flashing when the page is opened.

When the login page is loaded, the <body> tag will read like this:
`<body id="login" onload="document.getElementById('email_address').focus();">`

### EXAMPLE #2 (on_load calls on all pages in your shop)

Sometimes a designer wishes to preload rollover images on the page for menu purposes. In this case, the implementation is two-fold:

1. Create a file with javascript function definitions for the preload activities, and place it in:
`includes/templates/{template_directory}/jscript/jscript_preloadimages.js`

2. Create a file for the onload code as:
`includes/templates/{template_directory}/jscript/on_load/on_load_image_preload.js`
and in the file put just one function call to match the preload function definition in your js file, such as:
`preloadImages();`

3. Of course, be sure to upload the real image files, etc to support the preload activities.