Teacher needs help with Body onload problem!

**andi** · 01-16-2005, 09:51 PM

I want to add the "Flying Butterfly script" to my web page. After the code there is a note that states:
"This script accesses the BODY onload event (window.onload). If you have another script on your page that does the same, one of them will not run."

I also already have the "Kissing trail" on my page. I think having the 2 of these scripts on my page is a problem because they each work separately but not together.

Help is offered:
http://www.wsabstract.com/javatutors/multiplejava.shtml

Here is the Flying Butterfly script code:
http://www.dynamicdrive.com/dynamicindex4/butterfly.htm

Here is the Kissing trail codes:
http://www.dynamicdrive.com/dynamici.../kisstrail.htm

I want to have both codes work at the same time. I tried what is suggested on the help page but I was not successful. Is there someone up to the challenge???? Please???
THANK YOU!

**martinterry** · 01-19-2005, 02:39 PM

Add all the scripts to your page as directed by DD and then....

1. remove the line
window.onload=kissbegin

2. change the line which reads

window.onload=init;

to

window.onload=init,kissbegin();

**andi** · 01-20-2005, 03:20 AM

nope....tried it and it doesn't work....any suggestions???

**martinterry** · 01-20-2005, 11:04 AM

Heres the full code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>
<style type="text/css">

</style>

<script language="JavaScript1.2" type="text/JavaScript">
<!-- cloak

//Kissing trail- By dij8 (dij8@dij8.com)
//Modified by Dynamic Drive for bug fixes
//Visit http://www.dynamicdrive.com for this script

kisserCount = 15 //maximum number of images on screen at one time
curKisser = 0 //the last image DIV to be displayed (used for timer)
kissDelay = 1000 //duration images stay on screen (in milliseconds)
kissSpacer = 50 //distance to move mouse b4 next heart appears
theimage = "lips_small.gif" //the 1st image to be displayed
theimage2 = "small_heart.gif" //the 2nd image to be displayed

//Browser checking and syntax variables
var docLayers = (document.layers) ? true:false;
var docId = (document.getElementById) ? true:false;
var docAll = (document.all) ? true:false;
var docbitK = (docLayers) ? "document.layers['"

docId) ? "document.getElementById('"

docAll) ? "document.all['":"document."
var docbitendK = (docLayers) ? "']"

docId) ? "')"

docAll) ? "']":""
var stylebitK = (docLayers) ? "":".style"
var showbitK = (docLayers) ? "show":"visible"
var hidebitK = (docLayers) ? "hide":"hidden"
var ns6=document.getElementById&&!document.all
//Variables used in script
var posX, posY, lastX, lastY, kisserCount, curKisser, kissDelay, kissSpacer, theimage
lastX = 0
lastY = 0
//Collection of functions to get mouse position and place the images
function doKisser(e) {

posX = getMouseXPos(e)
posY = getMouseYPos(e)
if (posX>(lastX+kissSpacer)||posX<(lastX-kissSpacer)||posY>(lastY+kissSpacer)||posY<(lastY-kissSpacer)) {
showKisser(posX,posY)
lastX = posX
lastY = posY
}
}
// Get the horizontal position of the mouse
function getMouseXPos(e) {
if (document.layers||ns6) {
return parseInt(e.pageX+10)
} else {
return (parseInt(event.clientX+10) + parseInt(document.body.scrollLeft))
}
}
// Get the vartical position of the mouse
function getMouseYPos(e) {
if (document.layers||ns6) {
return parseInt(e.pageY)
} else {
return (parseInt(event.clientY) + parseInt(document.body.scrollTop))
}
}
//Place the image and start timer so that it disappears after a period of time
function showKisser(x,y) {
var processedx=ns6? Math.min(x,window.innerWidth-75) : docAll? Math.min(x,document.body.clientWidth-55) : x
if (curKisser >= kisserCount) {curKisser = 0}
eval(docbitK + "kisser" + curKisser + docbitendK + stylebitK + ".left = " + processedx)
eval(docbitK + "kisser" + curKisser + docbitendK + stylebitK + ".top = " + y)
eval(docbitK + "kisser" + curKisser + docbitendK + stylebitK + ".visibility = '" + showbitK + "'")
if (eval("typeof(kissDelay" + curKisser + ")")=="number") {
eval("clearTimeout(kissDelay" + curKisser + ")")
}
eval("kissDelay" + curKisser + " = setTimeout('hideKisser(" + curKisser + ")',kissDelay)")
curKisser += 1
}
//Make the image disappear
function hideKisser(knum) {
eval(docbitK + "kisser" + knum + docbitendK + stylebitK + ".visibility = '" + hidebitK + "'")
}

function kissbegin(){
//Let the browser know when the mouse moves
if (docLayers) {
document.captureEvents(Event.MOUSEMOVE)
document.onMouseMove = doKisser
} else {
document.onmousemove = doKisser
}
}

// decloak -->
</script>
</head>

<body>

<script language="JavaScript1.2">

