JQuery - Webinhalt hineinfliegen lassen

gordiaaan · 26.04.2011

Hallo zusammen,

ich bin dabei ein Webprojekt zu realisieren. Alleidngs bin ich was JS angeht Neuling. Nun bin ich auf JQuery gestoßen, was die Arbeit für mich schon deutlich verständlicher macht.
Auf einer Webseite habe ich einen Effekt entdeckt, den ich für meine gerne übernehmen möchte. Allerdings bin ich mir nicht sicher, ob er mit JQuery umsetzbar ist.
Es geht darum den Hinhalt auf Klick von oben/unten hineinfliegen zu lassen. Der Inhalt der Seiten soll aber erst geladen werden, wenn er benötigt wird.

Schaut euch einfach an, was ich meine:

Klappt das mit JQuery? Und wenn ja, mit welchen Funktionen setze ich das Laden und Fliegen um?

Danke für eure Hilfe schon mal.

fakerer · 27.04.2011

AW: JQuery - Webinhalt hineinfliegen lassen

hi,
also die Seite ist ein wenig komisch aber egal

.
Also du kannst ja den Inhaltscontainer einfach mit .animate() rausschieben und den Nächsten wieder rein.
Oder du machst alles sozusagen in ein langes HTML und machst das ganze dann mit Scroll To.

aliasltb · 27.04.2011

AW: JQuery - Webinhalt hineinfliegen lassen

Ich würde da anders rangehen.

Du gestaltest deine Seite ganz normal und packst jeden Inhalt, der "reinfliegen" soll, in ein eigenes Div mit entsprechender ID.

Und bei all diesen IDs setzt du display auf none, sodass sie nicht angezeigt werden.

Jetzt musst du nur noch für jeden Button, der dafür sorgt, dass er Inhalt reinfliegt, eine onclick-Funktion schreiben, die dann folgendes macht:

$(ID).toggle(
function() {
$(this).slideDown();
},
function() {
$(this).slideUp();
});

Dadurch wird immer beim draufklicken (das musst du noch extra schreiben) mit diesem Effekt eingeblendet/reingeflogen. Musst natürlich nur drauf achten, ob der Inhalt von oben nach unten, oder umgekehrt reinfliegen soll, dann musst du das anpassen.

Hab das jetzt aus dem Kopf aufgeschrieben und nicht ausprobiert, müsste aber zumindest die Funktionsweise des "Reinfliegens" nachahmen.

crusher9001 · 27.04.2011

AW: JQuery - Webinhalt hineinfliegen lassen

@aliasltb: du meinst glaub ich $(ID).click();
ein toogle - eventhandler währe mir neu ^^

@gordiaaan:
und damit nur der gebrauchte inhalt geladen wird nutzt du am besten ajax

Code:

$('ID des Button').click(
 function() {
   $('ID des DIVContainers').slideToggle();
   $.ajax(); // musst du noch anpassen
 
 });

siehe jQuery.ajax() – jQuery API

keine Gewähr auf Richtigkeit xD

fexx · 27.04.2011

AW: JQuery - Webinhalt hineinfliegen lassen

crusher9001 schrieb:
@aliasltb: du meinst glaub ich $(ID).click();
ein toogle - eventhandler währe mir neu ^^

.toggle() – jQuery API

gordiaaan · 27.04.2011

AW: JQuery - Webinhalt hineinfliegen lassen

Danke für eure Antworten.
Jetzt habe ich immerhin schon mal ein paar Anhaltspunkte. Aber so richtig, um nicht zu sagen gar nicht, frunktioniert es nicht. Ich habe crusher9001 Methode mal ausprobiert. Wahrscheinlich mache ich einen grundlegenen Fehler. Es passiert nämlich nichts.
In der Datei load.html habe ich ein Div-Tag mit der ID content, das angezeigt werden soll.

Code:

<!DOCTYPE html>
<head>
<script type="text/javascript" src="jquery-1.5.2.js"></script>
</head>

<body>
<a href="#" id="menu" target="_self">test</a>

<script>
$('#menu').click(
    function() {
        $('#content').slideToggle();
        $.ajax({url:'load.html', method:'get'});
    });
</script>

</body>
</html>

fakerer · 27.04.2011

AW: JQuery - Webinhalt hineinfliegen lassen

kommt immer drauf an.
Wenn es nicht viele seiten sind so wie in deinem Beispiel würde ich das wie schon erwähnt mit scrollto machen.
hierzu ein Beispiel

und hier wie auch schon erwähnt wurde ein Beispiel mit toggle.

Allerdings werden bei beiden Methoden immer alle daten beim ersten Aufruf geladen werden.
Wenn es wirklich viele Seiten sein sollten solltest du dir was mit ajax überlegen und immer den Inahlt erst laden und dann verschieben.

crusher9001 · 28.04.2011

AW: JQuery - Webinhalt hineinfliegen lassen

@fexx:
ok sry
toggle ist mir noch nie als eventhandler über den weg gelaufen, aber gut zu wissen.
Man lernt eben nie aus

@gordiaaan:
die div-box muss schon vorhanden sein und per ajax lädts du nur noch den inhalt hinein

dein Beispiel:

Code:

<!DOCTYPE html>
<head>
<script type="text/javascript" src="jquery-1.5.2.js"></script>
<script>
  $(function(){ // Script wird erst ausgeführt wenn der DOM geladen ist
       $('#menu').click(
             function() {
                    $('#content').slideToggle();
                    $.ajax({
                           url:'load.html', 
                          method:'get'
                          sucess: function(msg){               // Wenn die datei erfolgreich geladen wird, 
                                    $('#content').html(msg);   // dann wird der Inhalt in die Div-Box geladen
                          }
               });
     });

});
</script>

</head>

<body>
<a href="#" id="menu" target="_self">test</a>

<div id="content">
</div>

</body>
</html>