tutorials.de Buch-Aktion 05/2012
ERLEDIGT
JA
ANTWORTEN
3
ZUGRIFFE
436
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
AUF DIESES THEMA
ANTWORTEN
  1. #1
    Chris Wi Chris Wi ist offline Grünschnabel
    Registriert seit
    Sep 2011
    Beiträge
    3
    Hallo @ all und ein fröhliches neues Jahr!
    Also ich hab online schon gesucht aber nicht das gefunden was auf meine Lage zutrifft.
    Und zwar habe ich eine Seite und habe anfangs dort einen Inhalt.
    Beim Klick auf "Weiterlesen..." slidet der div nach oben und es wird per jQuery ein Bild eingesetzt. Bei dem Klick wird außerdem eine PHP Datei angepostet.
    Diese jedoch antwortet erst in 3 Sekunden, sodass man das Bild auch noch sieht.
    Der div slidet nochmal nach unten, und gibt somit die Sicht auf das Bild frei (soweit ja alles richtig).
    Jetzt antwortet aber die PHP Datei und der div slidet nochmal nach oben, jQuery lädt "die Antwort" in den div und sollte ihn dann nochmal herab sliden lassen.
    Da liegt aber das Problem, denn dabei gibt es einen kleinen Sprung. Er macht ca. 20px und dann springt er und zeigt alles an.
    Ich hab online gelesen, dass man die Höhe definieren muss (z.B. über $('#element').height();) aber das funktioniert nicht (wie denn auch wenn der div eingefahren ist). Da die Antwort immer individuell ist, kann ich vorher nicht die höhe ermitteln (zumindest nicht über einen mir bekannten Weg).
    Hier mal der Code (in kurz Fassung):
    HTML-Code:
    <!-- Überschrift für die Seite -->
    <h3 class="headtitle">Dear Diary...</h3>
    <!-- Um den Abstand etwas zu vergrößern -->
    <br />
    <div id="diary-content">
    	<h4>01. Januar 2012</h4>
    	<hr width="40%" align="left" />
    	<span class="color">16:50 Uhr -</span> Dear Diary..<br /> TEXT, BlaBlaBla, -.- usw...
    	<a href="#" style="float: right;" onclick="see_diary('19');">Weiterlesen...</a>
    	<hr width="40%" align="left" />
    </div>
    Der zugehörige JavaScript Code für Weiterlesen:
    PHP-Code:
    function see_diary(id) {
        var 
    oldtext = $('#diary-content').html();
        $(
    '#diary-content').slideUp('slow', function () {
            $(
    '#diary-content').html('<center>
                <img src="http://www.one-radio.tk/images/load.gif" alt="Load...">
            </center>'
    );
            $(
    '#diary-content').slideDown('fast');
        });
        $.
    post('http://www.one-radio.tk/function.php', {
            
    code'CODE',
            
    action'diary-view',
            
    idid
        
    }, function (data) {
            if(
    data != 'error') {
                $(
    '#diary-content').slideUp('slow', function () {
                    $(
    '#diary-content').html(data);
                });
                $(
    '#diary-content').slideDown('fast');
                
    history.pushState(nullnull"http://www.one-radio.tk/diary/"+id);
            } else {
                
    blend('error''Dieser Beitrag existiert nicht, oder ist nicht verf&uuml;gbar');
                $(
    '#diary-content').slideUp('slow', function () {
                    $(
    '#diary-content').html(oldtext)
                }).
    slideDown('slow');
            }
        });

    Wegen den - macht er Zeilenumbrüche die nicht da sind. Sorry ... Kann es leider nicht ändern. Hoffe ihr könnt mir helfen. Danke schon mal im Voraus.

    Schönen Abend noch.
    Chris
     

  2. #2
    CPoly CPoly ist offline Mitglied Weizenbier
    tutorials.de Premium-User
    Registriert seit
    Sep 2009
    Beiträge
    2.445
    Zitat Zitat von Chris Wi Beitrag anzeigen
    Da die Antwort immer individuell ist, kann ich vorher nicht die höhe ermitteln (zumindest nicht über einen mir bekannten Weg).
    Ich mache dir den Weg bekannt:

    Nach dem du den neuen Inhalt gesetzt hast und bevor du das DIV nach unten slidest, erzeugst du eine Kopie des DIV, machst es außerhalb des Sichtfenster (z.B. position:absolute und left:-10000px) sichtbar und ermittelst von diesem die Höhe.

    http://api.jquery.com/clone/
     

  3. #3
    Chris Wi Chris Wi ist offline Grünschnabel
    Registriert seit
    Sep 2011
    Beiträge
    3
    ouh okay das ist einfach Dankeschön werde es mal testen
     

  4. #4
    Chris Wi Chris Wi ist offline Grünschnabel
    Registriert seit
    Sep 2011
    Beiträge
    3
    Okay hab des Problemes Ursprung gefunden. Es lag nicht direkt daran, dass er die höhe nicht wusste, sondern einfach daran dass ich den Container upsliden lies, den Text hinein geladen habe, und >parralel< dazu ihn wieder downsliden lies. Setzt man den slideDown in die function des slideUp's ist alles wieder in Butter

    Hier jetzt nochmal mein Javascript Code:
    PHP-Code:
    function see_diary(id) { 
        var 
    oldtext = $('#diary-content').html(); 
        $(
    '#diary-content').slideUp('slow', function () { 
            $(
    '#diary-content').html('<center> 
                <img src="http://www.one-radio.tk/images/load.gif" alt="Load..."> 
            </center>'
    ); 
            $(
    '#diary-content').slideDown('fast'); 
        }); 
        $.
    post('http://www.one-radio.tk/function.php', { 
            
    code'CODE'
            
    action'diary-view'
            
    idid 
        
    }, function (data) { 
            if(
    data != 'error') { 
                $(
    '#diary-content').slideUp('slow', function () { 
                    $(
    '#diary-content').html(data); 
                    $(
    '#diary-content').slideDown('fast'); 
                }); 
                
    history.pushState(nullnull"http://www.one-radio.tk/diary/"+id); 
            } else { 
                
    blend('error''Dieser Beitrag existiert nicht, oder ist nicht verf&uuml;gbar');
                $(
    '#diary-content').slideUp('slow', function () { 
                    $(
    '#diary-content').html(oldtext
                }).
    slideDown('slow'); 
            } 
        }); 

    Danke aber trotzdem für die Hilfe
    Geändert von Chris Wi (02.01.12 um 18:50 Uhr) Grund: Code Tag vergessen ;-)
     

Ähnliche Themen

  1. [jQuery] DIV Slide bei Hover für eine Navigation
    Von Dustin84 im Forum Javascript & Ajax
    Antworten: 1
    Letzter Beitrag: 27.05.11, 19:02
  2. jQuery / jQueryUI slide
    Von Zack im Forum Javascript & Ajax
    Antworten: 1
    Letzter Beitrag: 09.12.10, 13:08
  3. jQuery - Slide-Effekt mit einem Link bzw. Button
    Von bj-lover im Forum Javascript & Ajax
    Antworten: 5
    Letzter Beitrag: 28.10.10, 22:31
  4. jQuery: Animation in Schleife und Slide-Effekt
    Von mschlegel im Forum Javascript & Ajax
    Antworten: 3
    Letzter Beitrag: 24.03.10, 10:34
  5. jQuery slide mit timeout
    Von Alaniak im Forum Javascript & Ajax
    Antworten: 4
    Letzter Beitrag: 14.11.08, 15:06