...

View Full Version : Layer on top



ip23
07-03-2002, 03:33 PM
Hi,
I have a simple horizontal menu I created. Is there any way to set it up so it stays at the top when the user scrolls? My client would like this feature and I am little new to dhtml and don't know where to start.

Vladdy
07-03-2002, 03:44 PM
Common approach is to use frames.

You can make a "content" division with
position: absolute;
overflow: scroll;
and resize it every time the browser window is resized so it stays
within the client window.

Once M$ gets their, you know what, together and makes a CSS2 compliant browser the answer would be
position: fixed

ip23
07-03-2002, 03:49 PM
Just out of curiousity how would I get it to work in some browsers? just add that style to the layer?

adios
07-03-2002, 11:38 PM
Alternate method:

<html>
<head>
<title>untitled</title>
<style type="text/css">

#menu {
font: 800 36px monospace;
background: sienna;
border: 3px tan double;
}

#container {
position: relative;
top: 0px;
}

</style>
<script type="text/javascript" language="JavaScript">

var menu_el = null;
var menu_offset = 0; //distance from page top - match to #container top: (CSS)

function getEl(id) {
return document.all ? document.all(id) :
document.getElementById ? document.getElementById(id) :
document.layers ? document.layers[id] : null;
}

function moveToY(el) {
if (typeof document.all != 'undefined')
el.style.top = parseInt(document.body.scrollTop) + menu_offset;
else if (typeof document.getElementById != 'undefined' &&
typeof window.pageYOffset != 'undefined')
el.style.top = pageYOffset + menu_offset;
else if (el.pageY) el.pageY = pageYOffset + menu_offset;
}

function menu_static() {
menu_el = getEl('container');
if (typeof window.onscroll != 'undefined' && menu_el)
onscroll = function() {
moveToY(menu_el);
}
else if (document.layers) setInterval('moveToY(menu_el)',10);
}

onload = menu_static;

</script>
</head>
<body>
<div align="center">
<div id="container">
<span id="menu">||||||||||||||||||||||||</span>
</div>
_____<br>_____<br>_____<br>_____<br>_____<br>_____<br>_____<br>_____<br>_____<br>_____<br>
_____<br>_____<br>_____<br>_____<br>_____<br>_____<br>_____<br>_____<br>_____<br>_____<br>
_____<br>_____<br>_____<br>_____<br>_____<br>_____<br>_____<br>_____<br>_____<br>_____<br>
_____<br>_____<br>_____<br>_____<br>_____<br>_____<br>_____<br>_____<br>_____<br>_____<br>
_____<br>_____<br>_____<br>_____<br>_____<br>_____<br>_____<br>_____<br>_____<br>_____<br>
_____<br>_____<br>_____<br>_____<br>_____<br>_____<br>_____<br>_____<br>_____<br>_____<br>
</div>
</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum