Click to See Complete Forum and Search --> : Menu positioning in Netscape HELP!


nisgar2k
07-06-2003, 04:29 PM
The DIV tag below contains the layer information for my submenu that extends from a fixed point on my webpage ie a fixed menu in a table.

<div id=submenu0 style="LEFT: 150px; POSITION: absolute; TOP: 210px; Z-INDEX: 1; overflow: auto; visibility: hidden;">

The javascript below is called when the page is resized loaded etc to repositioin the 'left' style attribute of the div tag in order to keep the submenu in the correct position depending on screen resolution etc.

/* 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() {
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;
}else {
obj.left = 150;
}
}


The above code works correctly on IE however on netscape the repositioning is incorrect and fails to update the left style attribute! can someone help with a solution for all the browser versions and briefly explain the whole layering div etc information for netscape opera and ie as i am still very much in the infancy stages of learning to write cross browser solutions. Also I would most appreciate someone telling me why when my submenu wont appears above an iframe in opera it is partially invisible as if the iframe is on top!
Thanks for any fixs in advance

Nick Ford

Khalid Ali
07-06-2003, 06:48 PM
Code looks fine at a glance,however you should append the width and heights with "px" string ..

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";
}else {
obj.left = 150+"px";
}

this should take care of it

nisgar2k
07-07-2003, 12:19 PM
Thanks for the response to my question it worked straight away doh! should have seent that, ah well cant catch them all.
It fixed the problem in Netscape but now I have another one linked to the same thing.
When I resize the page after activating the layer once and then activate the layer again the layer appears smaller as if it follows the pages dimensions as can be seen in the attached image. However after resizing if i refresh the browser the layer goes back to normal. Is there any fix for this i dont particularly want to send a refresh request for the page every time i resize!!!

Also still got the same problem in opera that the layer appears below the iframe to the right of it. It should display on top of it like in IE and NS. Grrr cross browser solutions!!!
Any speedy help much appreciated once again as last time.