Help with what code does

This site is best viewed in a modern browser with JavaScript enabled.

zebedeee

Hello people,

I am trying to figure out how to use Isotope and Wordpress! So far I am quite lost but managed to get a simple page kind of working for Isotope!

I need to know what this line of code does and how it works so I can adapt it to control when the class width2 is added.

The main line of code that is confusing me is: if ( number % 7 % 2 === 1 ) {

Also this means I need to add a class of .number with a number inside to make some blocks a different size.

$(function(){

  var $container = $('#container');

  // add randomish size classes -
  $container.find('.item').each(function(){
    var $this = $(this),
        number = parseInt( $this.find('.number').text(), 10 );
    if ( number % 7 % 2 === 1 ) {
      $this.addClass('width2');
    }
    if ( number % 3 === 0 ) {
      $this.addClass('height2');
    }
  });

  $container.isotope({
	  itemSelector: '.item',
	  masonry : {
		  columnWidth: 240
		}
  });

});

Here is the other code if this helps but you will need to download Isotope.

<div id="container">
  <div class="item"><p class="number">20</p></div>
  <div class="item"><p class="number">2</p></div>
  <div class="item"><p class="number">2</p></div>
  <div class="item"><p class="number">3</p></div>
  <div class="item">...</div>
  <div class="item">...</div>
  <div class="item">...</div>
  <div class="item">...</div>
  <div class="item">...</div>
  <div class="item">...</div>
</div>

.item {
	width:200px;
	height:200px;
	background:#f00;
	margin:10px;
}
.width2 {
	width:420px;
	height:420px;
}

/**** Isotope Filtering ****/

.isotope-item {
  z-index: 2;
}

.isotope-hidden.isotope-item {
  pointer-events: none;
  z-index: 1;
}

/**** Isotope CSS3 transitions ****/

.isotope,
.isotope .isotope-item {
  -webkit-transition-duration: 0.8s;
     -moz-transition-duration: 0.8s;
      -ms-transition-duration: 0.8s;
       -o-transition-duration: 0.8s;
          transition-duration: 0.8s;
}

.isotope {
  -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
      -ms-transition-property: height, width;
       -o-transition-property: height, width;
          transition-property: height, width;
}

.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
     -moz-transition-property:    -moz-transform, opacity;
      -ms-transition-property:     -ms-transform, opacity;
       -o-transition-property:      -o-transform, opacity;
          transition-property:         transform, opacity;
}

/**** disabling Isotope CSS3 transitions ****/

.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
  -webkit-transition-duration: 0s;
     -moz-transition-duration: 0s;
      -ms-transition-duration: 0s;
       -o-transition-duration: 0s;
          transition-duration: 0s;
}

007Julien

In arithmetic, the Euclidean division is the conventional process of division of two integers producing a quotient and a remainder. The operator % give the remainder of division of number by n with something like number % n.

Then if (number % 3 === 0) is true if number is a multiple of three.

The condition number % 7 % 2 === 1 seems a little more subtle.
Its true if (number % 7) % 2 === 1 or number % 7 is odd.

For the first integers, its is true for the following blue integers

0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23...
Its is true sensibly once every two but with exceptions (twice false) after the third realization...

Hope that help

zebedeee

Thank you very much for your reply. I have more of an idea of what the script is doing.

I think I need to locate a better way and just add classes at random to create my different sized divs.

Thank you.

007Julien

To randomly select classes or widths, you can write :

[COLOR="#0000FF"]// a class from N (cl0, cl1, cl2 ... clN-1)[/COLOR]
var N=10;
var myRandomClasse='cl'+Math.floor(Math.random()*N);

[COLOR="#0000FF"]// but you can to choose a with or height between min and max pixels with[/COLOR]
var min=100,max=400;
var myRandomWidth=(min+Math.floor(Math.random()*(max-min+1))+'px';

[COLOR="#0000FF"]// or to chose among different widths[/COLOR]
var myWidth=[100,110,120,130,140,150,160,170,180,190,200];
var myRandomWidth=myWidth[Math.floor(Math.random()*myWidth.length)]+'px';