Antworten auf deine Fragen:
Neues Thema erstellen

Hilfe! das Menü bleibt beim Scrolllen stehen

cmfa

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

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>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>
<p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>
<p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>
<p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>
<p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>

<p>Na, das d&uuml;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;
  }
}
 

Myhar

Hat es drauf

Was genau möchtest du erreichen? Möchtest du nun, dass das Menü immer rechts angezeigt wird (dann bleibt es starr an einem Punk, zB immer rechts oben im Eck) oder wie genau soll es mitscrollen? Das könntest du ruhig genauer beschreiben.
Allerdings kann ich dir nur raten, das JS/HTML zu entfernen, das ist veraltet. Du prüfst hier auf den Netscape Version 4 oder Internet Explorer in Version 4... Du solltest dich also dringend nach einem aktuellen Tutorial umsehen. Je nachdem, was du genau umsetzen willst, reicht es auch aus, nur CSS einzusetzen.
 

cmfa

Nicht mehr ganz neu hier

Danke für die Antwort. Das es ein älteres Script ist war mir schon klar. Ich möchte es nur erreichen das es wie im Beispiellink funktioniert. Leider habe ich kein ähnliches Tutorial dazu gefunden. Wie könnte man so etwas mit mit "modernen" Mitteln umsetzen?

CMFA
 

cmfa

Nicht mehr ganz neu hier

hier ist die Seite einsehbar. Das Menü sollte an jeder Stelle aufrufbar sein. Es bleibt aber im oberen Teil. In der Beispielseite aus dem ersten Pos. erseint es überrall
 

cmfa

Nicht mehr ganz neu hier

das mit dem fixed habe ich hinbekommen. Jedoch weiß ich nicht wo ich das hover einbauen soll hast du hier noch einen Tip für mich?
 

fakerer

Aktives Mitglied

Hi, ich weis zwar nicht was du mit dem hover vor hast, aber wenn ich das richtig verstanden habe musst du bei deiner #Nav die position auf fixed umstellen du hast dort jetzt absoulte
 

Myhar

Hat es drauf

wo ich das hover einbaue soll

Einfach gesagt: Da wo du es brauchst. Nachdem dein Menü erscheinen soll, wenn du über den linken Rand fährst, brauchst du am linken Rand ein Element (<div id="links"></div> )
Das kannst du nun absolut an den linken Rand positionieren und darauf dann das :hover (#links:hover) anwenden. Damit solltest du den dir erwünschten Effekt erzielen.
 

cmfa

Nicht mehr ganz neu hier

so das mit dem Hover konnte ich einiger Maßen lösen. Jedoch wird die App immer angezeigt und nicht wie gewünscht erst wenn man den hover . wo muss die jetz hin ?
@cythux wir richtig angezeigt ;-)
 

cythux

Aktives Mitglied

auch in FF oder Opera Mobile Emulator nur eine Weisse Stelle im Browser
Am besten nimmt du mal mit Mobil Boilerplate vor

und was du suchst ist etwas in Richtung OffCanvas
 
Zuletzt bearbeitet:
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Keine Mitglieder online.

Statistik des Forums

Themen
118.635
Beiträge
1.538.449
Mitglieder
67.556
Neuestes Mitglied
Ggirl
Oben