Supportnet / Forum / Webseiten/HTML
Menu mit externem Javascript
Frage
Ich habe eine html-datei mit eingebettetem JS für das Navi-Menu.
Das sieht so aus (Kurzbeispiel)
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/javascript">
menu="<a href=´link1.html´ target=´blank´>Link 1</a><br><br><a href=´link2.html´ target=´blank´>Link 2</a>";
</script>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<script language="JavaScript">document.write(menu);</script>
</body>
</html>
Nun habe ich versucht, das JS in eine externe Datei zu schreiben, aber dann klappt nix mehr - ich komme leider nicht dahinter, wie die Schreibweise in einem externen JS sein muß.
Hier stoße ich an die Grenzen meines Autodidaktentums.
Kann bitte jemand helfen? Ich brauch keine drop-down- oder sonstigen Spielereien, ich will das Menu nur eine eine externe JS-Datei auslagern.
Antwort 1 von DeluxeStyle
wäre natürlich gut zu wissen, wie du versuchst, die externe JavaScript Datei einzubinden?
hast du z.B. ne Menue.js Datei (also hauptsächlich ne .js Datei)?
bindest du die dann auch richtig ein?
schreib mal, wie du das machen würdest
hast du z.B. ne Menue.js Datei (also hauptsächlich ne .js Datei)?
bindest du die dann auch richtig ein?
schreib mal, wie du das machen würdest
Antwort 2 von rfb
in 2 dateien sieht es so aus:
in der Datei menue.js (einfache ASCII_Datei):
PS: weitere Infos: http://de.selfhtml.org/javascript/intro.htm#javascriptdateien
PS1: das language-Attribut wird nicht mehr verwendet und erzeugt nicht-valides HTML.
PS2: und wer JS deaktiviert hat (z.B. Suchmaschinenrobots) kommt eben nicht auf die Unterseiten.
<html lang="de">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript" src="menue.js"></script>
</head>
<body style="background:#fff";color:#000">
<script type="text/javascript">document.write(menu);</script>
</body>
</html>in der Datei menue.js (einfache ASCII_Datei):
var menu="<a href=´link1.html´ target=´blank´>Link 1</a><br><br><a href=´link2.html´ target=´blank´>Link 2</a>"; PS: weitere Infos: http://de.selfhtml.org/javascript/intro.htm#javascriptdateien
PS1: das language-Attribut wird nicht mehr verwendet und erzeugt nicht-valides HTML.
PS2: und wer JS deaktiviert hat (z.B. Suchmaschinenrobots) kommt eben nicht auf die Unterseiten.
Antwort 3 von steirer
erstmal danke für die hilfe.
deluxestyle: einbinden mit menu.js konnte ich schon, die genaue syntax war mir fremd; vor allem der zweite teil.
rfb: das einbeinden des zweiten teils
<script type="text/javascript">document.write(menu);</script>
hat geholfen, nun funktioniert´s.
allerdings ergibt sich nun ein neues problem: mein so schön eingebettes externes css
<link rel=stylesheet type="text/css" href="flugzvorl.css">
ist nun bei den links zum teufel.
die links kümmern sich einen schmarren um die css-anweisung
A{text-decoration:none;} A:Hover{text-decoration:underline;} A:link{color:#00ffff;}
A:visited{color:#996699;} A:active{color:#cc0066;}
wie krieg ich das nun wieder hin?
deluxestyle: einbinden mit menu.js konnte ich schon, die genaue syntax war mir fremd; vor allem der zweite teil.
rfb: das einbeinden des zweiten teils
<script type="text/javascript">document.write(menu);</script>
hat geholfen, nun funktioniert´s.
allerdings ergibt sich nun ein neues problem: mein so schön eingebettes externes css
<link rel=stylesheet type="text/css" href="flugzvorl.css">
ist nun bei den links zum teufel.
die links kümmern sich einen schmarren um die css-anweisung
A{text-decoration:none;} A:Hover{text-decoration:underline;} A:link{color:#00ffff;}
A:visited{color:#996699;} A:active{color:#cc0066;}
wie krieg ich das nun wieder hin?
Antwort 4 von rfb
ohne deinen Code zu kennen lässt sich das kaum beantworten.
Antwort 5 von steirer
rfb - was meinst du nun mit code?
die ggstdl. (vereinfachte) html sieht so aus:
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel=stylesheet type="text/css" href="flugzvorl.css">
<script language="JavaScript" src="menu.js"></script>
</head>
<body bgcolor="#FFFFFF" text="#006600">
text
<br>
text
<br>
text
<br>
<script type="text/javascript">document.write(menu);</script>
</body>
</html>
die externe css funktioniert nicht, wenn das menu über externes js eingebunden ist.
die ggstdl. (vereinfachte) html sieht so aus:
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel=stylesheet type="text/css" href="flugzvorl.css">
<script language="JavaScript" src="menu.js"></script>
</head>
<body bgcolor="#FFFFFF" text="#006600">
text
<br>
text
<br>
text
<br>
<script type="text/javascript">document.write(menu);</script>
</body>
</html>
die externe css funktioniert nicht, wenn das menu über externes js eingebunden ist.
Antwort 6 von rfb
das CSS wäre in diesem Zusammenhang nicht uninteressant.
Antwort 7 von steirer
hi rfb,
...aber das css steht schon in meiner "antwort 3" ?
...aber das css steht schon in meiner "antwort 3" ?
Antwort 8 von rfb
Zitat:
...aber das css steht schon in meiner "antwort 3" ?
Ach so! (das bisschen hatte ich nicht ernst genommen. ;-)...aber das css steht schon in meiner "antwort 3" ?
Die Angaben zu Links gehören in eine festgelegte Reihenfolge, schau mal hier:
http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm#link_vis...
Antwort 9 von steirer
na ja,
das ´bisschen´ hat bislang prima funktioniert - allerdings ohne die menu.js, mit der hat der schlamassel angefangen.
du bist allerdings ein genie, mit der änderung der reihenfolge klappt´s!
warum steht sowas eigentlich nicht in selfhtml, daß auch die reihenfolge so wichtig ist? ist doch sonst ´ne großartige hilfe.
jedenfalls nochmals danke für die mühe.
das ´bisschen´ hat bislang prima funktioniert - allerdings ohne die menu.js, mit der hat der schlamassel angefangen.
du bist allerdings ein genie, mit der änderung der reihenfolge klappt´s!
warum steht sowas eigentlich nicht in selfhtml, daß auch die reihenfolge so wichtig ist? ist doch sonst ´ne großartige hilfe.
jedenfalls nochmals danke für die mühe.
Antwort 10 von rfb
Sorry, war nicht beleidigend gemeint.
Übrigens - die angegebene Stelle ist aus SelfHTML ;-)
Ich würd dir empfehlen, die Angaben zum Body ebenfalls in die CSS-Datei zu packen:
und aus dem body-tag zu streichen
Übrigens - die angegebene Stelle ist aus SelfHTML ;-)
Ich würd dir empfehlen, die Angaben zum Body ebenfalls in die CSS-Datei zu packen:
body {background:#ffffff;color:006600}und aus dem body-tag zu streichen
Antwort 11 von steirer
Ich bin gar nicht beleidigt,
daß der Hinweis aus selfhtml ist, hab´ ich auch überlauert, ich mein´ aber daß an jener Stelle bei selfhtml nicht darauf hingewiesen wird, so sklavisch die Reihenfolge einzuhalten ... das hat mich verwundert, denn ansonsten ist selfhtml eine große Hilfe (gerade auch für mich Autodidakten), mit sehr präzisen Vorgaben.
Ich hab´ da auch sowas tolles gefunden wie den Statuszeilen-Text per JS, aber - und das ist nun der nächste Wurm (wenn ´mal wo der Teufel drin is´, dann gleich mit sieben Jungen), wenn ich die Anweisungen exakt so ins externe JS schreib´, wie sie noch in der html-datei stehen
<a href="help.htm" onMouseOver="window.status=´Help/Hilfe´; return true" onMouseOut="window.status=´´; return true" title="Help/Hilfe" style="cursor:help;">Help</a>
dann funktioniert wieder gar nix. Ich verzweifel noch so langsam ... ich weiß wieder nicht, kann ich die Anweisung
return true´´
weglassen, oder ist es ´was anderes, was sich spießt.
Das sind halt die Grenzen als Autodiakt, wenn js und css jeweils anders zu schreiben sind (die Zeichensetzung nämlich) wenn man´s in html einbindet, oder extra in eine ausgelagerte Datei.
Daß die Anweisungen für Hintergrund und Schriftfarbe noch in der html stehen, kommt aus der Vergangenheit ... mit WIN95 dauerte der Aufbau der externen css-Datei etwas, und damit die Hintergrundfarbe nicht "wackelt" hab´ ich´s damals zusätzlich ins html getippt. Muß ich auch noch korrigieren.
daß der Hinweis aus selfhtml ist, hab´ ich auch überlauert, ich mein´ aber daß an jener Stelle bei selfhtml nicht darauf hingewiesen wird, so sklavisch die Reihenfolge einzuhalten ... das hat mich verwundert, denn ansonsten ist selfhtml eine große Hilfe (gerade auch für mich Autodidakten), mit sehr präzisen Vorgaben.
Ich hab´ da auch sowas tolles gefunden wie den Statuszeilen-Text per JS, aber - und das ist nun der nächste Wurm (wenn ´mal wo der Teufel drin is´, dann gleich mit sieben Jungen), wenn ich die Anweisungen exakt so ins externe JS schreib´, wie sie noch in der html-datei stehen
<a href="help.htm" onMouseOver="window.status=´Help/Hilfe´; return true" onMouseOut="window.status=´´; return true" title="Help/Hilfe" style="cursor:help;">Help</a>
dann funktioniert wieder gar nix. Ich verzweifel noch so langsam ... ich weiß wieder nicht, kann ich die Anweisung
return true´´
weglassen, oder ist es ´was anderes, was sich spießt.
Das sind halt die Grenzen als Autodiakt, wenn js und css jeweils anders zu schreiben sind (die Zeichensetzung nämlich) wenn man´s in html einbindet, oder extra in eine ausgelagerte Datei.
Daß die Anweisungen für Hintergrund und Schriftfarbe noch in der html stehen, kommt aus der Vergangenheit ... mit WIN95 dauerte der Aufbau der externen css-Datei etwas, und damit die Hintergrundfarbe nicht "wackelt" hab´ ich´s damals zusätzlich ins html getippt. Muß ich auch noch korrigieren.
Antwort 12 von rfb
Mit
Tipp: Lass es, die Mühe lohnt sich nicht.
Nutze lieber (wie in deinem Beispiel) das
window.status gibts jede Menge Probleme, die in jedem Browser und dann auch noch je nach Browsereinstellungen variieren (selbst das SelfHTML-Beispiel funktioniert nur in einem meiner 3 gerade greifbaren Browser).Tipp: Lass es, die Mühe lohnt sich nicht.
Nutze lieber (wie in deinem Beispiel) das
title-Attribut, das ein kleines Tooltipp-Fenster über dem Link erzeugt, in dem du den Text genausogut bzw. zuverlässiger anzeigen lassen kannst. Außerdem funktioniert title bei (fast) allen tags und auch ohne JavaScript.
