http://www.dynamicdrive.com/dynamicindex4/butterfly.htm
I installed this script in an external JS file and used onload= to call it
It works O.K. but I canot turn it off .
CSS Codes
New Comer (less than 5 posts)
Flying Butterfly
http://www.dynamicdrive.com/dynamicindex4/butterfly.htm
I installed this script in an external JS file and used onload= to call it
It works O.K. but I canot turn it off .
Global Moderator
Where is the external call for this script located in your document and what does it look like? You shouldn't need to use onload, that is already in the script. Here's what you should have done:
1 ) Save the script to a separate file, let's call it butter.js
2 ) Remove these two lines from the script:
andCode:<script language="JavaScript1.2">
3 ) Add this external call directly above the </body> tag on your page:Code:</script>
Code:<script src="butter.js" type="text/javascript"></script>
- John________________________
Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate
New Comer (less than 5 posts)
John,
Thank you.
I have set out your questions/comments as Q. and my responses as A.
Q. Where is the external call for this script located in your document and what does it look like?
A. In the onload:
<body class="main" onload="detect();getHeading();initbutterfly();showPage();">
Note that I renamed init() to initbutterfly() in the JS to avoid possible clashes
Q. You shouldn't need to use onload, that is already in the script.
A. I believe I have to do it this way because I already have other onload = " " calls. (This is explained on the Dynamic Drive website.)
I also commented out the statement:
window.onload=init; because I call this function in the onload=" "
Q. Here's what you should have done:
1 ) Save the script to a separate file, let's call it butter.js
A. Done, named butterfly.js
Q. 2 ) Remove these two lines from the script:
Code:<script language="JavaScript1.2">and
Code:</script>
A. Done
Q. 3 ) Add this external call directly above the </body> tag on your page:
Code:<script src="butter.js" type="text/javascript"></script>
A. This does not work. I think there is conflict with the onload calls.
However, if I place the above code in the <head> and place the following at the end of the <body>:
<script type="text/javascript">butterflyinit()</script> adn comen tout the window.onload in the JS, then it works as it did before for me. That is, the butterflies work, but cannot be cancelled.
Does anyone have any ideas?
Trevor L.
Global Moderator
Probably a conflict with a function(s), variable(s), name(s) and/or id(s) in the other script(s). You didn't say before that you had so many other scripts. You get the prize:
Note: Questions regarding multiple script usage are not usually replied to due to their time consuming nature. See this thread for more information, and this tutorial for one possible solution.
Aside from the tutorial above which usually is the solution when the problem is two different scripts, you may need to consult:
http://www.howtocreate.co.uk/tutoria...allshow#refcon
Which explains how two scripts on the same page may not use the same set of variable names, id names, etc. This is especially important if the problem is two copies of the same script on a page but, can come into play with two different scripts when the first step won't fix it.
One other approach that works in both situations, if adaptable to one (or more) of the scripts, is to put one script in a borderless iframe. It will look like it is on the same page but, since it really is on a separate page, conflicts are no longer an issue.
- John________________________
Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate
New Comer (less than 5 posts)
John,
Thanks for your time
I have followed the guidelines here for how to call multiple scripts using
<body onload= ..>
I admit that I have not checked the use of duplicate global variables but I don't have many so it is not likely to be a problem (I will still check.)
I solved my problem by placing this code inside an existing table in my main page:
<tr id="hide">
<td align="center">
<input type="button" class="top" value="Hide Animations"
onclick="hideit('hide');hidebutterfly()">
</td>
</tr>
where hideit() is:
function hideit(elid)
{document.getElementById(elid).style.display="none"}
and
class "top" is:
.top {vertical-align:top;}
It works like a charm. Why clicking the images didn't work is still a question, but not one that I will pursue
Trevor L.
Posting Permissions
Reply With Quote
Bookmarks