Positionering på skærm i forhold til skærmopløsning /vinduets str
Jeg har følgende kode, der giver en menu, der glider ind fra toppen.Jeg skal have det til at virke, så det placerer sig samme sted, uanset skærmopløsning og uanset om vinduet er gjort større eller mindre.
Er det helt umuligt???
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Slide-down-menu</title>
<meta name="Generator" content="Stone's WebWriter 4">
<meta name="keywords" content="roenving,http://www.eksperten.dk/spm/434485">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->
<!-- Original: David Sosnowski (support@codelifter.com) -->
<!-- Web Site: http://www.codelifter.com -->
<!-- Modified 20031201 to support Slide-down instead of Glide-in-->
<!--
Put the <style> script in the <head> of your page.
Set up the border, background-color, padding, and
font elements as needed. Leave the position as is.
Width and height can be set as auto, or you can
specify these in pixels.
//-->
<style>
#menuShow{
border: 1px solid #666666;
background-color: #111111;
padding: 13px;
font-size: 13px;
font-family: Verdana, Arial;
position: absolute;
width: auto;
height: auto;
}
#menuSelect{
border: 1px solid #666666;
background-color: #111111;
padding: 13px;
font-size: 13px;
font-family: Verdana, Arial;
position: absolute;
width: auto;
height: auto;
}
</style>
</head>
<body>
<!--
Place the two <div>'s below in the <body> of your code.
(Normally, this will be immediately after the <body>
tag.) The menuShow div will contain your links; change
the text, links, and targets as needed.
//-->
<div id="menuSelect">
<a href="#" onclick="moveOnMenu();moveOffSelector()">
<img src="icon.gif" width="28" height="28" border="0"></a>
</div>
<div id="menuShow">
<a href="#" onclick="moveOffMenu();moveOnSelector()">
<img src="icon.gif" width="28" height="28" border="0"></a>
<br>
<br>
<a href="http://www.codelifter.com">Menu Item A</a><br>
<a href="http://www.codelifter.com">Menu Item B</a><br>
<a href="http://www.codelifter.com">Menu Item C</a><br>
<br>
<a href="http://www.codelifter.com">Menu Item D</a><br>
<a href="http://www.codelifter.com">Menu Item E</a><br>
<br>
<a href="http://www.codelifter.com">Menu Item F</a><br>
<a href="http://www.codelifter.com">Menu Item G</a><br>
<a href="http://www.codelifter.com">Menu Item H</a><br>
</div>
<!--
Put the following script immediately *after* the
<div>'s (above) in your page. Set the variables as
indicated in the script.
//-->
<script language="JavaScript">
<!-- Original: David Sosnowski (support@codelifter.com) -->
<!-- Web Site: http://www.codelifter.com -->
<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->
<!-- Begin
// (C) 2001 www.CodeLifter.com
// http://www.codelifter.com
// Free for all users, but leave in this header.
// Set Show to "yes" to show the menu on start-up.
// Set Show to "no" to show the selector on start-up.
Show ="yes";
// Set OffX in pixels to a negative number
// somewhat larger than the height of the menu.
var OffY = -300;
// Set the PosX and PosY variables
// to the location on the screen where the
// menu should position (in pixels) when stopped.
var PosX = 250;
var PosY = 100;
// Usually, use the settings shown; but you can
// change the speed and the increment of motion
// across the screen, below.
var speed = 1;
var increment = 1;
var incrementNS4 = 5; // for slower NS4 browsers
// do not edit below this line
// ===========================
var is_NS = navigator.appName=="Netscape";
var is_Ver = parseInt(navigator.appVersion);
var is_NS4 = is_NS&&is_Ver>=4&&is_Ver<5;
var is_NS5up = is_NS&&is_Ver>=5;
var MenuY = OffY;
var SelY = PosY;
var sPosY = PosY;
var sOffY = OffY;
if (Show == "yes") {
sPosY = OffY;
sOffY = PosY;
MenuY = sOffY;
SelY = sPosY;
}
if (is_NS4) {
increment = incrementNS4;
Lq = "document.layers.";
Sq = "";
eval(Lq+'menuSelect'+Sq+'.top=sPosY');
eval(Lq+'menuShow'+Sq+'.top=sOffY');
eval(Lq+'menuSelect'+Sq+'.left=PosX');
eval(Lq+'menuShow'+Sq+'.left=PosX');
} else {
Lq = "document.all.";
Sq = ".style";
document.getElementById('menuSelect').style.top = sPosY+"px";
document.getElementById('menuShow').style.top = sOffY+"px";
document.getElementById('menuSelect').style.left = PosX+"px";
document.getElementById('menuShow').style.left = PosX+"px";
}
function moveOnMenu() {
if (MenuY < PosY) {
MenuY = MenuY + increment;
if (is_NS5up) {
document.getElementById('menuShow').style.top = MenuY+"px";
} else {
eval(Lq+'menuShow'+Sq+'.top=MenuY');
}
setTimeout('moveOnMenu()',speed);
}
}
function moveOffMenu() {
if (MenuY > OffY) {
MenuY = MenuY - increment;
if (is_NS5up) {
document.getElementById('menuShow').style.top = MenuY+"px";
} else {
eval(Lq+'menuShow'+Sq+'.top=MenuY');
}
setTimeout('moveOffMenu()',speed);
}
}
function moveOffSelector() {
if (SelY > OffY) {
SelY = SelY - increment;
if (is_NS5up) {
document.getElementById('menuSelect').style.top = SelY+"px";
} else {
eval(Lq+'menuSelect'+Sq+'.top=SelY');
}
setTimeout('moveOffSelector()',speed);
}
}
function moveOnSelector() {
if (SelY < PosY) {
SelY = SelY + increment;
if (is_NS5up) {
document.getElementById('menuSelect').style.top = SelY+"px";
} else {
eval(Lq+'menuSelect'+Sq+'.top=SelY');
}
setTimeout('moveOnSelector()',speed);
}
}
// End -->
</script>
</body>
</html>
