Forum

JQuery - Webinhalt hineinfliegen lassen

Erstellt von gordiaaan, 26.04.2011.



  1. gordiaaan

    gordiaaan Guest

    JQuery - Webinhalt hineinfliegen lassen
    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: http://imagemechanics.com.au

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

    Danke für eure Hilfe schon mal.
     
    #1      
  2. fakerer

    fakerer Aktives Mitglied

    Dabei seit:
    03.08.2008
    Beiträge:
    794
    Geschlecht:
    männlich
    JQuery - Webinhalt hineinfliegen lassen
    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.
     
    #2      
  3. aliasltb

    aliasltb LTB

    Dabei seit:
    23.03.2009
    Beiträge:
    189
    Geschlecht:
    männlich
    Software:
    Eclipse, Photoshop, Indesign, Illustrator, Flash, Flash Builder
    Kameratyp:
    HTC Desire HD
    JQuery - Webinhalt hineinfliegen lassen
    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.
     
    #3      
  4. crusher9001

    crusher9001 Nicht mehr ganz neu hier

    Dabei seit:
    15.08.2008
    Beiträge:
    53
    Geschlecht:
    männlich
    Software:
    Netbeans
    Kameratyp:
    Nikon D5100
    JQuery - Webinhalt hineinfliegen lassen
    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 (Text):
    1.  
    2.  
    3. $('ID des Button').click(
    4.  function() {
    5.    $('ID des DIVContainers').slideToggle();
    6.    $.ajax(); // musst du noch anpassen
    7.  
    8.  });
    9.  
    siehe jQuery.ajax() – jQuery API



    keine Gewähr auf Richtigkeit xD
     
    Zuletzt bearbeitet: 27.04.2011
    #4      
  5. fexx

    fexx Aktives Mitglied

    Dabei seit:
    13.07.2010
    Beiträge:
    1.058
    Geschlecht:
    männlich
    Ort:
    Berlin
    Software:
    Adobe Creative Cloud, Coda2
    JQuery - Webinhalt hineinfliegen lassen
    AW: JQuery - Webinhalt hineinfliegen lassen

    .toggle() – jQuery API
     
    #5      
  6. gordiaaan

    gordiaaan Guest

    JQuery - Webinhalt hineinfliegen lassen
    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 (Text):
    1.  
    2. <!DOCTYPE html>
    3. <head>
    4. <script type="text/javascript" src="jquery-1.5.2.js"></script>
    5. </head>
    6.  
    7. <body>
    8. <a href="#" id="menu" target="_self">test</a>
    9.  
    10. <script>
    11. $('#menu').click(
    12.     function() {
    13.         $('#content').slideToggle();
    14.         $.ajax({url:'load.html', method:'get'});
    15.     });
    16. </script>
    17.  
    18. </body>
    19. </html>
    20.  
     
    #6      
  7. fakerer

    fakerer Aktives Mitglied

    Dabei seit:
    03.08.2008
    Beiträge:
    794
    Geschlecht:
    männlich
    JQuery - Webinhalt hineinfliegen lassen
    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.
     
    #7      
  8. crusher9001

    crusher9001 Nicht mehr ganz neu hier

    Dabei seit:
    15.08.2008
    Beiträge:
    53
    Geschlecht:
    männlich
    Software:
    Netbeans
    Kameratyp:
    Nikon D5100
    JQuery - Webinhalt hineinfliegen lassen
    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 :D

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

    dein Beispiel:

    Code (Text):
    1.  
    2. <!DOCTYPE html>
    3. <head>
    4. <script type="text/javascript" src="jquery-1.5.2.js"></script>
    5. <script>
    6.   $(function(){ // Script wird erst ausgeführt wenn der DOM geladen ist
    7.        $('#menu').click(
    8.              function() {
    9.                     $('#content').slideToggle();
    10.                     $.ajax({
    11.                            url:'load.html',
    12.                           method:'get'
    13.                           sucess: function(msg){               // Wenn die datei erfolgreich geladen wird,
    14.                                     $('#content').html(msg);   // dann wird der Inhalt in die Div-Box geladen
    15.                           }
    16.                });
    17.      });
    18.  
    19. });
    20. </script>
    21.  
    22. </head>
    23.  
    24. <body>
    25. <a href="#" id="menu" target="_self">test</a>
    26.  
    27. <div id="content">
    28. </div>
    29.  
    30. </body>
    31. </html>                                        
    32.  


     
    Zuletzt bearbeitet: 28.04.2011
    #8      
Die Seite wird geladen...
© 2002 - 2016 PSD-Tutorials.de – ein Projekt mit der 4eck Media GmbH & Co. KG
x
×
×