jQuery Frage

[rle]

Hallo,

Ich mache gerade meine Portfolio-Website in HTML5/CSS3 und würde gerne folgenden Effekt mit jQuery einbauen:
Wenn man die Hauptseite öffnet will ich das der Inhalt (Menü ausgeschlossen, das befindet sich über dem Content) eingeblendet und/oder ausgefahren wird. (derzeit mit fadeIn bzw. SlideDown gelöst)
Mein Problem ist, wen ich jetzt auf den nächsten Menüpunkt klicke, möchte ich das der aktuelle Inhalt wieder ausgeblendet wird bzw. sich wieder einfahrt und anschließend der nächste Inhalt erst wieder ausfahrt.

Bis auf eine Lightbox und einen Flexslider den ich eingebaut habe, hab ich leider keine Erfahrung mit jquery deshalb weiß ich leider nicht weiter.

Den derzeitigen Effekt hab ich so eingebaut:
<script>
$(function(){
$('.fadeIn').hide().fadeIn(250);
})
</script>

Hoffe mir kann jemand helfen!

 

[Myhar]

AW: jQuery Frage

Dafür kannst du die fadeOut Funktion von jQuery verwenden, alternativ kannst du auch fadeToggle verwenden, um den Zustand der einzelnen Elemente ein- und auszublenden.
Vergiss aber bei all deinen JS Spielereien bitte nicht, dass auch User ohne Javascript (wie zB der google Bot... Ja, der führt zwar einiges an JS aus, aber nicht alles) die Informationen deiner Seite zu Gesicht bekommen können.
Edit: Damit der Inhalt eingeblendet werden kann, muss er schon vorher vorhanden sein. Ansonsten lädt sich die gesamte Seite natürlich neu und ein ein-ausfaden ist nicht möglich. Alternativ kannst du dir den Inhalt auch per ajax holen, allerdings solltest du dann trotzdem eine Lösung für User ohne JS anbieten.

 

[Duddle]

AW: jQuery Frage

Alternativ kannst du mglw. zum Tabs-Widget greifen, denn was du beschreibst ähnelt dem Verhalten von Tabs. Dafür müsstest du dich aber etwas näher mit der Materie / der API beschäftigen, um es deinen Wünschen anzupassen.

Die einfachere Variante wäre wohl die von Myhar genannte.


Duddle

 

[rle]

AW: jQuery Frage

Erstmal danke für die Antworten!
Wie oben schon erwähnt, kenn ich mich in JS bzw. jQuery überhaupt nicht aus und weiß darum nicht wirklich wie ich es programmieren kann, das der Inhalt der aktuellen Seite zuerst ausgeblendet wird, wenn ich auf eine andere Seite klicke. Kannst du mir das vielleicht per Code erklären? Naja für User ohne JS, wollte ich JS einfach deaktivieren und somit den Inhalt ohne Animation darstellen. Hm ja verstehe, wenn der Inhalt nicht vorhanden ist kann es ja gar nicht funktionieren.

Danke für die Info, werde ich bestimmt in Zukunft mal anwenden können!

 

[Duddle]

AW: jQuery Frage

Wenn du dich überhaupt nicht auskennst, helfen dir auch keine Code-Schnippsel, weil du die immer an die gegebene Situation anpassen musst. Du musst dir also entweder die Grundlagen anlesen oder es dir anpassen lassen.

Prinzipiell ist es so, dass du zwei Fragen klären musst: was (1) soll wann (2) passieren? In deinem Fall sind die Antworten, 1) Inhalte ändern sich 2) wenn ein Menüpunkt geklickt wird.

Dafür bietet jQuery einige Funktionen an, die auch für Laien (mit Englischkenntnissen) recht schnell nachvollziehbar sind. Wenn irgendetwas passiert, wird ein Ereignis/Event angestoßen bzw. gefeuert. Auf diesen Event kannst du reagieren, d.h. ihn behandeln.

$("#einElement").click(function() {
   //hier wird bspw. der Klick-Event für ein Element mit id="einElement" behandelt
});

In deinem Anwendungsfall passiert nicht mehr, als dass das aktuell Wichtige ausgeblendet und das neue eingeblendet werden soll.

