Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Regular Coder tpeck's Avatar
    Join Date
    Oct 2002
    Location
    Sydney, Australia
    Posts
    864
    Thanks
    51
    Thanked 6 Times in 5 Posts

    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:

    Code:
    <!--
    // 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;
    }
    
    //-->
    Code:
    <!--
    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);
    //-->
    Code:
    <!--
    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]}
    
    //-->
    The difference between genius and stupidity is that genius has its limits. (Albert Einstein)

  • #2
    Senior Coder
    Join Date
    Nov 2006
    Posts
    1,000
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Just FYI it seems to work in FF1.5

  • #3
    Regular Coder tpeck's Avatar
    Join Date
    Oct 2002
    Location
    Sydney, Australia
    Posts
    864
    Thanks
    51
    Thanked 6 Times in 5 Posts
    Thanks - yes it works OK in FF but not in IE I have discovered.
    The difference between genius and stupidity is that genius has its limits. (Albert Einstein)

  • #4
    Senior Coder
    Join Date
    Nov 2006
    Posts
    1,000
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #5
    Regular Coder tpeck's Avatar
    Join Date
    Oct 2002
    Location
    Sydney, Australia
    Posts
    864
    Thanks
    51
    Thanked 6 Times in 5 Posts
    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!)
    The difference between genius and stupidity is that genius has its limits. (Albert Einstein)

  • #6
    Senior Coder
    Join Date
    Nov 2006
    Posts
    1,000
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #7
    Regular Coder tpeck's Avatar
    Join Date
    Oct 2002
    Location
    Sydney, Australia
    Posts
    864
    Thanks
    51
    Thanked 6 Times in 5 Posts
    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
    The difference between genius and stupidity is that genius has its limits. (Albert Einstein)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •