nicht angemeldet
Moin moin,
für meine Ausbildung zum IT-Elektr. haben ich die Aufgabe bekommen in eine vorhandene xhtml Seite eine Menü einzubauen, das seitlich mitläuft. In diesem Menü soll zu einem späteren Zeitpunkt, was ich schon eingebaut habe, eine Wetterapp erscheinen.
Als Grundlage diente <http://de.selfhtml.org/dhtml/beispiele/navigation.htm@title=Dynamische Navigation>.
Es wird auch wie gewünscht angezeigt. Jedoch wenn man in der Seite scrollt, dann bleibt das Menü starr an einem Punkt. Wie kann ich das ändern, das das auch in der xhtml Seite "mitläuft"?
Habe mal meinen Code angehängt.
VG Tanker Tom
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>Test dhtml </title>
<link href="css/test.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="css/dhtml.js"></script>
<!-- eingefügt-->
<script type="text/javascript">
function Menue () {
if (typeof window.pageYOffset == "number") {
if (NS4) {
getElement("id", "Nav").top = window.pageYOffset + 50;
} else {
getElement("id", "Nav").style.top = window.pageYOffset + 50;
}
} else {
if (typeof document.body.scrollTop == "number")
getElement("id", "Nav").style.top = document.body.scrollTop + 50;
}
if (OP)
getElement("id", "NavLinks").style.pixelTop = NavLinksPos;
if (NS4) {
getElement("id", "Nav").visibility = "show";
} else {
getElement("id", "Nav").style.visibility = "visible";
}
}
function noMenue () {
if (NS4) {
getElement("id", "Nav").visibility = "hide";
} else {
getElement("id", "Nav").style.visibility = "hidden";
}
}
function handleMove (ev) {
if (!ev)
ev = window.event;
var mausposition = ev.pageX ? ev.pageX : ev.clientX;
if (mausposition < 20) {
Menue();
} else {
if (mausposition > 250) {
noMenue();
}
}
}
function Event_init () {
if (document.addEventListener) {
document.addEventListener("mousemove", handleMove, true);
} else {
if (NS4) {
document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = handleMove;
} else {
document.body.onmousemove = handleMove;
}
}
if (OP) {
NavLinksPos = 42; // Position des Bereiches NavLinks
getElement("id", "NavLinks").style.pixelTop = NavLinksPos;
}
}
</script>
</head>
<body onload="Event_init()">
<div id="Nav">
<img src="css/navigation.gif" width="250" height="330" border="0" alt="" />
<div id="NavLinks">
<iframe src="wetter.php" frameborder="0" height="270" width="100%" scrolling="no"></iframe></div>
</div>
<p> </p><p> </p><p> </p><p> </p><p> </p><p> </p>
<p> </p><p> </p><p> </p><p> </p><p> </p><p> </p>
<p> </p><p> </p><p> </p><p> </p><p> </p><p> </p>
<p> </p><p> </p><p> </p><p> </p><p> </p><p> </p>
<p> </p><p> </p><p> </p><p> </p><p> </p><p> </p>
<p>Na, das dürfte reichen :-)</p>
</body>
</html>
und hier die dhtml Bibliothek
/* DHTML-Bibliothek */
var DHTML = false, DOM = false, MSIE4 = false, NS4 = false, OP = false;
if (document.getElementById) {
DHTML = true;
DOM = true;
} else {
if (document.all) {
DHTML = true;
MSIE4 = true;
} else {
if (document.layers) {
DHTML = true;
NS4 = true;
}
}
}
if (window.opera) {
OP = true;
}
function getElement (Mode, Identifier, ElementNumber) {
var Element, ElementList;
if (DOM) {
if (Mode.toLowerCase() == "id") {
Element = document.getElementById(Identifier);
if (!Element) {
Element = false;
}
return Element;
}
if (Mode.toLowerCase() == "name") {
ElementList = document.getElementsByName(Identifier);
Element = ElementList[ElementNumber];
if (!Element) {
Element = false;
}
return Element;
}
if (Mode.toLowerCase() == "tagname") {
ElementList = document.getElementsByTagName(Identifier);
Element = ElementList[ElementNumber];
if (!Element) {
Element = false;
}
return Element;
}
return false;
}
if (MSIE4) {
if (Mode.toLowerCase() == "id" || Mode.toLowerCase() == "name") {
Element = document.all(Identifier);
if (!Element) {
Element = false;
}
return Element;
}
if (Mode.toLowerCase() == "tagname") {
ElementList = document.all.tags(Identifier);
Element = ElementList[ElementNumber];
if (!Element) {
Element = false;
}
return Element;
}
return false;
}
if (NS4) {
if (Mode.toLowerCase() == "id" || Mode.toLowerCase() == "name") {
Element = document[Identifier];
if (!Element) {
Element = document.anchors[Identifier];
}
if (!Element) {
Element = false;
}
return Element;
}
if (Mode.toLowerCase() == "layerindex") {
Element = document.layers[Identifier];
if (!Element) {
Element = false;
}
return Element;
}
return false;
}
return false;
}
function getAttribute (Mode, Identifier, ElementNumber, AttributeName) {
var Attribute;
var Element = getElement(Mode, Identifier, ElementNumber);
if (!Element) {
return false;
}
if (DOM || MSIE4) {
Attribute = Element.getAttribute(AttributeName);
return Attribute;
}
if (NS4) {
Attribute = Element[AttributeName]
if (!Attribute) {
Attribute = false;
}
return Attribute;
}
return false;
}
function getContent (Mode, Identifier, ElementNumber) {
var Content;
var Element = getElement(Mode, Identifier, ElementNumber);
if (!Element) {
return false;
}
if (DOM && Element.firstChild) {
if (Element.firstChild.nodeType == 3) {
Content = Element.firstChild.nodeValue;
} else {
Content = "";
}
return Content;
}
if (MSIE4) {
Content = Element.innerText;
return Content;
}
return false;
}
function setContent (Mode, Identifier, ElementNumber, Text) {
var Element = getElement(Mode, Identifier, ElementNumber);
if (!Element) {
return false;
}
if (DOM && Element.firstChild) {
Element.firstChild.nodeValue = Text;
return true;
}
if (MSIE4) {
Element.innerText = Text;
return true;
}
if (NS4) {
Element.document.open();
Element.document.write(Text);
Element.document.close();
return true;
}
}