Seite 1 von 1
JS-Menü "funktioniert" erst nach komplettem Laden der Site
Verfasst: 16.11.2009 17:05
von uwe.ha
Hallo zusammen,
ich nutze auf meiner Site folgendes "show/hide"-Menü:
http://woork.blogspot.com/2009/09/how-t ... level.html
Demo siehe:
http://antonio.lupetti.googlepages.com/navbar.html
Was mir etwas negativ auffällt ist, dass das Menü (show der Untermenüs) erst funktioniert, wenn die Seite vollständig geladen ist; angezeigt wird alles direkt, auch hover-farbe der Hauptpunkte ändert sich, nur das Einblenden (show ... wohl aus der jquery-Datei) funktioniert erst, wenn die Seite vollständig geladen ist.
Hier mal auszugsweise mein Quelltext:
Code: Alles auswählen
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
... head-Inhalte ...
</head>
<body>
<div id="header">
<script type="text/javascript" src="/menue/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
function navi(){
$('div#navi ul li').mouseover(function() {
$(this).find('ul:first').show();
});
$('div#navi ul li').mouseleave(function() {
$('div#navi ul li ul').hide();
});
$('div#navi ul li ul').mouseleave(function() {
$('div#navi ul li ul').hide();;
});
};
$(document).ready(function() {
navi();
});
</script>
<div id="navi"> ... Menüpunkte als <ul><li> ... </div>
</div>
<div id="content"> ... </div>
<div id="footer"> ... </div>
</body>
</html>
div "header" (inkl. "navi") sowie "footer" werden per php-include eingefügt .. falls das relevant ist.
Warum "funktioniert" das Menü erst nachdem die Seite vollständig geladen ist? ... ich dachte immer JS wird auch geladen / ausgeführt OHNE dass dafür die Seite fertig geladen sein muss.
Was kann ich ändern, damit das Menü direkt "funktioniert", ohne dass die Seite erst volständig geladen sein muss?
DANKE!
Re: JS-Menü "funktioniert" erst nach komplettem Laden der Site
Verfasst: 24.11.2009 08:47
von gn#36
Ich glaube nicht dass irgendwo vorgeschrieben ist ab wann JavaScript zu funktionieren hat, vor allem wenn es wie bei dir offenbar erst einmal Daten ausblenden soll. Das kann es erst erledigen wenn die Daten auch da sind, da müsstest du vorbeugend ran indem du die Daten defaultmäßig erst mal ausblendest und dann bei Bedarf einblendest. Abgesehen davon hinken so Dinge wie Hoover Effekte durchaus hinterher, zumindest wenn man mit Hintergrundgrafiken und nicht festen Farben arbeitet.
Ich halte so ein JavaScript Menü außerdem ohnehin nicht mehr für zeitgemäß, denn alle aktuellen Browser unterstützen inzwischen auch ausreichend Hoover Effekte um so ein Menü mit CSS zu realisieren. Das reagiert dann auch schneller, denn für die Menüeinträge ist in der CSS Datei bereits für den Zeitpunkt des Ladens festgelegt wie diese sich zu verhalten haben - das JavaScript übernimmt dieses Verhalten ja gewissermaßen "manuell" und kann eben so früh noch nicht eingreifen - abgesehen davon funktioniert es nicht immer.
Re: JS-Menü "funktioniert" erst nach komplettem Laden der Site
Verfasst: 24.11.2009 09:18
von uwe.ha
Hallo gn#36,
DANKE, dass du dich meiner angenommen hast
Mein menü ist eigentlich kein typisches JS-Menu.
Die Hauptüberschriften <ul><li> werden direkt angezeigt.
Die show/hide-baren Submenues sind der CSS auf "display:none z-index:1000" gesetzt.
Das show/hide wird dann über JS wiefolgt gesteuert:
Code: Alles auswählen
<script type="text/javascript" src="/menue/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
function navi(){
$('div#navi ul li').mouseover(function() {
$(this).find('ul:first').show();
});
$('div#navi ul li').mouseleave(function() {
$('div#navi ul li ul').hide();
});
$('div#navi ul li ul').mouseleave(function() {
$('div#navi ul li ul').hide();;
});
};
$(document).ready(function() {
navi();
});
</script>
Das komische ist, dass diese show-Funktion ERST verfügbar ist, wenn der <body> vollständig geladen ist.
Warum? Kannst du dir das erklären?
Oder wenn dieses onmouseover.show/hide auch rein per CSS machbar ist: Hast du einen Link zu einem Tutorial, wo ich mir dies näher ansehen kann?
VIELEN DANK!
Re: JS-Menü "funktioniert" erst nach komplettem Laden der Site
Verfasst: 24.11.2009 09:31
von gn#36
Mir fällt da gerade ein "Konstruktionsfehler" bei dir auf: Du führst die Navi Funktion erst aus, wenn die Seite "ready" ist (zumindest wenn ich die seltsame Syntax da korrekt interpretiere). Das ist sie meines Wissens aber erst, wenn sie komplett geladen ist. Führ' die Funktion doch einfach aus sobald alle notwendigen Elemente da sind (also sobald die Navi komplett anwesend ist rufst du die Funktion auf indem du einen kurzen JavaScript Block hinter die Navi packst).
Ein Tutorial zu css Menüs findest du über jede beliebige Suchmaschine, z.B:
http://www.seoconsultants.com/css/menus/tutorial/ oder
http://ago.tanfa.co.uk/css/examples/men ... ial-h.html (dürfte das gleiche Menü sein wenn ich das richtig sehe).
Re: JS-Menü "funktioniert" erst nach komplettem Laden der Site
Verfasst: 24.11.2009 09:44
von uwe.ha
gn#36 hat geschrieben:Mir fällt da gerade ein "Konstruktionsfehler" bei dir auf: Du führst die Navi Funktion erst aus, wenn die Seite "ready" ist (zumindest wenn ich die seltsame Syntax da korrekt interpretiere). Das ist sie meines Wissens aber erst, wenn sie komplett geladen ist. Führ' die Funktion doch einfach aus sobald alle notwendigen Elemente da sind (also sobald die Navi komplett anwesend ist rufst du die Funktion auf indem du einen kurzen JavaScript Block hinter die Navi packst).
Die Zeile
steht noch ÜBER dem Menü (<ul>), sollte so also sogar noch VOR dem Laden des Navi-Inhaltes geladen sein ... oder ich verstehe nicht, was diese Zeile eigentlich bedeutet. Bedeutet die Zeile oben, dass die Funktion erst verfügbar ist, wenn das "dokument" "ready"-geladen ist?
Die Links schaue ich mir mal an ... DANKE!
Re: JS-Menü "funktioniert" erst nach komplettem Laden der Site
Verfasst: 24.11.2009 09:57
von gn#36
uwe.ha hat geschrieben:Die Zeile
steht noch ÜBER dem Menü (<ul>), sollte so also sogar noch VOR dem Laden des Navi-Inhaltes geladen sein ... oder ich verstehe nicht, was diese Zeile eigentlich bedeutet. Bedeutet die Zeile oben, dass die Funktion erst verfügbar ist, wenn das "dokument" "ready"-geladen ist?
So würde ich das interpretieren. Über dem Menü kann das überhaupt nicht ausgeführt werden weil es die passenden Elemente die da ein/ausgeblendet werden sollen noch überhaupt nicht gibt, wenn es also da ausgeführt wird wo es steht passiert überhaupt nichts, wenn es erst nach dem kompletten Laden ausgeführt wird braucht es ein bisschen. Ich würde das einfach so probieren:
Code: Alles auswählen
...hier den HTML Code für die Navigation ...
<script type="text/javascript">navi();</script>
Dann wird die Funktion sofort ausgeführt sobald die Daten der Navigation da sind. Mehr als diese braucht die Funktion denke ich auch nicht.
Re: JS-Menü "funktioniert" erst nach komplettem Laden der Site
Verfasst: 24.11.2009 10:05
von uwe.ha
gn#36 hat geschrieben:Ich würde das einfach so probieren:
Code: Alles auswählen
...hier den HTML Code für die Navigation ...
<script type="text/javascript">navi();</script>
Dann wird die Funktion sofort ausgeführt sobald die Daten der Navigation da sind.
Funktioniert!
VIELEN DANK!!!