/*
Flying Butterfly script (By BGAudioDr@aol.com)
Modified slightly/ permission granted to Dynamic Drive to feature script in archive
For full source, visit http://www.dynamicdrive.com
*/

var Ymax=8; //MAX # OF PIXEL STEPS IN THE "X" DIRECTION
var Xmax=8; //MAX # OF PIXEL STEPS IN THE "Y" DIRECTION
var Tmax=10000; //MAX # OF MILLISECONDS BETWEEN PARAMETER CHANGES

//FLOATING IMAGE URLS FOR EACH IMAGE. ADD OR DELETE ENTRIES. KEEP ELEMENT NUMERICAL ORDER STARTING WITH "0" !!

var floatimages=new Array();
floatimages[0]='butterfly2.gif';
floatimages[1]='butterfly2.gif';

//*********DO NOT EDIT BELOW***********
var NS4 = (navigator.appName.indexOf("Netscape")>=0 && parseFloat(navigator.appVersion) >= 4 && parseFloat(navigator.appVersion) < 5)? true : false;
var IE4 = (document.all)? true : false;
var NS6 = (parseFloat(navigator.appVersion) >= 5 && navigator.appName.indexOf("Netscape")>=0 )? true: false;
var wind_w, wind_h, t='', IDs=new Array();
for(i=0; i<floatimages.length; i++){
t+=(NS4)?'<layer name="pic'+i+'" visibility="hide" width="10" height="10"><a href="javascript:hidebutterfly()">' : '<div id="pic'+i+'" style="position:absolute; visibility:hidden;width:10px; height:10px"><a href="javascript:hidebutterfly()">';
t+='<img src="'+floatimages[i]+'" name="p'+i+'" border="0">';
t+=(NS4)? '</a></layer>':'</a></div>';
}
document.write(t);

function moveimage(num){
if(getidleft(num)+IDs[num].W+IDs[num].Xstep >= wind_w+getscrollx())IDs[num].Xdir=false;
if(getidleft(num)-IDs[num].Xstep<=getscrollx())IDs[num].Xdir=true;
if(getidtop(num)+IDs[num].H+IDs[num].Ystep >= wind_h+getscrolly())IDs[num].Ydir=false;
if(getidtop(num)-IDs[num].Ystep<=getscrolly())IDs[num].Ydir=true;
moveidby(num, (IDs[num].Xdir)? IDs[num].Xstep : -IDs[num].Xstep , (IDs[num].Ydir)? IDs[num].Ystep: -IDs[num].Ystep);
}

function getnewprops(num){
IDs[num].Ydir=Math.floor(Math.random()*2)>0;
IDs[num].Xdir=Math.floor(Math.random()*2)>0;
IDs[num].Ystep=Math.ceil(Math.random()*Ymax);
IDs[num].Xstep=Math.ceil(Math.random()*Xmax)
setTimeout('getnewprops('+num+')', Math.floor(Math.random()*Tmax));
}

function getscrollx(){
if(NS4 || NS6)return window.pageXOffset;
if(IE4)return document.body.scrollLeft;
}

function getscrolly(){
if(NS4 || NS6)return window.pageYOffset;
if(IE4)return document.body.scrollTop;
}

function getid(name){
if(NS4)return document.layers[name];
if(IE4)return document.all[name];
if(NS6)return document.getElementById(name);
}

function moveidto(num,x,y){
if(NS4)IDs[num].moveTo(x,y);
if(IE4 || NS6){
IDs[num].style.left=x+'px';
IDs[num].style.top=y+'px';
}}

function getidleft(num){
if(NS4)return IDs[num].left;
if(IE4 || NS6)return parseInt(IDs[num].style.left);
}

function getidtop(num){
if(NS4)return IDs[num].top;
if(IE4 || NS6)return parseInt(IDs[num].style.top);
}

function moveidby(num,dx,dy){
if(NS4)IDs[num].moveBy(dx, dy);
if(IE4 || NS6){
IDs[num].style.left=(getidleft(num)+dx)+'px';
IDs[num].style.top=(getidtop(num)+dy)+'px';
}}

function getwindowwidth(){
if(NS4 || NS6)return window.innerWidth;
if(IE4)return document.body.clientWidth;
}

function getwindowheight(){
if(NS4 || NS6)return window.innerHeight;
if(IE4)return document.body.clientHeight;
}

function init(){
wind_w=getwindowwidth();
wind_h=getwindowheight();
for(i=0; i<floatimages.length; i++){
IDs[i]=getid('pic'+i);
if(NS4){
IDs[i].W=IDs[i].document.images["p"+i].width;
IDs[i].H=IDs[i].document.images["p"+i].height;
}
if(NS6 || IE4){
IDs[i].W=document.images["p"+i].width;
IDs[i].H=document.images["p"+i].height;
}
getnewprops(i);
moveidto(i , Math.floor(Math.random()*(wind_w-IDs[i].W)), Math.floor(Math.random()*(wind_h-IDs[i].H)));
if(NS4)IDs[i].visibility = "show";
if(IE4 || NS6)IDs[i].style.visibility = "visible";
startfly=setInterval('moveimage('+i+')',Math.floor(Math.random()*100)+100);
}}

