1 ---

     2 title: Fluid / responsive

     3 layout: default

     4 category: demos

     5 ---

     6 

     7 <style>

     8   /* percentage-based widths for fluid/responsive layout */

     9   .element {

    10     margin: 5px 1%;

    11     width: 18%;

    12   }

    13 

    14   .variable-sizes .element.width2 { width: 38%; }

    15 

    16   .element.large, 

    17   .variable-sizes .element.large, 

    18   .variable-sizes .element.large.width2.height2 {

    19     width: 58%;

    20   }

    21 

    22   #container {

    23     padding: 5px 0;

    24   }

    25 </style>

    26 

    27 <section id="copy">

    28   <p>This hack allows you to use percentage-based widths for item elements for fluid / responsive layouts.</p>

    29 

    30 {% highlight javascript %}

    31 

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

    33 // initialize Isotope

    34 $container.isotope({

    35   // options...

    36   resizable: false, // disable normal resizing

    37   // set columnWidth to a percentage of container width

    38   masonry: { columnWidth: $container.width() / 5 }

    39 });

    40 

    41 // update columnWidth on window resize

    42 $(window).smartresize(function(){

    43   $container.isotope({

    44     // update columnWidth to a percentage of container width

    45     masonry: { columnWidth: $container.width() / 5 }

    46   });

    47 });

    48 

    49 {% endhighlight %}

    50 

    51 </section>

    52 

    53 <section id="options" class="clearfix">

    54 

    55   {% include filter-buttons.html %}

    56 

    57   {% include sort-buttons.html %}

    58 

    59   <h3>Etc</h3>

    60 

    61   <ul id="etc" class="clearfix">

    62     <li id="toggle-sizes"><a href="#toggle-sizes">Toggle variable sizes</a></li>

    63     <li id="insert"><a href="#insert">Insert new elements</a></li>

    64     <li id="append"><a href='#append'>Append new elements</a></li>

    65     <li id="shuffle"><a href='#shuffle'>Shuffle</a></li>

    66   </ul>

    67 

    68 </section> <!-- #options -->

    69 

    70 <div id="container" class="clickable variable-sizes clearfix">

    71   {% for elem_number in site.best_of_order %}

    72     {% assign element = site.elements[elem_number] %}

    73     {% include element-partial.html %}

    74   {% endfor %}

    75 </div> <!-- #container -->

    76 

    77 

    78 <script src="../{{ site.jquery_js }}"></script>

    79 <script src="../{{ site.isotope_js }}"></script>

    80 <script src="../js/fake-element.js"></script>

    81 <script>

    82 

    83   $(function(){

    84     

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

    86     

    87     {% include random-sizes.js %}

    88     

    89     $container.isotope({

    90       itemSelector : '.element',

    91       // disable resizing

    92       resizable: false,

    93       // set columnWidth to a percentage of container width

    94       masonry: {

    95         columnWidth: $container.width() / 5

    96       },

    97       getSortData : {

    98         symbol : function( $elem ) {

    99           return $elem.attr('data-symbol');

   100         },

   101         category : function( $elem ) {

   102           return $elem.attr('data-category');

   103         },

   104         number : function( $elem ) {

   105           return parseInt( $elem.find('.number').text(), 10 );

   106         },

   107         weight : function( $elem ) {

   108           return parseFloat( $elem.find('.weight').text().replace( /[\(\)]/g, '') );

   109         },

   110         name : function ( $elem ) {

   111           return $elem.find('.name').text();

   112         }

   113       }

   114     });

   115     

   116     // update columnWidth on window resize

   117     $(window).smartresize(function(){

   118       $container.isotope({

   119         // set columnWidth to a percentage of container width

   120         masonry: {

   121           columnWidth: $container.width() / 5

   122         }

   123       });

   124     });

   125       

   126     {% include option-set-buttons.js %}

   127 

   128     {% include add-buttons.js %}

   129 

   130     {% include change-sizes.js %}

   131 

   132     var $sortBy = $('#sort-by');

   133     $('#shuffle a').click(function(){

   134       $container.isotope('shuffle');

   135       $sortBy.find('.selected').removeClass('selected');

   136       $sortBy.find('[data-option-value="random"]').addClass('selected');

   137       return false;

   138     });

   139     

   140   });

   141 </script>