Nicht mehr ganz neu hier
Moin moin,
meinen Kronsohn hat in der Ausbildung zum IT-Elektr. die Aufgabe bekommen in eine vorhandene xhtml Seite eine Menü einzubauen, das seitlich mitläuft. In diesem Menü soll zu einem späteren Zeitpunkt eine Wetterapp erscheinen.
Als Grundlage diente .
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 CMFA
Der Quellcode und die DHTML-Bibliothek
meinen Kronsohn hat in der Ausbildung zum IT-Elektr. die Aufgabe bekommen in eine vorhandene xhtml Seite eine Menü einzubauen, das seitlich mitläuft. In diesem Menü soll zu einem späteren Zeitpunkt eine Wetterapp erscheinen.
Als Grundlage diente .
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 CMFA
Der Quellcode und die DHTML-Bibliothek
HTML:
<!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>
Code:
/* 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;
}
}