function hidebutterfly(){
for(i=0; i<floatimages.length; i++){
if (IE4)
eval("document.all.pic"+i+".style.visibility='hidden'")
else if (NS6)
document.getElementById("pic"+i).style.visibility='hidden'
else if (NS4)
eval("document.pic"+i+".visibility='hide'")
clearInterval(startfly)
}
}

if (NS4||NS6||IE4){
window.onload=init,kissbegin();
window.onresize=function(){ wind_w=getwindowwidth(); wind_h=getwindowheight(); }
}

</script>
<script language="JavaScript" type="text/JavaScript">

</script>

<p align="center"><font face="Arial" size="-2">Free DHTML scripts provided by<br>
<a href="http://www.dynamicdrive.com">Dynamic Drive</a></font></p>
</body>
</html>

**mwinter** · 01-20-2005, 07:09 PM

Originally Posted by martinterry

window.onload=init,kissbegin();

I don't see how that can possibly help. It is functionally the same as

Code:

init;
window.onload = kissbegin();

which, when evaluated, is the same as

Code:

kissbegin();

The correct solution is

Code:

window.onload = function() {
  init();
  kissbegin();
};

To explain, the comma operator:

evaluates the first operand (init)
evaluates the second operand (kissbegin())
returns the result of (2)

Evaluation of a function reference (init) does nothing; the result of the expression is simply the reference with no side effects (in other words, the function isn't called!). Evaluation of the function call (kissbegin()) will occur as normal which is a problem in itself - the function is supposed to be called when the load event is fired. Finally, the result of calling kissbegin is undefined, so this is what will be assigned to window.onload. So in all, all that happens is kissbegin is called and if a load event listener has been added (at any prior point in the source), it will be removed.

Even if you changed the suggestion to

Code:

window.onload = (init(), kissbegin);

this would still be incorrect: init would be called before the document has loaded.

I don't think explanation of my alternative is needed (ask though if it is).

The language attribute is deprecated and has been for over six years. It isn't necessary. Moreover, specifying the language version as 1.2 is positively dangerous. If a host respects the request, it will change it's parsing rules in such a way that is unique only to that version. It's possible that this change in parsing will break working code.

By convention, MIME types are all lowercase (not that it really matters as text/javascript isn't even registered).

<!-- cloak

"Hiding" scripts and style rules is as equally deprecated as the language attribute. No user agents currently in use need this outdated form of protection so don't use it. This is especially important if you serve XHTML documents.

If you do need to hide a script for some reason, move it to an external file (where the script should be, anyway).

Mike

**martinterry** · 01-21-2005, 02:28 PM

I would only like to add that :

1. the scripts are exactly as per that provided by DD on :

http://www.dynamicdrive.com/dynamicindex4/butterfly.htm
and
http://www.dynamicdrive.com/dynamic...3/kisstrail.htm

with the only exception being as per my first reply..

2. My main point being that only one 'onload' event handler can be used on any page.

as described in detail by DD here:-

http://www.wsabstract.com/javatutors/multiplejava.shtml

3. I have tested the complete HTML file (as per my second post to this thread)
in both IE6 and Netscape 6.2

Martin

**mwinter** · 01-21-2005, 08:34 PM

Originally Posted by martinterry

2. My main point being that only one 'onload' event handler can be used on any page.

That's wholly inaccurate. Whilst it is true that a construct like

HTML Code:

  <script type="text/javascript">
    window.onload = ...;
  </script>
</head>
<body onload="...">

or

HTML Code:

<body onload="...">
  <script type="text/javascript">
    window.onload = ...;
  </script>

will cause only the last set listener to persist, that doesn't prevent any event type from possessing more than one listener.

In decent, modern browsers, all elements have the method addEventListener defined in the W3C DOM 2 Events specification. This allows any number of listeners to be added.

Internet Explorer, which is neither modern nor decent, provides attachEvent. Though this provides similar functionality, it is broken; the this operator - frequently used with event listeners - is set to the global object (window, in scriptable browsers) rather than the element to which the listener is attached.

Even if neither of these features are available, it is trivial to implement one of your own (and it should probably be used in place of attachEvent).

3. I have tested the complete HTML file (as per my second post to this thread) in both IE6 and Netscape 6.2

By that I assume you mean you tested it and it works. Yes, I had a momentary lapse in my recollection of precedence.

Code:

window.onload=init,kissbegin();

Would be parsed as

Code:

(window.onload=init),(kissbegin());

whereas I thought it was

Code:

window.onload=(init,kissbegin());

However, it is still incorrect as kissbegin would be called before the document has finished loading (which was not intended).

Mike

**andi** · 01-21-2005, 11:52 PM

Hi boys
I tried your suggestion but it still doesn't work...I get the butterflies but not the kissing trail.....I use www.schoolnotes.com and there's a "pre-tag" button to check....I mention this because maybe this has something to do with the problem????
any other suggestions I could try??
andi