nicht angemeldet
2 oder mehr Dynamishce Tabellen
Hallo,
ich wollt auf meine Seite für den Informatikunterricht mehrere Dynamische Tabellen einrichten, nur weiß ich ncith, ob ich da dann etwas im javasrcript oder was ich im Quelltext ändern muss.
Könnt ihr mir bitte helfen?
Danke.
-
Hallo Philipp,
ich wollt auf meine Seite für den Informatikunterricht mehrere Dynamische Tabellen einrichten,
was verstehst Du unter "Dynamische Tabellen"?
nur weiß ich ncith, ob ich da dann etwas im javasrcript oder was ich im Quelltext ändern muss.
Meine Glaskugel leistet derzeit ihren jährlichen freiwilligen Dienst als Weihnachtsschmuck (FDW), ich kann sie leider nicht befragen ;-)
Könnt ihr mir bitte helfen?
Kannst Du bitte genauer erklären, was Du willst und vielleicht auch etwas Beispielcode, den Du bereits hast posten.
Freundliche Grüße
Vinzenz
-
Hi Vinzenz,
also unter Dynamsiche Tabellen verstehe ich die, wie in SELFHTML unter dem Menu Dynamisches HTML zu finden ist. Dies ist der Quelltxt dazuaus SELFHTML :
Zitat:
,,<html><head><title>Test</title>
<script type="text/javascript" src="dhtml.js"></script>
<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>
<style type="text/css">
body { color:black; background-color:white; background-image:url(navigation_back.gif);
margin:0; padding:20px 50px; font-family:Tahoma,sans-serif; }
#Nav { position:absolute; top:50px; left:0; visibility:hidden; }
#NavLinks { position:absolute; top:42px; left:42px; }
#Nav a:link {color:#000080; font-weight:bold; font-size:13px; text-decoration:none; }
#Nav a:visited { color:#000080; font-weight:bold; font-size:13px; text-decoration:none; }
#Nav a:hover { color:#FFFFFF; background-color:#000080; font-weight:bold;
font-size:13px; text-decoration:none; }
#Nav a:active { color:#000080; font-weight:bold; font-size:13px; text-decoration:none; }
</style>
</head>
<body onLoad="Event_init()"><div id="Nav">
<img src="navigation.gif" width="250" height="450" border="0" alt="">
<div id="NavLinks">
<a href="http://de.selfhtml.org/">SELFHTML</a><br>
<a href="http://aktuell.de.selfhtml.org/">SELFHTML aktuell</a><br>
<a href="http://forum.de.selfhtml.org/">SELFHTML-Forum</a><br>
<a href="http://aktuell.de.selfhtml.org/tippstricks/">Tipps & Tricks</a><br>
<a href="http://aktuell.de.selfhtml.org/artikel/">Feature-Artikel</a><br>
</div>
</div><h1>Die Seite mit der pfiffigen Navigation</h1>
<p>Einfach mit die Maus Richtung linken Fensterrand bewegen.
Um das Menü wieder wegzubekommen, Maus wieder zum rechten Fensterrand bewegen.</p><p>Und jetzt kommen noch etliche leere Absätze, damit auch sichtbar wird,
dass das Menü immer an der gleichen Stelle angezeigt wird, egal wie weit man scrollt.</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><p>Na, das dürfte reichen :-)</p>
</body>
</html>"Das sieht dann so ungefähr aus:
[URL=http://imageshack.us][IMG]http://img455.imageshack.us/img455/1773/bild0023wx.jpg[/IMG][/URL]So davon hätte ich gerne zwei oder mehr, also das man zum Beispiel untereinander zwei Leisten hat, bei denen, wenn man mit der Maus drüberfährt, je eine Navigationsleiste erscheint. Die Leisten können auch nebeneinander sein, hauptsache es erscheinen dann mehrere von diesen Navigationsleisten auf einer Seite.
Besser kann ich es jetzt nicht beschreiben.
Beispielcode hab ich nur den von SELFHTML.-
So hier ist nochmal das Bild.
Sry für Doppelpost. -
Hallo Philipp,
also unter Dynamsiche Tabellen verstehe ich die, wie in SELFHTML unter dem Menu Dynamisches HTML zu finden ist. Dies ist der Quelltxt dazuaus SELFHTML :
http://img455.imageshack.us/img455/1773/bild0023wx.jpg
danke, ein Link auf http://de.selfhtml.org/dhtml/beispiele/navigation.htm hätte gereicht. Wie Du hier im Forum Links setzt, kannst Du in der Hilfe nachlesen. Oder schau' einfach mal ins Antwortfenster :-)
So davon hätte ich gerne zwei oder mehr, also das man zum Beispiel untereinander zwei Leisten hat, bei denen, wenn man mit der Maus drüberfährt, je eine Navigationsleiste erscheint. Die Leisten können auch nebeneinander sein, hauptsache es erscheinen dann mehrere von diesen Navigationsleisten auf einer Seite.
Ja, jetzt habe ich es verstanden. Da im ganzen Beispiel keine Tabellen vorhanden sind, hab' ich auch den Threadtitel geändert.
Ich hoffe, Du hast nicht einfach nur das Beispiel kopiert, sondern auch verstanden, wie die dynamische Navigation funktioniert:
Wie in der Erklärung zum Beispiel steht, werden die Mausbewegungen überwacht und in Abhängigkeit von der Mausposition wird das Menü eingeblendet oder ausgeblendet.
Das Menü selbst besteht aus zwei ineinandergeschachtelten DIV-Containern, die über ihr id-Attribut _id_entifiziert werden können.
Wenn Du mehrere solche Menüs so einblenden können willst, musst Du Dir überlegen, anhand welchem Kriterium Du entscheiden kannst, welches Menü eingeblendet wird. Da die x-Position bereits über ein-/ausblenden entscheidet, bietet sich die y-Position für die Auswahl des Menüs an. Du solltest allerdings beachten, dass Du nicht genau wissen kannst, wie hoch der darstellbare Bereich im Browserfenster ist. Wie Du an diese Größe kommst, ist unter Javascript-Referenz, window-Objekt erklärt.
Welche Veränderungen sind nun notwendig:
Du erstellst für jedes Menü zwei ineinandergeschachtelte DIV-Container analog zu den bestehenden für das erste Menü. Denke daran, dass Du eindeutige id-Attribute vergibst.
Erweitere die Funktion Event_init() um die Überwachung der weiteren Menüs für Opera.
Ermögliche die Übergabe der id-Werte an die Funktionen Menue() und NoMenue als Funktionsparameter. Derzeit steht in den Funktionen hartcodiert "Nav" bzw. "NavLinks". Lies dazu den Abschnitt Funktionen.
Erweitere die Funktion handleMove um die Auswertung der y-Position. In Abhängigkeit von der y-Position rufst Du die Menue() mit den entsprechenden id-Werten auf. Ausblenden würde ich ohne Berücksichtigung der y-Position stets alle Menues().
Das wäre eine Idee, wie Du das Menü erweitern könntest. Viel Spass dabei.
Freundliche Grüße
Vinzenz
-
-
