Does anyone have experience with isotope element resizing?

Hello,

Im using Isotype v2 to build a page on a client site and I cant seem to get the element resizing to work properly.

here is what im referring to: http://isotope.metafizzy.co/options.html#element-sizing and http://isotope.metafizzy.co/layout-modes/masonry.html#columnwidth

Im trying to set the width of the div element with the grid-sizer option, but I can it get it to work.

Here is my code

jQuery(document).ready(function($) {

	var $container =  $('#content').isotope({
	  itemSelector: '.moku_item',
	  masonry: {
  					columnWidth: $container.find('.grid-sizer')[0],
					gutter: 5,
					isFitWidth: true

				},
				transitionDuration: '0.5s',
				hiddenStyle: {
				opacity: 0,
				transform: 'scale(0)'
							  },
							  visibleStyle: {
								opacity: 1
							  }
				});

var filterFns = {
  standard: (function($) {
    var name = jQuery(this).find('.name').text();
    return name.match( /standard$/ );

  }),
  image: (function($) {
    var name = jQuery(this).find('.name').text();
    return name.match( /image$/);
  })
};	

// filter items on button click
$('#filters').on( 'click', 'button', (function() {
  var filterValue = $(this).attr('data-filter');
  // use filter function if value matches
  filterValue = filterFns[ filterValue ] || filterValue;
  //console.log("this is " + filterValue);
  $container.isotope({ filter: filterValue });
  //$container.fadeIn();
}));
  $container.on( 'click', '.moku_item-content', (function() {
    $( this ).parent('.moku_item').toggleClass('is-expanded');
    $container.isotope('layout');
  }));

});

through wordpress ive managed to set the first div with the .grid-sizer class and the rest with .moku_item

Thank you for any help you can offer

