conflicting external files

Hi. I have a page with calls to three external js files which perform three jobs - a slide-in menu, an on-off popup, and a glide-in "answer" display.

The external files do three things individually nicely, but when all are put together there is a conflict - the "answer" doesn't show up when clicked and an error says a variable (winWidth) is undefined.

A demo is at http://aapress.com.au/demo/page/page1.html

Can anyone see where the conflict lies? I can't see any variable double-ups.

Below are the three js file contents:

<!--
// DHTMLapi.js custom API for cross-platform
// object positioning by Danny Goodman (http://www.dannyg.com)
// From "JavaScript Bible" 4th Edition.
// convert object name string or object reference
// into a valid object reference ready for style change

if(document.all && !document.getElementById) {
document.getElementById = function(id) {
return document.all[id];
}
}

function getObject(obj) {
var theObj
if (document.layers) {
if (typeof obj == "string") {
return document.layers[obj]
} else {
return obj
}
}
if (document.all) {
if (typeof obj == "string") {
return document.all(obj).style
} else {
return obj.style
}
}
if (document.getElementById) {
if (typeof obj == "string") {
return document.getElementById(obj).style
} else {
return obj.style
}
}
return null
}

// position an object at a specific pixel coordinate
function shiftTo(obj, x, y) {
var theObj = getObject(obj)
if (theObj.moveTo) {
theObj.moveTo(x,y)
} else if (typeof theObj.left != "undefined") {
theObj.left = x
theObj.top = y
}
}

// move an object by x and/or y pixels
function shiftBy(obj, deltaX, deltaY) {
var theObj = getObject(obj)
if (theObj.moveBy) {
theObj.moveBy(deltaX, deltaY)
} else if (typeof theObj.left != "undefined") {
theObj.left = parseInt(theObj.left) + deltaX
theObj.top = parseInt(theObj.top) + deltaY
}
}

// set the z-order of an object
function setZIndex(obj, zOrder) {
var theObj = getObject(obj)
theObj.zIndex = zOrder
}

// set the background color of an object
function setBGColor(obj, color) {
var theObj = getObject(obj)
if (theObj.bgColor) {
theObj.bgColor = color
} else if (typeof theObj.backgroundColor != "undefined") {
theObj.backgroundColor = color
}
}

// set the visibility of an object to visible
function show(obj) {
var theObj = getObject(obj)
theObj.visibility = "visible"
}

// set the visibility of an object to hidden
function hide(obj) {
var theObj = getObject(obj)
theObj.visibility = "hidden"
}

// retrieve the x coordinate of a positionable object
function getObjectLeft(obj) {
var theObj = getObject(obj)
return parseInt(theObj.left)
}

// retrieve the y coordinate of a positionable object
function getObjectTop(obj) {
var theObj = getObject(obj)
return parseInt(theObj.top)
}

/*************************************************
BEGIN HELP ELEMENT FUNCTIONS
**************************************************/

function getPicTop(oIMG) { //use graphic for vertical positioning
if (oIMG.offsetTop) return oIMG.offsetTop;
else if (oIMG.y) return oIMG.y;
}

// initiate show action
function showHelp(objName) {
picObj = document.images[objName + '_pic']; //get graphic
shiftTo(objName, winWidth, getPicTop(picObj) + ((document.getElementById('theID')) ? 495 : 435)); //ugly!???
setZIndex(objName,1000);
show(objName);
slide_stop = winWidth/2 - 200; //center minus 1/2 help width
intervalID = setInterval('moveHelp("' + objName + '")', 1);
}

// iterative move help DIV to center of window
function moveHelp(objName) {
shiftBy(objName,-40,0);
if (getObjectLeft(objName) <= slide_stop) {
clearInterval(intervalID);
shiftBy(objName,slide_stop-getObjectLeft(objName),0); //correct overshoot
getObject(objName).border='1px #000 solid';
}
}

// hide the help DIV
function hideMe(objName) {
getObject(objName).border='1px black solid';
shiftBy(objName,-40,0);
if (getObjectLeft(objName) > -1000) {
setTimeout('hideMe("'+objName+'")',1);
}
else hide(objName);
}

