Javascript Array not functioning correctly...

Okay, the first person who can tell me why my javascript in example A is working perfectly, and my javascript in example B, which only has 1 extra line in the drop array is breaking my page wins all the points...  Example B causes that drop to appear and never leave the screen, while example A works perfectly...  I can't seem to find the error in my code, so some fresh eyes are much appreciated...

EXAMPLE A ************************

// Constants
var DROP_ITEM_OFF_CLASS = "item-off";
var DROP_ITEM_ON_CLASS = "item-on";
var DROP_DISAPPEAR_MS = 3000;

var initDone = false;

// A Stack to keep track of window timeouts
var timeoutIDs = [];

// Array of objects describing the drop menus and their parent images, this is the only place I am adding code...
var drop = [
      [ 'drop_services', 'nav_services', new Image(), new Image() ]
];

//drop[0][2].src = '/Media/Images/nav-services3.gif'; ignore these, I was doing an image rollover before I changed it.
//drop[0][3].src = '/Media/Images/nav-services3.gif';
//drop[1][2].src = '/Media/Images/nav-services3.gif';
//drop[1][3].src = '/Media/Images/nav-services3.gif';

function Point(x, y) {
      this.x = x+15;
      this.y = y;
}

function getObj(id) {
      if(document.layers) {
            return document.layers[id];
      } else if(document.all) {
            return document.all[id];
      } else if(document.getElementById) {
            return document.getElementById(id);
      }
}

function getPosition(el) {
      if(document.all) {
            return getPositionIE(el);
      } else if(document.getElementById) {
            return getPositionNS(el);
      }
}

function getPositionNS(el) {
      return new Point(el.x, el.y);
}

function getPositionIE(el) {
      var r = new Point(el.offsetLeft, el.offsetTop);
      
      if(el.offsetParent) {
            var tmp = getPositionIE(el.offsetParent);
            r.x += tmp.x;
            r.y += tmp.y;
      }

      return r;
}

function dropItemOver(obj) {
      obj.className = DROP_ITEM_ON_CLASS;
}

function dropItemOut(obj) {
      obj.className = DROP_ITEM_OFF_CLASS;
}

function dropItemClick(obj) {
      document.location.href = obj.href;
}

function navOver(obj, index) {
      if(!initDone) return;
      
      dropHideAll();
      var target = getObj(drop[index][0]);
      target.style.display = 'block';
      timeoutIDs.push([ window.setTimeout('dropHideAll();', DROP_DISAPPEAR_MS), obj, index ]);
      obj.src = obj.src; //drop[index][3].src;
}

function navOut(obj, index) {
      // Noop
}

function dropHide(index) {
      var target = getObj(drop[index][0]);
      target.style.display = 'none';
}

function dropHideAll() {
      for(var i = 0; i < drop.length; i++) {
            var target = getObj(drop[i][0]);
            target.style.display = 'none';
      }
      while(timeoutIDs.length > 0) {
            var timeout = timeoutIDs.pop();
            window.clearTimeout(timeout[0]);
            //timeout[1].src = drop[timeout[2]][2].src;
      }
}

function putObj(parent, target, offsetX, offsetY) {
      var pt = getPosition(parent);
      target.style.top = new String(pt.y + offsetY) + 'px';
      target.style.left = new String(pt.x + offsetX) + 'px';
      return pt;
}

function initDrops() {
      for(var i = 0; i < drop.length; i++) {
            var el = getObj(drop[i][1]);
            var target = getObj(drop[i][0]);
            var pt;
            
            pt = putObj(el, target, 0, el.offsetHeight + 1);
      }
      initDone = true;
}

function init() {
      initDrops();
      dropHideAll();
}

EXAMPLE B **********************************
// Constants
var DROP_ITEM_OFF_CLASS = "item-off";
var DROP_ITEM_ON_CLASS = "item-on";
var DROP_DISAPPEAR_MS = 3000;

var initDone = false;

// A Stack to keep track of window timeouts
var timeoutIDs = [];

// Array of objects describing the drop menus and their parent images
var drop = [
      [ 'drop_services', 'nav_services', new Image(), new Image() ],
      [ 'drop_company', 'nav_services', new Image(), new Image() ]
];

//drop[0][2].src = '/Media/Images/nav-services3.gif';
//drop[0][3].src = '/Media/Images/nav-services3.gif';
//drop[1][2].src = '/Media/Images/nav-services3.gif';
//drop[1][3].src = '/Media/Images/nav-services3.gif';

function Point(x, y) {
      this.x = x+15;
      this.y = y;
}

function getObj(id) {
      if(document.layers) {
            return document.layers[id];
      } else if(document.all) {
            return document.all[id];
      } else if(document.getElementById) {
            return document.getElementById(id);
      }
}