//alle Elemente mit class="aktiv" verstecken
$(".aktiv").hide();

Einfacher ist es, alles mglw. Relevante auszublenden, dann musst du nicht verfolgen was gerade wichtig ist.

//alle Elemente mit class="content" verstecken
$(".content").hide();

//danach das gerade Geklickte zeigen
PlatzhalterFuerGeklicktesElement.show();

Wenn ich das kombiniere und mit Pseudo-Menüeinträgen schreibe, sähe der Code dann so aus:

$("#menupunkt1").click(function() {
    $(".content").hide();
    $("#inhalt1").show();
});
$("#menupunkt2").click(function() {
    $(".content").hide();
    $("#inhalt2").show();
});
//etc

Wie gesagt musst du das an deine Situation anpassen, aber das Prinzip sollte hoffentlich nachvollziehbar sein. Das Ganze kann man sehr viel schicker und allgemeiner schreiben, aber dazu müsstest du dich (erneut) mehr mit der Materie beschäftigen.


Duddle

 

[mindraper]

AW: jQuery Frage

hi

abseits einer "problem"-lösung (in anführungszeichen, weil es sich hier um kein wirkliches problem handelt, sondern um einen visuellen effekt) solltest du auf jedenfall folgendes bedenken:

es sollte – ob du die inhalte via XHR (ajax) nachlädst oder wie auch immer – für den seitenbesucher möglich sein, die inhalte die sich hinter einem menüpunkt verstecken auch direkt anzusprechen. die erfahrung hat gezeigt, dass user verlinkungen speichern bzw. als bookmark in ihre favoriten aufnehmen sowie anderen usern posten, mailen, etc.

die gewohnte user-experience ist, dass ein weitergereichter/gespeicherter link ohne umwege zu den gewünschten inhalten verweist. werden diese inhalte nun via XHR geladen, ändert sich die url der seite nicht, es wird (normalerweise) immer der quasi "standard"-inhalt der seite geladen (eben das, was tatsächlich initial innerhalb des markups steht).

ein kurzes gedankenspiel:


bei einer normalen verlinkung:
ein user betritt deine seite "index.html". er klick auf einen der menüpunkte. dies hat zur folge, dass eine neue seite geladen wird, nennen wir sie einfach mal "about.html". sobald dies geschieht, ändert sich die adresszeile des browsers von "www.deine-adresse.de/index.html" zu "www.deine-adresse.de/about.html". der user findet die seite "about.html" total interessant, hat aber leider nicht direkt zeit, sodass er sie speichert.

er kann am nächsten tag seinen browser öffnen und auf seine bookmark klicken, die ihn direkt zu seinen gesuchten inhalten führt (also zur seite "about.html"). alles ist super, der user ist zufrieden weil er an seine inhalte kommt und du bist zufrieden, weil der user zufrieden ist. die welt ist herrlich )


bei xhr:
ein user betritt deine seite "index.html". er klick auf einen der menüpunkte. dies hat zur folge, dass neue inhalt von "about.html" geladen werden. sobald dies geschieht, ändert sich die adresszeile des browsers in diesem fall allerdings nicht von "www.deine-adresse.de/index.html" zu "www.deine-adresse.de/about.html" – innerhalb der adresszeile steht nach wie vor "index.html". der user findet die inhalte von "about.html" total interessant, hat aber leider nicht direkt zeit, sodass er sie speichert (sprich: eine bookmark setzt). genau jetzt beginnt aber ein problem: die bookmark verweist eben nicht auf die inhalte von "about.html", sondern weiterhin auf "index.html".

wenn er am nächsten tag seinen browser öffnet und auf seine bookmark klickt, die ihn direkt zu seinen gesuchten inhalten führen soll (also zur seite "about.html") wird sie genau das aber nicht tun – der user bekommt die inhalte von "index.html" zu sehen, weil seine bookmark dorthin verweist anstatt auf "about.html".

dies hat im schlimmsten fall zur folge (und dieser tritt gerade hier extrem häufig ein), dass der user deine seite verlässt und seine bookmark wieder löscht. auf jeden fall wird die zufriedenheit des besuchers sinken, weil er nicht wie gewohnt direkt an seine gesuchten inhalte kommt.