function getClientWidth() {
if (window.innerWidth) winWidth = window.innerWidth;
else if (document.body && typeof document.body.clientWidth != 'undefined')
winWidth = document.body.clientWidth;
else if (document.width) winWidth = document.width;
else winWidth = 800;
}

//-->

<!--
var popWindowWidth = '659';
var popWindowHeight = '410';
var centerPopUpWindow = 'yes';
var popWindowBackgroundColor = '000000';
var popWindowPadding = '0';
var popWindowPositionTop = '0';
var popWindowPositionLeft = '0';
var popWindowBorderStyle = 'solid';
var popWindowBorderWidth = '2';
var popWindowBorderColor = '000000';
var popWinFontFamily = 'arial,verdana,sans-serif';
var popWinFontSize = '11px';
var popWindowDelay = '5';
var popWindowShadowColor = '#666666';

var ie=document.all
var ns6=document.getElementById && !document.all

function init(){

var nBody = document.getElementsByTagName('body')[0];
var nDiv = document.createElement('div');
nDiv.className = "pWinConfg";
nDiv.id = "pWinConfg";
nImg = document.createElement('img');
nImg.src = "../../../../img/lessonhelp.png";
nImg.width = "659";
nImg.height = "410";
nDiv.appendChild(nImg);
nBody.appendChild(nDiv);
}

// function togglePopUp(){

// document.getElementById('pWinConfg').style.visibility == 'visible' ? document.getElementById('pWinConfg').style.visibility = 'hidden' : document.getElementById('pWinConfg').style.visibility = 'visible';}

function hidePopUp(){
document.getElementById('pWinConfg').style.visibility='hidden';
}

function showPopUp(){
document.getElementById('pWinConfg').style.visibility='visible';
}

onload=init;


var pWinConfg = "<style>.pWinConfg{\n";
if(popWinFontFamily !== ''){
pWinConfg += "font-family:"+popWinFontFamily+";\n";
}
if(popWinFontSize !== ''){
pWinConfg += "font-size:"+popWinFontSize+";\n";
}
pWinConfg += "position:absolute;\n";
pWinConfg += "width:"+popWindowWidth+";\n";
pWinConfg += "height:"+popWindowHeight+";\n";
pWinConfg += "background-color:"+popWindowBackgroundColor+";\n";
if(centerPopUpWindow.toLowerCase() == 'yes'){
var popTop = (screen.height)?(screen.height-popWindowHeight-150)/2:100;
var popLeft = (screen.width)?(screen.width-popWindowWidth-32)/2:100;
pWinConfg += "top:"+popTop+";\n";
pWinConfg += "left:"+popLeft+";\n";
}
else{
pWinConfg += "top:"+popWindowPositionTop+";\n";
pWinConfg += "left:"+popWindowPositionLeft+";\n";
}
pWinConfg += "border-style:"+popWindowBorderStyle+";\n";
pWinConfg += "border-width:"+popWindowBorderWidth+";\n";
pWinConfg += "border-color:"+popWindowBorderColor+";\n";
pWinConfg += "padding:"+popWindowPadding+";\n";
pWinConfg += "visibility:hidden;\n";


if(popWindowShadowColor != 'none'){
pWinConfg += "@filter: progid:DXImageTransform.Microsoft.Shadow(color="+popWindowShadowColor+",direction=135);\n";
}

pWinConfg += "}<\/style>\n";
document.write(pWinConfg);
//-->

<!--
NS6 = (document.getElementById&&!document.all)
IE = (document.all)
NS = (navigator.appName=="Netscape" && navigator.appVersion.charAt(0)=="4")

tempBar='';barBuilt=0;lastY=0;sI=new Array();moving=setTimeout('null',1);

