Adding Javascripts to Fusion pages
First we will look at an example of a Javascript. You must follow the instruction on where to place each portion of the code when you paste it into your html code.
<!-- THREE STEPS TO INSTALL MOUSE BANNER:
1. Copy the coding into the HEAD of your HTML document
2. Add the last code into the BODY tag your HTML document
3. Put the final code inside the BODY of your HTML page -->
<!-- STEP ONE: Paste this code into the HEAD of your HTML document -->
<HEAD>
<style>.spanstyle {
COLOR: white; FONT-FAMILY: Verdana; FONT-SIZE: 8pt; FONT-WEIGHT: bold; POSITION: absolute; TOP: -50px; VISIBILITY: visible
}
</style>
<SCRIPT LANGUAGE="JavaScript">
<!-- Original: Peter Gehrig -->
<!-- Web Site: http://www.24fun.ch -->
<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->
<!-- Begin
var x, y;
var step = 10;
var flag = 0;
var message = "JavaScript is so cool !! ";
message = message.split("");
var xpos = new Array();
for (i = 0; i <= message.length - 1; i++) {
xpos[i] = -50;
}
var ypos = new Array();
for (i = 0; i <= message.length - 1; i++) {
ypos[i]= -50;
}
function handlerMM(e) {
x = (document.layers) ? e.pageX : document.body.scrollLeft + event.clientX;
y = (document.layers) ? e.pageY : document.body.scrollTop + event.clientY;
flag = 1;
}
function makesnake() {
if (flag == 1 && document.all) {
for (i = message.length - 1; i >= 1; i--) {
xpos[i] = xpos[i - 1] + step;
ypos[i] = ypos[i - 1];
}
xpos[0] = x + step;
ypos[0] = y;
for (i = 0; i < message.length - 1; i++) {
var thisspan = eval("span" + (i) + ".style");
thisspan.posLeft = xpos[i];
thisspan.posTop = ypos[i];
}
}
else if (flag==1 && document.layers) {
for (i = message.length - 1; i >= 1; i--) {
xpos[i] = xpos[i - 1] + step;
ypos[i] = ypos[i - 1];
}
xpos[0] = x + step;
ypos[0] = y;
for (i = 0; i < message.length - 1; i++) {
var thisspan = eval("document.span" + i);
thisspan.left = xpos[i];
thisspan.top = ypos[i];
}
}
var timer = setTimeout("makesnake()", 10);
}
// End -->
</script>
</HEAD>
<!-- STEP TWO: Copy this code into the BODY tag od your HTML document -->
<body bgcolor="#000080" text="#000000" onload="makesnake()"
style="OVERFLOW-X: hidden; OVERFLOW-Y: scroll; WIDTH: 100%">
<!-- STEP THREE: Put the final code inside the BODY of your HTML document -->
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
for (i = 0; i <= message.length-1; i++) {
document.write("<span id='span"+i+"' class='spanstyle'>");
document.write(message[i]);
document.write("</span>");
}
if (document.layers) {
document.captureEvents(Event.MOUSEMOVE);
}
document.onmousemove = handlerMM;
// End -->
</script>
<p><center>
<font face="arial, helvetica" SIZE="-2">Free JavaScripts provided<br>
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
</center><p>
<!-- Script Size: 2.08 KB -->
(This highlighted portion can be removed if you don't want to see a credit line on the top of your web page.)
Now we will add the javascript to a web page
First open the Layout Properties Window. Click the HTML button to open the window where the code will be added.
Open the Javascript code in notepad or wordpad and copy the first part of the code that will be entered in the "Head Tag".
<style>.spanstyle {
COLOR: white; FONT-FAMILY: Verdana; FONT-SIZE: 8pt; FONT-WEIGHT: bold; POSITION: absolute; TOP: -50px; VISIBILITY: visible
}
</style>
<SCRIPT LANGUAGE="JavaScript">
<!-- Original: Peter Gehrig -->
<!-- Web Site: http://www.24fun.ch -->
<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->
<!-- Begin
var x, y;
var step = 10;
var flag = 0;
var message = "Don't miss these exciting presentations!! ";
message = message.split("");
var xpos = new Array();
for (i = 0; i <= message.length - 1; i++) {
xpos[i] = -50;
}
var ypos = new Array();
for (i = 0; i <= message.length - 1; i++) {
ypos[i]= -50;
}
function handlerMM(e) {
x = (document.layers) ? e.pageX : document.body.scrollLeft + event.clientX;
y = (document.layers) ? e.pageY : document.body.scrollTop + event.clientY;
flag = 1;
}
function makesnake() {
if (flag == 1 && document.all) {
for (i = message.length - 1; i >= 1; i--) {
xpos[i] = xpos[i - 1] + step;
ypos[i] = ypos[i - 1];
}
xpos[0] = x + step;
ypos[0] = y;
for (i = 0; i < message.length - 1; i++) {
var thisspan = eval("span" + (i) + ".style");
thisspan.posLeft = xpos[i];
thisspan.posTop = ypos[i];
}
}
else if (flag==1 && document.layers) {
for (i = message.length - 1; i >= 1; i--) {
xpos[i] = xpos[i - 1] + step;
ypos[i] = ypos[i - 1];
}
xpos[0] = x + step;
ypos[0] = y;
for (i = 0; i < message.length - 1; i++) {
var thisspan = eval("document.span" + i);
thisspan.left = xpos[i];
thisspan.top = ypos[i];
}
}
var timer = setTimeout("makesnake()", 10);
}
// End -->
</script>
<BASE TARGET="_parent">
<SCRIPT>
<!--
function F_loadRollover(){} function F_roll(){}
//-->
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript1.2" SRC="../rollover.js"></SCRIPT>
<LINK REL=STYLESHEET TYPE="text/css" HREF="../Future/style.css">
<LINK REL=STYLESHEET TYPE="text/css" HREF="../Future/site.css">
<STYLE>
</STYLE>
</HEAD>
View of step one. The first part of the code is in the Head Tag. If you want to change the font color (white) or style (verdana) or size (8pt) this is where you would enter the changes. White text could be changed to blue or yellow, etc.
Then add the body tag code:
<BODY STYLE="background-color: rgb(0,0,0); background-image: none;"
<body bgcolor="#000080" text="#000000" onload="makesnake()"
style="OVERFLOW-X: hidden; OVERFLOW-Y: scroll; WIDTH: 100%">
<!-- STEP THREE: Put the final code inside the BODY of your HTML document -->
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
for (i = 0; i <= message.length-1; i++) {
document.write("<span id='span"+i+"' class='spanstyle'>");
document.write(message[i]);
document.write("</span>");
}
if (document.layers) {
document.captureEvents(Event.MOUSEMOVE);
}
document.onmousemove = handlerMM;
// End -->
</script>
<p><center>
<font face="arial, helvetica" SIZE="-2">Free JavaScripts provided<br>
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
</center><p>
<!-- Script Size: 2.08 KB -->
The blue highlight is the body tag code - the fuchsia highlight is the code that can be deleted to remove the credit tag from the page.
This view shows the code entered inside the Body Tag.
Now we'll take a look at the code in the HTML View
You can see the code that was just entered for the Javascript
This script will preview working correctly but it will not publish the code correctly. The code will be corrupted and needs to be fixed.
You can see the mousetrail is working but there is a line of code showing on the page. This has to be removed from the html code.
You can also see the credit line that I highlighted in fuchsia above that can be removed from the page code.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
<META NAME="Author" CONTENT="Maureen Shannon">
<META NAME="Generator" CONTENT="NetObjects Fusion 5.0 for Windows">
<META NAME="Keywords"
CONTENT="New Jersey, Computer, Computer User Group, User Group, Special Interest Groups, SIGs, Microsoft Windows, Microsoft NT, Graphics, Web Design, New Jersey Personal Computer User Group, NJPCUG, Personal Computers, Computer Meetings, Senior Citizen Groups, ">
<TITLE>Future</TITLE>
<style>.spanstyle {
COLOR: white; FONT-FAMILY: Verdana; FONT-SIZE: 8pt; FONT-WEIGHT: bold; POSITION: absolute; TOP: -50px; VISIBILITY: visible
}
</style>
<SCRIPT LANGUAGE="JavaScript">
<!-- Original: Peter Gehrig -->
<!-- Web Site: http://www.24fun.ch -->
<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->
<!-- Begin
var x, y;
var step = 10;
var flag = 0;
var message = "Don't miss these exciting presentations!! ";
message = message.split("");
var xpos = new Array();
for (i = 0; i <= message.length - 1; i++) {
xpos[i] = -50;
}
var ypos = new Array();
for (i = 0; i <= message.length - 1; i++) {
ypos[i]= -50;
}
function handlerMM(e) {
x = (document.layers) ? e.pageX : document.body.scrollLeft + event.clientX;
y = (document.layers) ? e.pageY : document.body.scrollTop + event.clientY;
flag = 1;
}
function makesnake() {
if (flag == 1 && document.all) {
for (i = message.length - 1; i >= 1; i--) {
xpos[i] = xpos[i - 1] + step;
ypos[i] = ypos[i - 1];
}
xpos[0] = x + step;
ypos[0] = y;
for (i = 0; i < message.length - 1; i++) {
var thisspan = eval("span" + (i) + ".style");
thisspan.posLeft = xpos[i];
thisspan.posTop = ypos[i];
}
}
else if (flag==1 && document.layers) {
for (i = message.length - 1; i >= 1; i--) {
xpos[i] = xpos[i - 1] + step;
ypos[i] = ypos[i - 1];
}
xpos[0] = x + step;
ypos[0] = y;
for (i = 0; i < message.length - 1; i++) {
var thisspan = eval("document.span" + i);
thisspan.left = xpos[i];
thisspan.top = ypos[i];
}
}
var timer = setTimeout("makesnake()", 10);
}
// End -->
</script>
<BASE TARGET="_parent">
<SCRIPT>
<!--
function F_loadRollover(){} function F_roll(){}
//-->
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript1.2" SRC="../rollover.js"></SCRIPT>
<LINK REL=STYLESHEET TYPE="text/css" HREF="../Future/style.css">
<LINK REL=STYLESHEET TYPE="text/css" HREF="../Future/site.css">
<STYLE>
</STYLE>
</HEAD>
<BODY STYLE="background-color: rgb(0,0,0); background-image: none;"
<body bgcolor="#000080" text="#000000" onload="makesnake()"
style="OVERFLOW-X: hidden; OVERFLOW-Y: scroll; WIDTH: 100%">
<!-- STEP THREE: Put the final code inside the BODY of your HTML document -->
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
for (i = 0; i <= message.length-1; i++) {
document.write("<span id='span"+i+"' class='spanstyle'>");
document.write(message[i]);
document.write("</span>");
}
if (document.layers) {
document.captureEvents(Event.MOUSEMOVE);
}
document.onmousemove = handlerMM;
// End -->
</script>
<p><center>
<font face="arial, helvetica" SIZE="-2">Free JavaScripts provided<br>
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
</center><p>
<!-- Script Size: 2.08 KB -->
TOPMARGIN=0 LEFTMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>
<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0 WIDTH=600 NOF=LY>
<TR VALIGN=TOP ALIGN=LEFT>
<TD WIDTH=31 HEIGHT=15><IMG SRC="../clearpixel.gif" WIDTH=31 HEIGHT=1 BORDER=0></TD>
<TD WIDTH=12><IMG SRC="../clearpixel.gif" WIDTH=12 HEIGHT=1 BORDER=0></TD>
<TD WIDTH=127><IMG SRC="../clearpixel.gif" WIDTH=127 HEIGHT=1 BORDER=0></TD>
<TD WIDTH=190><IMG SRC="../clearpixel.gif" WIDTH=190 HEIGHT=1 BORDER=0></TD>
<TD WIDTH=151><IMG SRC="../clearpixel.gif" WIDTH=151 HEIGHT=1 BORDER=0></TD>
<TD WIDTH=89><IMG SRC="../clearpixel.gif" WIDTH=89 HEIGHT=1 BORDER=0></TD>
</TR>
<TR VALIGN=TOP ALIGN=LEFT>
<TD COLSPAN=2 HEIGHT=60></TD>
<TD COLSPAN=3 ALIGN=CENTER VALIGN=MIDDLE WIDTH=468><IMG ID="Picture1" HEIGHT=60 WIDTH=468 SRC="../Future/DataPulseNJCont.gif" BORDER=0></TD>
<TD></TD>
</TR>
<TR VALIGN=TOP ALIGN=LEFT>
<TD COLSPAN=6 HEIGHT=25></TD>
</TR>
<TR VALIGN=TOP ALIGN=LEFT>
<TD HEIGHT=16></TD>
<TD COLSPAN=4 WIDTH=480>
<TABLE ID="NavigationBar3" BORDER=0 CELLSPACING=0 CELLPADDING=0 NOF=NB_FYHS WIDTH=480>
<TR VALIGN=TOP ALIGN=LEFT>
<TD WIDTH=80><A HREF="../index.htm" onMouseOver="F_roll('NavigationButton1',1)" onMouseOut="F_roll('NavigationButton1',0)"><IMG ID="NavigationButton1" NAME="NavigationButton1" HEIGHT=16 WIDTH=80 SRC="../Home_Nglobal.gif"
onLoad="F_loadRollover(this,'../Future/Home_NRglobal.gif')" BORDER=0 ALT="Meetings"></A></TD>
<TD WIDTH=80><A HREF="../February/february.htm" onMouseOver="F_roll('NavigationButton2',1)" onMouseOut="F_roll('NavigationButton2',0)"><IMG ID="NavigationButton2" NAME="NavigationButton2" HEIGHT=16 WIDTH=80
SRC="../February_Nglobal.gif" onLoad="F_loadRollover(this,'February_NRglobal.gif')" BORDER=0 ALT="February"></A></TD>
<TD WIDTH=80><A HREF="../March/march.htm" onMouseOver="F_roll('NavigationButton3',1)" onMouseOut="F_roll('NavigationButton3',0)"><IMG ID="NavigationButton3" NAME="NavigationButton3" HEIGHT=16 WIDTH=80
SRC="../March_Nglobal.gif" onLoad="F_loadRollover(this,'March_NRglobal.gif')" BORDER=0 ALT="March"></A></TD>
<TD WIDTH=80><A HREF="../Future/future.htm" onMouseOver="F_roll('NavigationButton4',1)" onMouseOut="F_roll('NavigationButton4',0)"><IMG ID="NavigationButton4" NAME="NavigationButton4" HEIGHT=16 WIDTH=80
SRC="../Future/Future_Hglobal.gif" onLoad="F_loadRollover(this,'Future_HRglobal.gif')" BORDER=0 ALT="Future"></A></TD>
<TD WIDTH=80><A HREF="../Photos/photos.htm" onMouseOver="F_roll('NavigationButton5',1)" onMouseOut="F_roll('NavigationButton5',0)"><IMG ID="NavigationButton5" NAME="NavigationButton5" HEIGHT=16 WIDTH=80
SRC="../Photos_Nglobal.gif" onLoad="F_loadRollover(this,'Photos_NRglobal.gif')" BORDER=0 ALT="Photos"></A></TD>
<TD WIDTH=80 HEIGHT=16><A HREF="../Text/text.htm" onMouseOver="F_roll('NavigationButton6',1)" onMouseOut="F_roll('NavigationButton6',0)"><IMG ID="NavigationButton6" NAME="NavigationButton6" HEIGHT=16 WIDTH=80
SRC="../Text_Nglobal.gif" onLoad="F_loadRollover(this,'Text_NRglobal.gif')" BORDER=0 ALT="Text"></A></TD>
</TR>
</TABLE>
</TD>
<TD></TD>
</TR>
<TR VALIGN=TOP ALIGN=LEFT>
<TD COLSPAN=6 HEIGHT=63></TD>
</TR>
<TR VALIGN=TOP ALIGN=LEFT>
<TD COLSPAN=3></TD>
<TD WIDTH=190 CLASS="TextObject">
<P><SPAN STYLE="color: rgb(0,102,255);"><B><SPAN STYLE="font-family: Pickwick; font-size: xx-large;">2001</SPAN></B></SPAN></P>
</TD>
<TD COLSPAN=2></TD>
</TR>
</TABLE>
<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0 WIDTH=600 NOF=LY>
<TR VALIGN=TOP ALIGN=LEFT>
<TD WIDTH=22 HEIGHT=9><IMG SRC="../clearpixel.gif" WIDTH=22 HEIGHT=1 BORDER=0></TD>
<TD WIDTH=558><IMG SRC="../clearpixel.gif" WIDTH=558 HEIGHT=1 BORDER=0></TD>
<TD WIDTH=20><IMG SRC="../clearpixel.gif" WIDTH=20 HEIGHT=1 BORDER=0></TD>
</TR>
<TR VALIGN=TOP ALIGN=LEFT>
<TD></TD>
<TD WIDTH=558 CLASS="TextObject">
<P STYLE="text-transform: capitalize; vertical-align: super; text-decoration: none ;"><SPAN STYLE="color: rgb(51,153,255);"><B><SPAN STYLE="font-size: x-large;">NJPCUG InHouse Presentation -<BR>Town Meeting</SPAN></B></SPAN></P>
<P STYLE="text-transform: capitalize; vertical-align: super; text-decoration: none ;"><B><SPAN STYLE="font-size: x-large; color: rgb(51,153,255);">Corel - CorelDraw 10</SPAN></B></P>
<P STYLE="text-transform: capitalize; vertical-align: super; text-decoration: none ;"><B><SPAN STYLE="font-size: x-large; color: rgb(51,153,255);">Microsoft Family Technology Night</SPAN></B></P>
<P STYLE="text-transform: capitalize; vertical-align: super; text-decoration: none ;"><B><SPAN STYLE="font-size: x-large; color: rgb(51,153,255);">MGI - PhotoSuite IV</SPAN></B></P>
<P STYLE="text-transform: capitalize; vertical-align: super; text-decoration: none ;"><B><SPAN STYLE="font-size: x-large; color: rgb(51,153,255);">Lernout & Hauspie - Speech Recognition Software</SPAN></B></P>
</TD>
<TD></TD>
</TR>
</TABLE>
<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0 NOF=LY>
<TR VALIGN=TOP ALIGN=LEFT>
<TD WIDTH=8 HEIGHT=27><IMG SRC="../clearpixel.gif" WIDTH=8 HEIGHT=1 BORDER=0></TD>
<TD></TD>
<TD WIDTH=250><IMG SRC="../clearpixel.gif" WIDTH=250 HEIGHT=1 BORDER=0></TD>
</TR>
<TR VALIGN=TOP ALIGN=LEFT>
<TD></TD>
<TD NOWRAP NOF="NB_FYHT" CLASS="TextNavBar" STYLE="background-image: none;">[<A HREF="../index.htm">Meetings</A>] [<A HREF="../February/february.htm">February</A>] [<A HREF="../March/march.htm">March</A>] [<A
HREF="../Future/future.htm">Future</A>] [<A HREF="../Photos/photos.htm">Photos</A>] [<A HREF="../Text/text.htm">Text</A>]</TD>
<TD></TD>
</TR>
</TABLE>
<EMBED SRC="../Future/AndILov.mid" HEIGHT=2 WIDTH=2 AUTOSTART=TRUE HIDDEN=TRUE LOOP=FALSE>
</BODY>
</HTML>
The code above is the entire body.htm code for a page that I created using a javascript mousetrail. The highlighted corrupt needs to be deleted. This same error occurs when saving a page with a Javascript so it is easy to find once you know what to look for.
page code Javascript Code Head Javascript Code Body Corrupt Code
This example is the page with the code fixed and the credit line removed.
Two or more Javascripts may not run together on the same page. A Javascript and a Java Applet will run together. Two Applets will run without problems.