CODEWITHSUNDEEP
javascriptjqueryjquery-isotope
ZapRowsdower910
ZapRowsdower910

Reputation: 3214

isotope resort without moving the first element

I'm trying to implement the isotope lib so elements sort around my menu. After some research and tooling around I opted to set the first element in the isotope container as the menu item. I then filter it out of any manipulation I do as far as filtering or sorting.

I opted for this method as opposed to the corner-stamp method due to limitations on corner-stamping only working on elements right justified (from what I understand - I could just be miss using it though..). I'd like the menu to be in the top left hand corner.

The problem I'm running into is on shuffle. I'm trying to randomize the positions of all elements EXCEPT the first element (in this example the menu). I want to keep the menu in its place. When I try to use the shuffle to randomly reorder all the elements, I can't filter out my menu item from the available list to shuffle. This causes some navigation.. issues when the sub nav decides to fly away.

Here is an example layout: http://jsfiddle.net/ufomammut66/xwpuk/30/

So far I've tried: $('.container').isotope('shuffle');

This function only has 1 parameter - a callback. I don't see how I could manipulate the selection process here.

I've considered using the sort function, but for some reason I cannot get: $('.container').isotope({ sortBy : 'random' }); to fire more than once. Even if I did I still don't see how I could leverage this to filter out my menu.

Any help would be greatly appreciated, thanks!

EDIT : Updated jsFiddle link to include numbers on the sortable objects - helps show sorting work.

EDIT 2 : Added more detail to issue.

Upvotes: 2

Views: 2178

Answers (1)

Jeff B
Jeff B

Reputation: 30099

I believe isotope caches sorts so it doesn't have to recalculate a sort that it has already done. It even does this on "random" it seems.

A fix/hack is to reloadItems after the random sort:

$('#reorder').click(function () {
    $('.container').isotope({sortBy: 'random'}).isotope('reloadItems');
});

Demo: http://jsfiddle.net/nT66r/

As for filtering the menu item, random simply returns a random number, so there is not a lot you can do. However, you can write a custom random sort which would allow you to "filter" the menu:

getSortData: {
    name: function ($elem) {
        return $elem.data('name');
    },
    myrandom: function ($elem) {
        if($elem.hasClass('menu')) {
             return -1;   
        }
        return Math.random();
    }
}

Demo: http://jsfiddle.net/PvnMn/

Note, because menu is a class, you leave yourself open to some possible weirdness if there are multiple menu items. If you only have one, an ID is a better choice. In that case, you would use $elem.is('#menu') instead of $elem.hasClass('menu').

With #menu: http://jsfiddle.net/PvnMn/1/

Here is a version with my stab at filtering for other sorts: http://jsfiddle.net/jtbowden/Vuqgu/

Upvotes: 1

Related Questions