function moveOut() {if (parseInt(ssm.left)<0) {clearTimeout(moving);
moving = setTimeout('moveOut()', slideSpeed);slideMenu(10)}
else {clearTimeout(moving);moving=setTimeout('null',1)}};
function moveBack() {clearTimeout(moving);moving = setTimeout('moveBack1()', waitTime)}
function moveBack1() {if (parseInt(ssm.left)>(-menuWidth)) {clearTimeout(moving);
moving = setTimeout('moveBack1()', slideSpeed);slideMenu(-10)}
else {clearTimeout(moving);moving=setTimeout('null',1)}}
function slideMenu(num){ssm.left = parseInt(ssm.left)+num;
if (NS) {bssm.clip.right+=num;bssm2.clip.right+=num;
if(bssm.left+bssm.clip.right>document.width)document.width+=num}}

function makeStatic() {
winY=(IE)?document.body.scrollTop:window.pageYOffset;
if (winY!=lastY&&winY>YOffset-staticYOffset) {
smooth = .2 * (winY - lastY - YOffset + staticYOffset);}
else if (YOffset-staticYOffset+lastY>YOffset-staticYOffset&&winY<=YOffset-staticYOffset) {
smooth = .2 * (winY - lastY - (YOffset-(YOffset-winY)));}
else {smooth=0}
if(smooth > 0) smooth = Math.ceil(smooth);
else smooth = Math.floor(smooth);
bssm.top=parseInt(bssm.top)+smooth;
lastY = lastY+smooth;
setTimeout('makeStatic()', 10)}

function buildBar() {
if(barText.toLowerCase().indexOf('<img')>-1) {tempBar=barText}
else{for (b=0;b<barText.length;b++) {tempBar+=barText.charAt(b)+"<BR>"}}
document.write('<td align="center" rowspan="100" width="'+barWidth+'" bgcolor="'+barBGColor+'" valign="'+barVAlign+'" align=center><font face="'+barFontFamily+'" Size="'+barFontSize+'" COLOR="'+barFontColor+'"><B>'+tempBar+'</B></font></td>')}

function initSlide() {
if (NS6||IE){ssm=(NS6)?document.getElementById("thessm"):document.all("thessm");
bssm=(NS6)?document.getElementById("basessm").style:document.all("basessm").style;
bssm.clip="rect(0 "+ssm.offsetWidth+" "+(((IE)?document.body.clientHeight:0)+ssm.offsetHeight)+" 0)";
bssm.visibility="visible";ssm=ssm.style;if(NS6)bssm.top=YOffset}
else if (NS) {bssm=document.layers["basessm1"];
bssm2=bssm.document.layers["basessm2"];ssm=bssm2.document.layers["thessm"];
bssm2.clip.left=0;ssm.visibility = "show";}
if (menuIsStatic=="yes") makeStatic();}

