Jquery Callbacks mit Mauerwerk pluggin

Question

Ich habe einen grundlegenden Kippschalter, der das angeklickte auf div zeigt, während alle anderen ähnlichen divs geschlossen werden. Das funktioniert ganz gut, der Wechsel ist nicht das Problem. Siehe unten:

$(document).ready(function(){ 
$('.threadWrapper > .littleme').click(function() { 
    $(this).next().toggle('slow'); 
    $(this).toggle('slow'); 
    $('.littleme').not(this).next().hide('slow'); 
    $('.littleme').not(this).show('slow'); 
    return false; 
}).next().hide(); 
}); 

Ich habe auch die Mauer pluggin für jQuery gemacht, die alle horrizontally div Elemente ausgewählt organisiert und dann vertikal. Brilliant, das für alle Arten von verschiedenen div Höhen funktioniert. Siehe unten:

$(function(){ 
    $('#mainContent').masonry({ 
    columnWidth: 200, 
    itemSelector: '.threadWrapper:visible', 
}); 
}); 

Was will ich es tun, ist, das Layout neu zu organisieren jedes Mal ein div erweitert oder zusammenbricht. Dadurch wird der Befehl .maurry als Rückruf für die erste .click-Funktion ausgelöst. Das funktioniert bei mir nicht. Appos für die Anfängerfrage.

Sehen Sie, wie zur Zeit seiner Arbeit hier: kalpaitch.com

Andrew

Gaby - Danke für die Syntaxprüfung, ich bin ziemlich gut in denen und dann verbringen etwa eine halbe Stunde laufen rund Flusen suchen für Sie.

Cyro - Das ist perfekt und funktioniert, ich werde dies für die nahe Zukunft verwenden. Was ich hinzufügen wollte, war, wie dies erreicht werden würde, wenn diese mit einer Animationsgeschwindigkeit (Code oben entsprechend geändert) angezeigt/versteckt/umgeschaltet würde. Dann würde der Mauerruf ausgelöst werden, bevor die divs erweitert werden (wie es derzeit bei kalpaitch.com geschieht). Vielen Dank für die Antwort, es ist definitiv einfacher.

Answer 1

Versuchen Wieder läuft das Mauerwerk Aufruf Re stellen Sie die Seite nach dem Klick Änderungen beheben:

$(document).ready(function(){ 
$('.threadWrapper > .littleme').click(function() { 
    $(this).next().toggle(); 
    $(this).toggle(); 
    $('.littleme').not(this).next().hide(); 
    $('.littleme').not(this).show(); 

    // re-run masonry 
    $('#mainContent').masonry({ 
    columnWidth: 200, 
    itemSelector: '.threadWrapper:visible' 
    }); 

    return false; 
}).next().hide(); 
}); 

EDIT: Ein Blick auf die Mauer docs es scheint, dass Mauerwerk wird Ihre ursprünglichen Einstellungen speichern, so dass Sie nur noch einmal die Haupt Methode aufrufen müssen. Dies sollte auch funktionieren:

Answer 2

Sie einen falschen Weg, in dem Sie die masonry.js Datei enthalten ..

Sie verwenden js/jquery.masonry.js wenn es JS/jquery.masonry.js (Kapital JS)

sein sollte, und Sie haben ein zusätzliches Komma (,) bei der Ende der Optionen, die Sie an einem Mauerwerk passieren ..

Nachdem Sie diese Fehler in Ihrem Beispiel zu beheben, nur wieder das Mauerwerk Code ausführen wie Cryo in seiner Antwort erwähnt ...

Answer 3

Ich hatte auch einen Toggle, und konnte nicht Maurer für diesen Effekt nachzuladen bekommen. Aber ich habe Maurer zum Nachladen bekommen, wenn Gegenstände ausgeblendet (gefiltert) wurden.

See: http://jasondaydesign.com/masonry_demo/

Answer 4

Es ist schon eine Weile, aber da ich auf Ihre Frage schlagen immer wieder während der Suche nach etwas anderes, würde ich hinzufügen, hier das Mauerwerk eine .reload Funktion hinzugefügt. Das funktioniert bei mir:

 $(window).resize(function(){ 
      var wallWidth = $wall.width(); 
      var width  = $(window).width(); 
      if (width<700) { 
        $('.brick').css('width', wallWidth/1); 
        $wall.masonry('option', { columnWidth: wallWidth/1 }); 
        $wall.masonry('reload'); 
      } else if (width>=700 && width<1024) { 
        $('.brick').css('width', wallWidth/2 - 1); 
        $wall.masonry('option', { columnWidth: wallWidth/2 }); 
        $wall.masonry('reload'); 
      } else if (width>=1024) { 
        $('.brick').css('width', wallWidth/3 - 1); 
        $wall.masonry('option', { columnWidth: wallWidth/3 }); 
        $wall.masonry('reload'); 
      } 
     });