Link to home
Start Free TrialLog in
Avatar of Praesidium
PraesidiumFlag for United States of America

asked on

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();
}
Avatar of MrClean21
MrClean21

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
Avatar of Zvonko
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?)


Avatar of Praesidium

ASKER

no,

Actually, drop_company and drop_services both exist in an include that is actually an XML aggregator.  
change the parent parameter and tell us what error message you get.
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...
Is you page free visible? Can we see the URL?
sure...

eurofins.projects.gobigfishgo.com, the drops should function on the Services and Company buttons....
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
Yes, the elements are nav_services and nav_company, I just named them the same thing for the sake of the example....
ASKER CERTIFIED SOLUTION
Avatar of Zvonko
Zvonko
Flag of North Macedonia image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
changing the event handlers fixed my problem, I appreciate your help Zvonko, let me know if I can return the favor...  
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