function buildMenu() {
if (IE||NS6) {document.write('<DIV ID="basessm" style="visibility:hidden;Position : Absolute ;Left : '+XOffset+' ;Top : '+YOffset+' ;Z-Index : 20;width:'+(menuWidth+barWidth+10)+'"><DIV ID="thessm" style="Position : Absolute ;Left : '+(-menuWidth)+' ;Top : 0px ;Z-Index : 21;'+((IE)?"width:1px":"")+'" onmouseover="moveOut()" onmouseout="moveBack()">')}
if (NS) {document.write('<LAYER name="basessm1" top="'+YOffset+'" LEFT='+XOffset+' visibility="show" onload="initSlide()"><ILAYER name="basessm2"><LAYER visibility="hide" name="thessm" bgcolor="'+menuBGColor+'" left="'+(-menuWidth)+'" onmouseover="moveOut()" onmouseout="moveBack()">')}
if (NS6){document.write('<table border="0" cellpadding="0" cellspacing="0" width="'+(menuWidth+barWidth+2)+'" bgcolor="'+menuBGColor+'"><TR><TD>')}
document.write('<table border="0" cellpadding="0" cellspacing="1" width="'+(menuWidth+barWidth+2)+'" bgcolor="'+menuBGColor+'">');
for(i=0;i<sI.length;i++) {
if(!sI[i][3]){sI[i][3]=menuCols;sI[i][5]=menuWidth-1}
else if(sI[i][3]!=menuCols)sI[i][5]=Math.round(menuWidth*(sI[i][3]/menuCols)-1);
if(sI[i-1]&&sI[i-1][4]!="no"){document.write('<TR>')}
if(!sI[i][1]){
document.write('<TD BGCOLOR="'+hdrBGColor+'" ALIGN="'+hdrAlign+'" VALIGN="'+hdrVAlign+'" WIDTH="'+sI[i][5]+'" COLSPAN="'+sI[i][3]+'"><font face="'+hdrFontFamily+'" size="'+hdrFontSize+'" COLOR="'+hdrFontColor+'"><b>&nbsp;'+sI[i][0]+'</TD>')}
else {
// free javaScript examples at http://www.******************
if(!sI[i][2])sI[i][2]=linkTarget;
document.write('<TD BGCOLOR="'+linkBGColor+'" onmouseover="bgColor=\''+linkOverBGColor+'\'" onmouseout="bgColor=\''+linkBGColor+'\'" WIDTH="'+sI[i][5]+'" COLSPAN="'+sI[i][3]+'"><ILAYER><LAYER onmouseover="bgColor=\''+linkOverBGColor+'\'" onmouseout="bgColor=\''+linkBGColor+'\'" WIDTH="100%" ALIGN="'+linkAlign+'"><DIV ALIGN="'+linkAlign+'"><FONT face="'+linkFontFamily+'" Size="'+linkFontSize+'">&nbsp;<A HREF="'+sI[i][1]+'" target="'+sI[i][2]+'" CLASS="ssmItems">'+sI[i][0]+'</DIV></LAYER></ILAYER></TD>')}
if(sI[i][4]!="no"&&barBuilt==0){buildBar();barBuilt=1}
if(sI[i][4]!="no"){document.write('</TR>')}}
document.write('</table>')
if (NS6){document.write('</TD></TR></TABLE>')}
if (IE||NS6) {document.write('</DIV></DIV>');setTimeout('initSlide();', 1)}
if (NS) {document.write('</LAYER></ILAYER></LAYER>')}}

function addHdr(name, cols, endrow){sI[sI.length]=[name, '', '', cols, endrow]}

function addItem(name, link, target, cols, endrow){if(!link)link="javascript://";sI[sI.length]=[name, link, target, cols, endrow]}

//-->

Just FYI it seems to work in FF1.5

Thanks - yes it works OK in FF but not in IE I have discovered.

I see that winWidth is set in

getClientWidth()

which is called in body onload. The function itself looks ok, but I'd make an alert in it to make sure it is getting called in IE (I don't know why it wouldn't be), since winWidth undefined is the problem.

Just a thought to check.

david_kw

Yes, thanks, but the problem is that all three routines work flawlessly in IE if they are occurring separately - but not when all are on the same page.

I'm stumped. (not unusual!)

I downloaded your source to my local machine so I could edit it and put an alert in getClientWidth(). It doesn't fire in IE7 at load time. So winWidth is never getting set.

You can test this easily by going to your webpage then immediately resizing the window (which does call getClientWidth). At that point the code seems to work.

I have to admit I don't understand all the onload issues and how they work cross-browser. You have the onload in the body element. And you have a "onload=init;" in initPopup.js (which might not get called in IE7?).

The changes I made which seemed to work for IE7 are.

1) get rid of onload in the <body> tag
2) change in initPopup.js

onload=init;

to

window.onload=init;

3) add to the end of the init() function in initPopup.js

getClientWidth();

With those changes (I think that was all) it seemed to fix that error in IE7 and not break FF1.5 (that I could see).

Maybe someone with a greater understanding of how the onload functions are fired can explain why those changes make it work.

david_kw

I think that you have the answer in the double onloading that was going on. I remember (now) being told a while back that it was a no-no.

But it didn't seem to be a problem since FF had no trouble with it.

Anyhow, many thanks - your solution works perfectly and I have incorporated it into the total design. Great!

Terry