||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
EVENT TRIGGERED JAVA SCRIPT
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
This script allows you to trigger a change in an HTML element hooked to a css id, you must use an id and not a class for this script to work properly.
There are many uses for this script, which you must modify to suit your specific need.
You can use events like:
• onLoad
• onClick
• onMouseOver
• onMouseOut
• there are other events you may want to explore
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
First, paste this script link right after the title of your page.
This links assumes you will place the js file you create in a folder named "css-js", which should be placed in your projects root-level folder.
Second, create a plain text ".txt" document and paste the following code inside. Then save your document with a name, which makes sense for your use.
// DO NOT TRUST DREAMWEAVER PREVIEW, VIEW PAGE IN A LIVE WEB BROWSER
// JavaScript Document
// The function name is the link between the event in the web page and the function parameters
function runAnimation() {
"use strict";
/* Strict Mode is a new feature in ECMAScript 5 that allows you to place a program, or a function, in a "strict" operating context. This strict context prevents certain actions from being taken and throws more exceptions. */
var count=1;
// We do not need a counter, I include as a means for a delay before animation executes, if needed
var counter=setInterval(timer, 1000); //1000 will run it every 1 second, so 100 is 1/10
function timer()
{
count=count-1;
if (count <= 0)
{
clearInterval(counter);
// you can change multiple properties and or multiple ids - you will need to copy and past the the line below as many times as needed.
document.getElementById("your-ids-name").style.the-property-to-target = "the-value-for-the-property";
return;
}
}
}// function ends
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Third, create the hook or trigger event within your HTML page
In my examples I trigger the "onLoad" event from the body element of the page and the "onClick" event on a div element.
or
DONE