Open oceatoon opened 10 years ago
please add the code connected to the filter buttons I cannot find it , i think my answer lies their :) Thanks Tibor
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
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 ?
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")
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
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