Click to See Complete Forum and Search --> : NN and IE Layer repositioning (style.left) help!!!!


nisgar2k
07-01-2003, 06:38 PM
hi
Have been developing a javascript menu with 1 sub menu. The main part of the menu is in a DIV tag within a table so it is in the correct position however the submenu is another floating layer using a DIV tag and style.left to position it. The following functions show how it is displayed and positioned.
After changing the getObj function to work with netscape all was fine in both IE and NN. However another function written that repositions the submenu layer (the 2nd DIV tag) according to browser dimensions fails to work in NN but is still fine in IE. As can be seen the style.visibility property seems to work fine for both browsers however the style.left property doesnt seem to be able to be written to in NN. Where am i going wrong with this? As can be seen i have tried an alternate method that is commented out but still no luck in NN all i get when the property is viewed is the original position of 150px in the style.left attribute.
Can someone help i have been stuck on this for a while and would like it working nicely and correctly in as many browsers as possible. Also would most appreciate if someone could explain the differences to make this compatible in opera as the submenu layer needs to be able to open accross an iframe.
Thanks for any help

Nick Ford


/* Set of functions that handle the operation of a menu consisting of 2 layers
* Written by Nicholas Ford nisgar2k@hotmail.com
*/


/* Browser type and menu timer variables */
var isNetscape = (navigator.appName == "Netscape");
var timer;


/* This gets the layer object passed according to browser type */
function getObj(obj) {
if(isNetscape) {
retLayer = document.getElementById(obj).style;
//retLayer = document.layers[obj];
}else {
retLayer = eval("document.all." + obj + ".style");
}
return retLayer;
}


/* Makes the passed layer visible */
function show(layer) {
obj = getObj(layer);
obj.visibility = "visible";
}


/* Hides the passed layer */
function hide(layer) {
obj = getObj(layer);
obj.visibility = "hidden";
}


/* Find the availble width of the browser content window */
function getScreenWidth() {
available = (isNetscape) ? window.innerWidth : document.body.clientWidth;
return available;
}


/* Show or hide the submenu according to true or false passed */
function menuRoll(status) {
if (status) {
show("submenu0");
}else {
hide("submenu0");
}
}


/* Reposition the submenu on the page according to the size of the window */
function repositionMenu(isResize) {
obj = getObj("submenu0");
curW = getScreenWidth();

if(curW > 800) {
/*Half the browser width finds the centre of the page - half the page layout + the offset*/
newL = (curW/2 - 360) + 140;
obj.left = newL;
//document.getElementById("submenu").left = newL
}else {
obj.left = 150;
}
}

Jona
07-01-2003, 07:45 PM
Perhaps you should try:


if(curW > 800) {
/*Half the browser width finds the centre of the page - half the page layout + the offset*/
newL = (curW/2 - 360) + 140;
obj.left = newL+"px";
//document.getElementById("submenu").left = newL+"px";
}else {
obj.left = 150+"px";
}
}


[J]ona