Hvilken floating metode
HejsaJeg vil gerne have min menu til at floate, når man scroller, men hvilken skal jeg vælge? Jeg har 2 typer jeg vil vælge i mellem, en DIV og en script. Jeg har kun fået scripten til at fungerer, hvis jeg har hele koden inde i layouten, og det ser ikke ret pænt ud i koden at se på. så jeg vil gerne have koden i en .js, hvilket jeg har prøvet men uden held.
Jeg har ikke haft held med at fået DIV til at virke. Grunden til at jeg gerne vil overveje den er, at den ser pænere ud når man scroller, i for hold til scripten der lave hop.
Hvilken skal jeg vælge? Og hvordan får jeg det til at fungerer? Min kriterer er at, den der bliver valgt skal ligge eksternt enten i en css eller script.
HER er script-koden:
<script>
if (!document.layers)
document.write('<div id="divStayTopLeft" style="position:absolute">')
</script>
<layer id="divStayTopLeft">
<!--EDIT BELOW CODE TO YOUR OWN MENU-->
<table border="1" width="130" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" bgcolor="#FFFFCC">
<p align="center"><b><font size="4">Menu</font></b></td>
</tr>
<tr>
<td width="100%" bgcolor="#FFFFFF">
<p align="left"> <a href="http://www.dynamicdrive.com">Dynamic Drive</a><br>
<a href="http://www.dynamicdrive.com/new.htm">What's New</a><br>
<a href="http://www.dynamicdrive.com/hot.htm">What's Hot</a><br>
<a href="http://www.dynamicdrive.com/faqs.htm">FAQs</a><br>
<a href="http://www.dynamicdrive.com/morezone/">More Zone</a></td>
</tr>
</table>
<!--END OF EDIT-->
</layer>
<script type="text/javascript">
/*
Floating Menu script- Roy Whittle (http://www.javascript-fx.com/)
Script featured on/available at http://www.dynamicdrive.com/
This notice must stay intact for use
*/
//Enter "frombottom" or "fromtop"
var verticalpos="frombottom"
if (!document.layers)
document.write('</div>')
function JSFX_FloatTopDiv()
{
var startX = 3,
startY = 150;
var ns = (navigator.appName.indexOf("Netscape") != -1);
var d = document;
function ml(id)
{
var el=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id];
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.left=x;this.style.top=y;};
el.x = startX;
if (verticalpos=="fromtop")
el.y = startY;
else{
el.y = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight;
el.y -= startY;
}
return el;
}
window.stayTopLeft=function()
{
if (verticalpos=="fromtop"){
var pY = ns ? pageYOffset : document.body.scrollTop;
ftlObj.y += (pY + startY - ftlObj.y)/8;
}
else{
var pY = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight;
ftlObj.y += (pY - startY - ftlObj.y)/8;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout("stayTopLeft()", 10);
}
ftlObj = ml("divStayTopLeft");
stayTopLeft();
}
JSFX_FloatTopDiv();
</script>
HER er DIV-koden:
<?xml version="1.0" encoding="iso-8859-1"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>scroll boxes</title>
<style type="text/css">
html,body {margin:0;padding:0;}
* html body {overflow:auto;}/* for ie only */
#box {
position: fixed;
top: 50px;
width:135px;
height:150px;
right: 47%;
z-index: 100;/* place this above the other elements */
background-color: blue;
color: red;
text-align: center;
border-style: solid;
border-width:10px;
}
* html #box {position:absolute;top:50px;}/*for ie*/
#content {
position:absolute;
overflow:auto;
top:0;
left:0;
width:100%;
top:0px;
bottom:0px;
}
* html #content { height:100%;position:static;}/* for ie */
</style>
</head>
<body>
<div id="content">
<div ID =" box2" style =" position: absolute; width: 100px; height: 900px; background-color: blue;
color:black; text-align: center; left: 173px; top: 16px; border-style: solid; border-width: 10px" >
This is box two
</div>
</div>
<div id="box">
box
</div>
</body>
</html>
