Isotope issue with jQuery dialog box

Question

It is a bit difficult to explain my issue but I will try using images.

Demo: http://jsfiddle.net/H8Qbn/13/

I try to automatically arrange jQuery dialogs using Isotope.

• The first picture shows that everything is working just fine.

• The second picture shows what is happening when trying to resize the 1st jQuery dialog. It is resizing just fine and all other dialogs are automatically arranged.

• When I try to arrange the second dialog it first moves according its position(top, left) and then resizes and all other dialogs are not automatically arranged.

• The third dialog behaves exactly the same as 2. It moves according its position (top, left) and is not arranged automatically.

Any suggestions?

Answer 1

Isotope is not made for draggable dialog boxes; see what the plugin author says regarding this type of functionality.

EDIT Fiddled around with a few more things and got the layout to rearrange when a dialog is closed with .remove(); however, dragging is not suported (see above) and resizing manually won't work either. Why do you need manual resizing of dialog boxes? Can't that be done programmatically?

Answer 2

The jquery masonry plugin can compute the new position when you call it with the masonry("reload") function on the surrounding container after you have resized the dialog boxes or add or remove items. I used it in my Javascript when I add or remove an image to my surrounding container. You can see the Masonry plugin working live in my homepage at the web address http://www.chihoang.de.

This is my prepend and append function with masonry("reload") at the end:

         if (ele.Additem == "Append") {
          container.append($j("#brickTemplate").tmpl(ele).css({
            "display": "block"
          })).masonry('reload');
         } else if (ele.Additem == "Prepend") {
          container.prepend($j("#brickTemplate").tmpl(ele).css({
            "display": "block"
          })).masonry('reload');
        }

And this is my remove function:

        $j('.brick').remove(":contains('" + ele.Headline + "')");
        container.masonry('reload');