?
Solved

Javascript Array not functioning correctly...

Posted on 2004-09-23
12
Medium Priority
?
235 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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
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 2000 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

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
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…
Suggested Courses

840 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