nicht angemeldet
Frage zum scrollen dhtml
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;
}
}
-
für meine Ausbildung zum IT-Elektr.
IT-Elektriker? Was es alles gibt.
haben ich die Aufgabe bekommen in eine vorhandene xhtml-Seite ein Menü einzubauen, das seitlich mitläuft.
Als Grundlage diente <http://de.selfhtml.org/dhtml/beispiele/navigation.htm@title=Dynamische Navigation>.
Den Kram solltest du höchstens als abschreckendes Beispiel nehmen. Die Unterstützung für den allenfalls noch in homöopathischen Dosen vorkommenden Netscape 4 und die nicht einmal mehr mit diesem Attribut zu führenden Uralt-Operas ist ja rührend, aber unterm Strich hast du da nur einen Haufen Code-Blähungen, mit denen in etlichen Zeilen etwas bewerktstelligt wird, was in der Realität nur wenige Zeichen benötigt. (Wenn du schon eine "DHTML-Bibliothek" suchst, dann nimm' wenigstens etwas Aktuelles; unter javascriptoo.com sind in der Auswahl Selector einige aufgeführt.)
Für das Zumüllen des globalen Namensraumes mit Funktionen und Variablen bekommst du auch keinen Preis. body.onLoad ist aus Gründen, die im Netz dutzendfach zu lesen sind, im Allgemeinen bäh.
Und das Allerschlimmste: Für die demonstrierte Funktionalität reicht ein div#nav:hover mit zwei, drei Zeilen Tüddelü in CSS und HTML.Habe mal meinen Code angehängt.
Mit deinem Code funktioniert hier leider nichts, was zum Teil sicher an den fehlenden CSS-Daten liegt. Insofern kann ich nicht nachvollziehen, was du vorhast, denn der Beispielcode blendet ein Menü ein, wenn man die Maus an den linken Fensterrand bewegt, du hingegen wolltest ein Menü, "das seitlich mitläuft". Falls du damit meinst, das es auf dem Bildschirm kleben bleibt: Probiere position:fixed.