when display none applied doesn't slidearound

[oceatoon]

Hi
is there a way when hidding (display:none)
an element of a grid to the rest is slide into the gap ?
is it possible to move that hidden element in last position ? like a drag drop ?
This way others will reposition properly and there will be no gap

Thanks
Tibor

[oceatoon]

please add the code connected to the filter buttons
I cannot find it , i think my answer lies their :)
Thanks
Tibor

[justinkneff]

One way to fill in the gap is to call the shuffle event afterwards:
$(".ss-container").trigger("ss-shuffle") or $(".ss-container").trigger("ss-rearrange") where '.ss-container' is the class you defined for shapeshift. So it would look something like this
function HideTarget(targetId){
//other events you determine need to occur.
$('#' + targetId).css('display', 'none');
$(".ss-container").trigger("ss-shuffle")
}

Edit: I changed to use the API function calls

[oceatoon]

hmm it seem to work that way
I'm first hiding some elements then applying your triggers
this doesn't fill the empty spaces , like the Hide Random works on the demo
do you have the code behind that ?

[justinkneff]

You may have another problem not related to shapeshift with the way you have your elements designed. If you view source on the page(IE is F12 > Script > view.js, FireFox Shift + F2 > Debugger > view.js) You can see it users ss-rearrange.
if(val === "hide") {
$container.children(":visible").sort(function() {
return Math.round(Math.random()) - 0.5;
}).first().hide();
} else {
$container.children(":hidden").sort(function() {
return Math.round(Math.random()) - 0.5;
}).first().show();
}

      $container.trigger("ss-rearrange")

[oceatoon]

my html is fairly simple and straight forward

div id="grid"
div class="people type1">ELem
div class="people type1">ELem
div class="people type2">ELem
....
/div

function filterType(type,color){
$(".people ").hide();
$("."+type).show();

$(".grid").trigger("ss-rearrange");

}
But I still get strange behaviors
it's not perfect as the demo