Praesidium
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-service s3.gif'; ignore these, I was doing an image rollover before I changed it.
//drop[0][3].src = '/Media/Images/nav-service s3.gif';
//drop[1][2].src = '/Media/Images/nav-service s3.gif';
//drop[1][3].src = '/Media/Images/nav-service s3.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.offsetPar ent);
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('dropHid eAll();', 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(timeou t[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-service s3.gif';
//drop[0][3].src = '/Media/Images/nav-service s3.gif';
//drop[1][2].src = '/Media/Images/nav-service s3.gif';
//drop[1][3].src = '/Media/Images/nav-service s3.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.offsetPar ent);
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('dropHid eAll();', 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(timeou t[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 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-service
//drop[0][3].src = '/Media/Images/nav-service
//drop[1][2].src = '/Media/Images/nav-service
//drop[1][3].src = '/Media/Images/nav-service
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.offsetPar
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('dropHid
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(timeou
//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-service
//drop[0][3].src = '/Media/Images/nav-service
//drop[1][2].src = '/Media/Images/nav-service
//drop[1][3].src = '/Media/Images/nav-service
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.offsetPar
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('dropHid
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(timeou
//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();
}
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?)
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?)
ASKER
no,
Actually, drop_company and drop_services both exist in an include that is actually an XML aggregator.
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.
ASKER
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?
ASKER
sure...
eurofins.projects.gobigfis hgo.com, the drops should function on the Services and Company buttons....
eurofins.projects.gobigfis
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
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
ASKER
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
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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
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
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