Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Javascript Array not functioning correctly...

Posted on 2004-09-23
12
Medium Priority
?
233 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
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: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering 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

Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
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…

609 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