um dem entgegenzuwirken, könntest du mit sog. hashes (-> #) in deinen urls arbeiten, sodass bei einem klick auf einen menüpunkt die adresse in der adresszeile des browsers geändert wird zu "index.html#about". dann müsstes du allerdings beim laden der seite auslesen, ob die url einen solchen hash schon enthält und falls ja, die entsprechenden inhalte nachladen. damit könntest du dein problem lösen, dass ein besucher einen spezifischen inhalt nicht direkt ansteuern kann. wunderbar. oder sagen wir: eigentlich nicht. du bekommst nämlich neue probleme.

zum einen benötigen die suchmaschinenbots (sofern sie deine inhalt überhaupt indexieren können) eine spezifische form, wie eine url mit hash aussehen muss, damit sie indexiert werden kann und im ranking von suchergebnissen auftaucht. es gibt hierzu eine anleitung von google (leider finde ich gerade den link nicht, eine adäquate alternativanleitung findest du hier).

zum anderen setzt ein unschöner effekt ein: der user bekommt zunächst die inhalte von "index.html" zu sehen, diese "verschwinden" plötzlich und dann erst werden die inhalte von "about.html" dargestellt. dieser effekt tritt ein, weil dein javascript frühestens anfängt zu arbeiten, nachdem das komplette DOM der seite vom browser geladen und geparst wurde. natürlich könntest du dein javascript auch schon früher anfangen lassen zu arbeiten – verbunden mit der gefahr (die sehr hoch ist), dass der browser schon beim laden der seite sog. "DOMExceptions" wirft. dabei handelt es sich um fehler, die entstehen wenn operationen innerhalb des DOMs passieren die nicht möglich sind. läuft dein javascript also schon ab, bevor das DOM geladen und geparst ist, setzt du dich der gefahr aus, dass eine solche exception geworfen wird und dein javascript danach gar nicht mehr weiterarbeitet. mit anderen worten: der user kann überhaupt nicht mehr auf deiner seite navigieren, da sämtliche inhalte über javascript geladen werden, welches aber aufgrund der DOMException nicht mehr weiter arbeitet. der user bekommt ein leere seite zu gesicht. auch nicht so schön.

alternativ gäbe es natürlich die möglichkeit, deine seite "leer" zu lassen, also keine inhalte in index.html zu schreiben und statt dessen direkt einen xhr-call auszuführen um inhalte zu laden. leider "bestraft" google leere pages mit einen ziemlich schlechten ranking (verständlich), user ohne oder mit ausgeschaltetem javascript bekommen sowieso nichts zu sehen (und nein, nicht jeder user kann javascript nach belieben ein- und ausschalten – man denke hier nur an menschen in firmen, deren administratoren die browsereinstellungen vorgeben) und zudem erhöht sich auch die ladezeit der seite da ja erstmal ein ajax-request abgeschickt und wieder zurück kommen muss. mit anderen worten: doch keine alternative.

damit wären wir vom frontend beinahe auch schon am ende der möglichkeiten. geht da vielleicht server-seitig was? ja.
du könntest die seiten auf dem server cachen und die gecachten versionen auf anfrage mit php verarbeiten und ausliefern. damit wären dann auch deine probleme gelöst (naja, zumindest fast – "feinheiten" spare ich mir jetzt mal). allerdings sollte man den aufwand, der betrieben werden muss um so etwas zu erreichen nicht auf die leichte schulter nehmen.


du solltest dir also ernsthaft die frage stellen, ob sich der oben beschriebene, nötige aufwand lohnt, um einen visuellen effekt wie das ein-/ausfahren der inhalte zu realisieren oder ob du mit einfachen verlinkungen nicht wesentlich besser fährst. auf andere argumente wie beispielsweise nicht mehr "korrekt" funktionierende vor/zurück buttons des browsers bin ich jetzt mal gar nicht eingegangen.

ich für meinen teil denke nicht dass es sich lohnt – aber es geht hier ja um dich, deine seite und deine besucher


gruß