Im not the best with jquery at all. So I can not figure out what im doing wrong. Any help would be awesome.

  • odotjdot

    Cool thanks.

    I found a way to do this, kind of. What Im trying to do for this client is SUPER complex. He seems to think it can be done, and its starting to seem like it. Im trying to take myself through this one bit at a time.

    I basically have this same code as here:

    http://codepen.io/desandro/pen/utGrv

    jQuery(document).ready(function($) {
    
    var transitionProp = getStyleProperty('transition');
    var transitionEndEvent = {
      WebkitTransition: 'webkitTransitionEnd',
      MozTransition: 'transitionend',
      OTransition: 'otransitionend',
      transition: 'transitionend'
    }[ transitionProp ];
    
    $( function() {
    
      var $container = $('#content').isotope({
        itemSelector: '.moku_item',
    		isFitWidth: true,
        masonry: {
          columnWidth: '.grid-sizer'
        }
      });
    
    var filterFns = {
      standard: (function($) {
        var name = jQuery(this).find('.name').text();
        return name.match( /standard$/ );
      }),
      image: (function($) {
        var name = jQuery(this).find('.name').text();
        return name.match( /image$/);
      })
    };
    
    // filter items on button click
    $('#filters').on( 'click', 'button', (function() {
      var filterValue = $(this).attr('data-filter');
      // use filter function if value matches
      filterValue = filterFns[ filterValue ] || filterValue;
      //console.log("this is " + filterValue);
      $container.isotope({ filter: filterValue });
      //$container.fadeIn();
    }));
    
      $container.on( 'click', '.moku_item-content', function( event ) {
        var $this = $(this);
        var previousContentSize = getSize( this );
        // disable transition
        this.style[ transitionProp ] = 'none';
        // set current size
        $this.css({
          width: previousContentSize.width,
          //height: previousContentSize.height
        });
    
        var $itemElem = $this.parent().toggleClass('is-expanded');
    
        // force redraw
        var redraw = this.offsetWidth;
    
        // renable default transition
        this.style[ transitionProp ] = '';
    
        // reset 100%/100% sizing after transition end
        if ( transitionProp ) {
          var _this = this;
          var onTransitionEnd = function() {
            _this.style.width = '';
           _this.style.height = '';
          };
          $this.one( transitionEndEvent, onTransitionEnd );
        }
    
        // set new size
        var size = getSize( $itemElem[0] );
        $this.css({
          width: size.width,
        //  height: size.height
        });
    
        $container.isotope('layout');
    
      });
    
    });	
    
    });

    And here is the css

    .moku_item {
    	  width: 25%;
    }
    .moku_item-content  {
      width:  100%;
      height: 100%;
    	-webkit-transition: width 0.4s, height 0.4s;
         -moz-transition: width 0.4s, height 0.4s;
           -o-transition: width 0.4s, height 0.4s;
              transition: width 0.4s, height 0.4s;
    	float: left;
      background: #ccc;
    }
    /*.moku_item.is-expanded {
      z-index: 2;
    }*/
    
    .moku_item.is-expanded{
      width: 30%;
    }

    I have it working for the most part. This is basically the first step. Next i will be setting all the items at different sizes, then inserting content between the items.
    Im figuring out that all the widths you set have to be divisible (i forget the exact math term.) But basically all width have to equal 100% for everything to space evenly. Also, with these items being different heights, the items under resized items will start to get all funky.

    I would use packery: http://packery.metafizzy.co/
    but I dont see any documentation on how to use it with wordpress. Im assuming its just like isotope but a tad different. But Im not the best with jquery. So thats a little ambitious for me (more than this here). I plan on learning everything I can about jquery this year. Not being able to do stuff like this is getting frustrating lol.

    I want to set up a test page so you all can see what im dealing with. But Im constantly changing it. I dont know how to exactly post a working version of this code any where

    Thanks for all your help guys

  • odotjdot

    Hello, back again lol.

    Ive made an example and I have more clear direction of what I need and what to do.

    What I need to do, on the most basic level, is to filter and sort. Right now there are 2 different sets of buttons that control the filtering and the sorting.

    In the future I hope to get both of those functions working at the same time.
    Ive already figured out how to size the elements how i need to. I cant get the filtering and sorting to work together.

    I can not figure out what Im doing wrong to save my life.

    I am working with isotope v2 (im thinking i should switch over to the first version at this point.)

    Here is the test page I set up:
    http://projects.funkmedia.net/moku/test.html

    Here is an example of sorting:
    http://codepen.io/desandro/pen/sxAJL

    Combo sort:
    http://codepen.io/desandro/pen/JEojz/

    Filter and Sort working together: (but with v1)
    http://codepen.io/desandro/pen/nFrte

    And basically (after some searching) exactly what im trying to do here:
    http://j-arellano.com/extending-isotope-sorting-data/

    and the result here:
    http://base22.com/wps/portal/home/about-us/our-team

    but this is using v1. Im going to try this out when I get home and stop being mad lol. Im going to try to use the v1 commands with v2 and take out all the depreciated (is that the right term??) functions, etc. like animationengine.

    Thanks for any help you all can offer.

    if I ever figure this out, I will post my results and findings here for every one to use.

    thanks again.

  • odotjdot

    No problem.

    Ive actually figured out how to do what I was looking to do at a very primitive and basic level lol.

    it can be seen here: http://projects.funkmedia.net/moku/test_sort.html

    The code and layout and everything else is very sloppy. The only set of buttons that work are the shape buttons to the right.

    the "round" filters the round elements and sorts them by color. blue, red, yellow.

    the "square" button filters square elements and sorts them by element. fire, gold, water.

    now im on to the next portion which is to be able to click on one of those isotope items and have that element get larger, sort and filter by whichever item is clicked

    for example. Lets say that the user clicks on one of the gold items. The gold items would be presented first, the item clicked would get larger, and then everything else would filter out (eventually just go dim, not totally off of sight).
    the next step from there would be clicking on the gold item, sorting by gold, then adding new gold elements that would also be sorted by number or... something. I havent gotten that far yet.

    Also, all of this will eventually be built in wordpress. Right now, Im just trying to build this thing one step at a time.

    Thanks for all of your help guys. I will continue to post my progress. Im almost there.

  • Hoang Ngo

    Hi @odotjdot,

    I hope you are well today and I'm very sorry about the delay.

    As i know, Isotope only support to sort by value a-z or z-a, so if you want to make a middie items in the sort go to the first, it still not support that.

    But i think this way will work, how about if firstly, you get all the items
    $container.isotope('getItemElements');

    And then, do a loop to remove all the item same color from the container, after that, you prepend that again, so it will be on the first.

    For make an item look larger, you can use the function toggleClass('class') of jquery to update the look of clicked item.

    If you have any issues please don't hesitate to let us know so we can assist

    Best Regards
    Hoang

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.