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