function getPosition(el) {
      if(document.all) {
            return getPositionIE(el);
      } else if(document.getElementById) {
            return getPositionNS(el);
      }
}

function getPositionNS(el) {
      return new Point(el.x, el.y);
}

function getPositionIE(el) {
      var r = new Point(el.offsetLeft, el.offsetTop);
      
      if(el.offsetParent) {
            var tmp = getPositionIE(el.offsetParent);
            r.x += tmp.x;
            r.y += tmp.y;
      }

      return r;
}

function dropItemOver(obj) {
      obj.className = DROP_ITEM_ON_CLASS;
}

function dropItemOut(obj) {
      obj.className = DROP_ITEM_OFF_CLASS;
}

function dropItemClick(obj) {
      document.location.href = obj.href;
}

function navOver(obj, index) {
      if(!initDone) return;
      
      dropHideAll();
      var target = getObj(drop[index][0]);
      target.style.display = 'block';
      timeoutIDs.push([ window.setTimeout('dropHideAll();', DROP_DISAPPEAR_MS), obj, index ]);
      obj.src = obj.src; //drop[index][3].src;
}

function navOut(obj, index) {
      // Noop
}

function dropHide(index) {
      var target = getObj(drop[index][0]);
      target.style.display = 'none';
}

function dropHideAll() {
      for(var i = 0; i < drop.length; i++) {
            var target = getObj(drop[i][0]);
            target.style.display = 'none';
      }
      while(timeoutIDs.length > 0) {
            var timeout = timeoutIDs.pop();
            window.clearTimeout(timeout[0]);
            //timeout[1].src = drop[timeout[2]][2].src;
      }
}

function putObj(parent, target, offsetX, offsetY) {
      var pt = getPosition(parent);
      target.style.top = new String(pt.y + offsetY) + 'px';
      target.style.left = new String(pt.x + offsetX) + 'px';
      return pt;
}

function initDrops() {
      for(var i = 0; i < drop.length; i++) {
            var el = getObj(drop[i][1]);
            var target = getObj(drop[i][0]);
            var pt;
            
            pt = putObj(el, target, 0, el.offsetHeight + 1);
      }
      initDone = true;
}

function init() {
      initDrops();
      dropHideAll();
}
LVL 6
PraesidiumAsked:
Who is Participating?
 
ZvonkoConnect With a Mentor Systems architectCommented:
Chane your onmouse over and out event handlers to invoke different menus:

onmouseover="navOver(this, 1);"

0
 
MrClean21Commented:
Hi Praesidium,

    you're using the same id in the drop[0][1] and drop[1][1] :  'nav_services'

    You should change it to something else...

MrClean
0
 
ZvonkoSystems architectCommented:
I see only one problem in your script: you use the global object "parent" as local function parameter.
Change it to this:

function putObj(theParent, theTarget, offsetX, offsetY) {
    var pt = getPosition(theParent);
    theTarget.style.top = new String(pt.y + offsetY) + 'px';
    theTarget.style.left = new String(pt.x + offsetX) + 'px';
    return pt;
}

The difference between the two version is that you do not have the element with the id='drop_company' on your page body, (perhaps?)


0
Cloud Class® Course: MCSA MCSE Windows Server 2012

This course teaches how to install and configure Windows Server 2012 R2.  It is the first step on your path to becoming a Microsoft Certified Solutions Expert (MCSE).

 
PraesidiumAuthor Commented:
no,

Actually, drop_company and drop_services both exist in an include that is actually an XML aggregator.  
0
 
ZvonkoSystems architectCommented:
change the parent parameter and tell us what error message you get.
0
 
PraesidiumAuthor Commented:
no message...  however, now the company drop appears to be acting correctly, and the services drop is placing the div off the screen, and never calling it on mouseover...  I am seriously stumped...  there is no reason this should not be working...
0
 
ZvonkoSystems architectCommented:
Is you page free visible? Can we see the URL?
0
 
PraesidiumAuthor Commented:
sure...

eurofins.projects.gobigfishgo.com, the drops should function on the Services and Company buttons....
0
 
MrClean21Commented:
Hi Praesidium,

I don't want to push, but have you trie my solution ?

Change the second div with the id 'nav_services' to something like 'nav_services2' and change the value in the array.

The script is accessing it by getElementById which will cause trouble when you have 2 element with the same id.

Regards,
MrClean
0
 
PraesidiumAuthor Commented:
Yes, the elements are nav_services and nav_company, I just named them the same thing for the sake of the example....
0
 
PraesidiumAuthor Commented:
changing the event handlers fixed my problem, I appreciate your help Zvonko, let me know if I can return the favor...  
0
 
ZvonkoSystems architectCommented:
You did it already :-) Thanks for points.
If you like to do me one more favor then pleas drop a word of Feddback by clicking the small link next to my member name.
Cheers,
Zvonko
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.