We Keep Coding

Isotope not working after I replace a div

I have a jQuery post that replaces a div with updated products. The grid is formatted with isotope but I can't figure out how to make it re-format the grid after update.
$.post(url, function(data) {
$('#product_list').first().replaceWith(data.products);
}).always($('#product_list').isotope({
itemSelector: '.product-thumb-info-list'
}));
If I run the isotope() from console it will re-order the grid nicely so I guess it is firing too early.
How can I get it to apply to the grid immediately after the post function replaces the div?

Can you change on how you handle your always method to this instead:
$.post(url, function(data) {
$('#product_list').first().replaceWith(data.products);
}).always(function() {
$('#product_list').isotope({
itemSelector: '.product-thumb-info-list'
})
});

JQuery Masonry: Images stacking until page resize

This is most likely a duplicate, but I do not know JQuery and have just been copying/pasting code to get to this point. I do not understand why my images are stacked until I do a page resize. Here is my code:
$ ->
$('things').imagesLoaded ->
$('#things').masonry
itemSelector: '.box'
isFitWidth: true

This is not only jQuery but jQuery + coffeescript.
Here a "translation" of your code in javascript (with jQuery framework) :
$(function() {
$('things').imagesLoaded(function() {
$('#things').masonry({
itemSelector: '.box',
isFitWidth: true
});
});
});
In coffeescript -> mean function (for anonymous function).

Masonry - How to shuffle items

I'm using the masonry script for one of my webpages.
This is the JS (using jQuery, Typescript and the ImagesLoaded Plugin):
$(function(){
// or with jQuery
var $container;
function triggerMasonry() {
// don't proceed if $container has not been selected
if ( !$container ) {
return;
}
// init Masonry
$container.imagesLoaded( function() {
$container.masonry({
itemSelector : '.item',
stamp: '.stamp',
gutter:20
});
});
}
// trigger masonry on document ready
$(function(){
$container = $('#container');
triggerMasonry();
});
// trigger masonry when fonts have loaded
Typekit.load({
active: triggerMasonry,
inactive: triggerMasonry
});
});
This is working very good.
But now I need to shuffle the items before they are rendered and displayed my masonry. Is this somehow possible?
I tried to use Isotope and looked at packery but both doesn't worked out at my website.
Thank you for every help!

shuffle the items before they are rendered and displayed
Do the items have any JavaScript event listeners assigned to them.
If not (meaning if the 'container' only contains markup and no script dependency) then I would suggest:
creating an array that stores the markup of each individual masonry-item as HTML string.
Shuffle the array and
dump the array contents into the 'container'
A crude solution for sure. But, hope this gets the job done.

check if .load has actually loaded content yet, then slide down

So I want to slide down some content that is loaded with jquery .load function
I have this where I load the content and then Hide it
function froth(){
$("#area").hide();
$("#area").load("test.html #enquiry1");
$("#area").hide();
}
Here I want to make sure that when i click the button it loads the document and then once its loaded then it slides down the content.
$(document).ready(function() {
$('#t1').on('click', function(){
froth();
$('#area').ready(function(){$("#area").slideDown('slow');})
});
});
Any ideas on how to do this.
I've been looking at the API's and it looks like i will probably have to use some ajax function instead... but i wanted to see if there was any other way.

.load accepts a callback as parameter http://api.jquery.com/load/
$("#area").load("test.html #enquiry1", function() {alert('done')});

use the callback function of load to make sure the load content is loaded first.. and then do the animation
try this
$(document).ready(function() {
$('#t1').on('click', function(){
froth();
});
});
function froth()
{
$("#area").hide();
$("#area").load("test.html #enquiry1",function(){
$(this).slideDown('slow')
});
}
OR
$(document).ready(function() {
$('#t1').on('click', function(){
$("#area").hide().load("test.html #enquiry1",function(){
$(this).slideDown('slow')
});
});
});

.load() animation with external web page?

Here is basically what I want to do:
I want to slideUp() a div with my content. I want to .load() an external web page (on the same server) in that div and .slideDown() that div.
For now here is what I have:
$(document).ready(function() {
$('a').click(function(){
$('.content').slideUp('1000');
$('.content').hide().load('about.html');
$(".content").slideDown('1000');
});
});
Basically here's what I get: the div .content hides itself, loads the about.html page, and appears. But no slideUps or slideDowns.
Anyone has an idea?
Sorry if this is a noob question, this is the first real time I'm trying js/jquery.
Thanks in advance.

That's because those are asynchronous actions. You have to continue execution in callbacks:
$('a').click(function(){
$('.content').slideUp('1000', function() {
this.hide().load('about.html', function() {
this.slideDown('1000');
});
});
});

try:
$('a').click(function(){
var el = $('.content'), //cache content to avoid multiple calls
slidetime = 1000;
el.slideUp(slidetime,function(){ //slide up
el.hide().load('about.html',function(){ //afterwards, load
el.slideDown(slidetime); //afterwards, slide
});
});
});

you are passing string '1000' to slideUp or slideDown.
It should be number or string that it can take like 'slow'...

Try This
$(document).ready(function() {
$('a').click(function(){
$('.content').slideUp(1000);
$('.content').hide().load('index2.html');
$(".content").slideDown(1000);
});
});
Cheers :)