Forum Moderators: open
I used to use a complex javascript to move a menu to a position on the page while scroling so menu would stay visible. However, I found the load time for this script too long. I am now trying a simpler script that instead of dropping the menu down to a postion (which creates nice (or annoying) animation) fixes the menu to a position. It works fine for IE, but not for Firefox and Safari as the menu just sits on top of the page, but doesn't 'float' so when scrolling it dissapears with the images on top of the page.
Here is the code:
<SCRIPT LANGUAGE="JavaScript">
function setVariables() {
if (navigator.appName == "Netscape") {
v=".top=";
dS="document.";
sD="";
y="window.pageYOffset";
}
else {
v=".pixelTop=";
dS="";
sD=".style";
y="document.body.scrollTop";
}
}
function checkLocation() {
object="object1";
yy=eval(y);
eval(dS+object+sD+v+yy);
setTimeout("checkLocation()",10);
}
</script>
I have been looking around for hours to find a code that works, but without success. I hope someone here can give me a clue.
Also: are there any lists available of js code with several alternatives for every browser?
Thanks heaps.
Firefox and Safari both support the CSS property 'position: fixed'. So if you simply add something like
div#myMenu {position: fixed;}
.. to your CSS, the menu will do what you want.
IE does not and form what I hear will not support 'fixed', so you'll still need the script for that browser.
Your CSS indeed works, however I already have the following code in place:
<div id="object1" style="position:absolute; visibility:show; left:0px; top:0px; z-index:2">
This works in IE, but won't work if I set the postion property to fixed. Should I create two sets of code, one for IE and one for the others?
I have been looking for simple code for ages.
The code I used to use had so many extra 'features' on it it took too long to load. The images now stick in all browsers.
Can I bother you with one more query?
Now the images (which are links and part of the navigation of the site) do not show rollover images any more and in IE the cursor does not change to a hand when hovering over the image.
So basically on MouseOver and On MouseOut do not work.
This code is part of the <div>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
#theDiv {position: fixed; left: 5px; top: 0px; Z-Index:100; cursor:hand }
</style>
<!--[if IE ]>
<style type="text/css">
#theDiv {position: absolute; Z-Index:100; cursor:hand}
</style>
<![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Untitled Document</title>
</head>
<body background="Images/backgr.jpg" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<script language="JScript">
if (document.recalc && document.body.attachEvent) {
theDiv.style.setExpression("top", "document.body.scrollTop + 150");
document.body.onscroll=function(){document.recalc(true)};
}
</script>
<div id="theDiv">
<table border="0" width="118" cellspacing="5" cellpadding="0">
<tr>
<td><br><br><br><br><br><br><br>
<p align="center"><a onMouseOver="changeImages( /*CMP*/'FAQbutton1',/*URL*/'Images/FAQbutton2.gif');return true" onMouseOut="changeImages( /*CMP*/'FAQbutton1',/*URL*/'Images/FAQbutton1.gif');return true" href="FAQ.html"><img src="Images/FAQbutton1.gif" alt="" name="FAQbutton1" height="25" width="118" border="0"></a>
</td></tr>
</table>
</div>
There is more in the table, but all just repetitions of the same above.
Outside this div tag on the bottom of the page there is another linked image. This one does show a hand when hovering, but there too no change of the image.
Cursor does change to hand in FireFox, but still no rollovers.
Thank you
<div id="theDiv">
bla
</div>
<script>
bla
</script>
Otherwise, it will throw an error and not execute any other scripts - like the mouseover handler.
Except it does not change anything. Still no hand cursor in IE and no MouseOver changes in any browsers.
Maybe you could try to run it and see if it works for you with your images?
Thanks again,
After I added that it all works except for IE for Mac version 5.2.
It works on IE (Windows version) Firefox and Safari.
Any clue what I can do to makeit work in IE for Mac?
Thanks
Personally, when using a site, although I find fixed position menus are really helpful, I find stupid, quivering, scripted ones more distracting than they are worthwhile. There are a good few position fixed CSS emulations about for IE5+. You might find them interesting.
Now why didn't I think of that one? I've even actually met the author, IRL... Thx, Bernard.
Even thouigh I would like the script to include all browsers, I might leave it at this as the menu still works, but w/o rollovers in IE 5 for Mac.
