Solved

Javascript Array not functioning correctly...

Posted on 2004-09-23
12
208 Views
Last Modified: 2012-05-05
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();
}
0
Comment
Question by:Praesidium
  • 5
  • 5
  • 2
12 Comments
 
LVL 4

Expert Comment

by:MrClean21
ID: 12134758
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
 
LVL 63

Expert Comment

by:Zvonko
ID: 12135018
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
 
LVL 6

Author Comment

by:Praesidium
ID: 12142060
no,

Actually, drop_company and drop_services both exist in an include that is actually an XML aggregator.  
0
Comprehensive Backup Solutions for Microsoft

Acronis protects the complete Microsoft technology stack: Windows Server, Windows PC, laptop and Surface data; Microsoft business applications; Microsoft Hyper-V; Azure VMs; Microsoft Windows Server 2016; Microsoft Exchange 2016 and SQL Server 2016.

 
LVL 63

Expert Comment

by:Zvonko
ID: 12142082
change the parent parameter and tell us what error message you get.
0
 
LVL 6

Author Comment

by:Praesidium
ID: 12142164
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
 
LVL 63

Expert Comment

by:Zvonko
ID: 12142370
Is you page free visible? Can we see the URL?
0
 
LVL 6

Author Comment

by:Praesidium
ID: 12142503
sure...

eurofins.projects.gobigfishgo.com, the drops should function on the Services and Company buttons....
0
 
LVL 4

Expert Comment

by:MrClean21
ID: 12142625
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
 
LVL 6

Author Comment

by:Praesidium
ID: 12142890
Yes, the elements are nav_services and nav_company, I just named them the same thing for the sake of the example....
0
 
LVL 63

Accepted Solution

by:
Zvonko earned 500 total points
ID: 12143024
Chane your onmouse over and out event handlers to invoke different menus:

onmouseover="navOver(this, 1);"

0
 
LVL 6

Author Comment

by:Praesidium
ID: 12144412
changing the event handlers fixed my problem, I appreciate your help Zvonko, let me know if I can return the favor...  
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 12145118
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

Featured Post

Netscaler Common Configuration How To guides

If you use NetScaler you will want to see these guides. The NetScaler How To Guides show administrators how to get NetScaler up and configured by providing instructions for common scenarios and some not so common ones.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Avoid defining the variables in the global scope; trying to define them in a local function scope. Because:   • Look-up is performed every time a variable is accessed.   • Variables are resolved backwards from most specific to least specific scope…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

831 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question