View Full Version : Onload event stops menu system working - help, please.

07-22-2002, 03:48 PM

I am using a freeware menu script (Brothercake ultimate dropdown menu - www.brothercake.com/dropdown) on my site, which works fine. However, when I try to add an onLoad event (which fades in and out images on the page a second or so after the page has loaded) it does not work. The onLoad event also works on its own, but not when I add the Brothercake script line in the body section which invokes the menu script.

I know sometimes there can be problems with two javascript functions trying to call themselves at onLoad time, but I can't actually determine, looking at the coding of the Brothercake js files, if that is the problem here. Can anybody help?

For info, the html page that I am calling things from is noted below. (nb. The cycleImages function within the onLoad function is contained in the fadeinoutforhomepage.js file.)

Please let me know if any further info is required.

Diane Campbell


<link rel="stylesheet" href="pumptoolsstylesheet.css" type="text/css">

<!-- ULTIMATE DROPDOWN MENU v3.6.1 by Brothercake -->
<!-- http://www.brothercake.com/dropdown/ -->
<script language="javascript" src="dscript892/sniffer.js"></script>
<script language="javascript1.2" src="dscript892/custom_scatter.js"></script>
<script language="javascript1.2" src="dscript892/style.js"></script>
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
// -->
<script language="javascript" type="text/javascript">
function onLoad()
// -->

<body topmargin="0" leftmargin="0" marginheight="0" marginwidth="0" onLoad="onLoad();" >
<script language="javascript1.2" src="dscript892/menu.js"></script>
<script language="JavaScript1.2" type="text/javascript" src="fadeinoutforhomepage.js"></script>

<div id="Layer2" style="position:absolute; left:801px; top:562px; width:133px; height:23px; z-index:7"><font color="#999999" size="1">&copy;<font face="Arial, Helvetica, sans-serif">
2002 Pumptools Ltd</font></font></div>

<div id="Layer3" style="position:absolute; left:722px; top:477px; width:200px; height:42px; z-index:8">
<!-- Atomz Search HTML for Pumptools Ltd -->
<form method="get"action="http://search.atomz.com/search/">
<div align="left">
<input type=submit value="Search" name="submit" >
<input size=25 name="sp-q"><br>
<input type=hidden name="sp-a" value="sp10021e09">
<input type=hidden name="sp-f" value="ISO-8859-1">

<div id="Layer1" style="position:absolute; left:516px; top:504px; width:193px; height:40px; z-index:9">
<table width="100%" border="0>
<tr valign="middle" >
<td class="greytextbold12" width="44%">Enquiries</td>
<td class="greytextbold12" width="44%">Contact us</td>

<div id="logoLyr" style="position:absolute;left:102px;top:65px;width:87px;height:69px;z-index:1;visibility:visible;"><img src="Graphics/logo.jpg" width="106" height="85"></div>

<div id="intro" style="position:absolute;left:81px;top:186px;width:1px;height:30px;z-index:1;visibility:visible;">
<table width="353" border="0">
<td align="center" colspan="3">
<p><font size="3"><font color="#003366" size="2"><font face="Arial, Helvetica, sans-serif" size="3"><b>Specialist
suppliers to the ESP industry</b></font></font></font></p>
<td width="23" >&nbsp; </td>
<td width="292" >
<p class="bluetext">A line about Pumptools stating whatever. This may
be two lines for some added interest.</p>
<td width="24" >&nbsp;</td>

<div id="services" style="position:absolute;left:509px;top:156px;width:135px;height:120px;z-index:3;visibility:visible;"><img height="120" width="135" name="iyar0" src="Graphics/servicesbutton.png" alt="In your area menu options" border="0" />

<div id="products" style="position:absolute;left:374px;top:277px;width:135px;height:120px;z-index:3;visibility:visible;"><img src="Graphics/products.png" width="135" height="120">

<div id="oilrig" style="position:absolute;left:779px;top:77px;width:134px;height:200px;z-index:1;visibility:visible;">
<img src="Photos/rig1.jpg" width="134" height="200"> </div>

<div id="info1" style="position:absolute; left:518px; top:301px; width:117px; height:67px; z-index:10; visibility: hidden" >
<div align="center">Bespoke system design &amp; manufacturing</div>

<div id="info1picture" style="position:absolute;left:644px;top:312px;width:297px;height:86px;z-index:5;visibility:hidden; ">
<img src="Photos/S_with_YTool.jpg"></div>

<div id="info2" style="position:absolute; left:655px; top:201px; width:117px; height:67px; z-index:10; visibility: hidden">
<div align="center">Single source for all ESP system requirements</div>

<div id="info3" style="position:absolute; left:247px; top:303px; width:117px; height:49px; z-index:11; visibility: hidden">
<div align="center">Consistantly providing quality products and service</div>

<div id="info3picture" style="position:absolute; left:374px; top:397px; width:117px; height:67px; z-index:11; visibility: hidden"><img src="Photos/S_and_P_outside.jpg" width="200" height="158"></div>

07-22-2002, 04:07 PM
The only onLoad function I can see in this code is cycleImages(). If you have got an onLoad conflict, I think it must be in one of your five external .js files. If any of these files contain a line like


then this will overwrite the existing onLoad value. If you want two or more onload functions you have to put them into one line, e.g.

<body onload = "function1; function2; function3">

this will always run all the onLoad functions. Of course, you must make sure you have no script that changes the onLoad, otherwise the one in the <body> tag will be overwritten.

This might not be your problem, but unless you post your .js files, I can't guess what else it could be.

07-22-2002, 04:30 PM
Neil C.,

Thanks for the reply.

Been through all the js files with a search for onLoad. Only thing that came up is the undernoted snippet of code. Do you think this could be the problem?


//** DO NOT EDIT THIS ****************************************
function genericOnloadFunction() {

//** DO NOT EDIT THIS *****************************************

07-22-2002, 08:31 PM
no, that's not it. this is a function that does nothing apart from run the 'nsinit()' function if the variable 'ns4' is true. it's part of some cross-browser code.

it looks like you are supposed to call all your onload functions from this function, but i wouldn't do this because it's part of some cross-browser code and the functions might not get run in certain browsers.

it seems to me that your problem isn't an onLoad conflict, more likely a conflict between variable or function names. some of the the .js files must have script with variable or function name conflicts. in order to help, i'm going to have to see the .js files so i can look for this kind of clash. if there's a lot of code, either put it all in a .zip or a single .txt file and attach it to a post, then i can have a go at debuggng it.