---

title: Right to left

layout: default

category: tests

body_class: demos

---

<style>

  #content { direction: rtl; }

  #options li { float: right; }

  .isotope .isotope-item {

    -webkit-transition-property: right, top, -webkit-transform, opacity;

       -moz-transition-property: right, top, -moz-transform, opacity;

        -ms-transition-property: right, top, -ms-transform, opacity;

         -o-transition-property: right, top, -o-transform, opacity;

            transition-property: right, top, transform, opacity;

  }

</style>

<section id="copy">

  <p>Isotope can support right-to-left layouts for languages like Hebrew and Arabic. See docs: <a href="../docs/help.html#righttoleft_layouts">Help - Right to left layouts</a>.</p>

</section>

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

  {% include filter-buttons.html %}

  {% include sort-buttons.html %}

  {% include layout-options.html %}

  <h3>Etc</h3>

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

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

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

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

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

  </ul>

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

<div id="container" class="clickable clearfix">

  {% for elem_number in site.best_of_order %}

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

    {% include element-partial.html %}

  {% endfor %}

</div>

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

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

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

<script>

  $.Isotope.prototype._positionAbs = function( x, y ) {

    return { right: x, top: y };

  };

  $(function(){

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

    {% include random-sizes.js %}

    $container.isotope({

      itemSelector : '.element',

      transformsEnabled: false,

      masonry : {

        columnWidth : 120

      },

      masonryHorizontal : {

        rowHeight: 120

      },

      cellsByRow : {

        columnWidth : 240,

        rowHeight : 240

      },

      cellsByColumn : {

        columnWidth : 240,

        rowHeight : 240

      },

      getSortData : {

        symbol : function( $elem ) {

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

        },

        category : function( $elem ) {

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

        },

        number : function( $elem ) {

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

        },

        weight : function( $elem ) {

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

        },

        name : function ( $elem ) {

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

        }

      }

    });

    var $optionSets = $('#options .option-set'),

        $optionLinks = $optionSets.find('a');

    $optionLinks.click(function(){

      var $this = $(this);

      // don't proceed if already selected

      if ( $this.hasClass('selected') ) {

        return false;

      }

      var $optionSet = $this.parents('.option-set');

      $optionSet.find('.selected').removeClass('selected');

      $this.addClass('selected');

      // make option object dynamically, i.e. { filter: '.my-filter-class' }

      var options = {},

          key = $optionSet.attr('data-option-key'),

          value = $this.attr('data-option-value');

      // parse 'false' as false boolean

      value = value === 'false' ? false : value;

      options[ key ] = value;

      if ( key === 'layoutMode' && changeLayoutMode ) {

        // changes in layout modes need extra logic

        changeLayoutMode( $this, options )

      } else {

        // otherwise, apply new options

        $container.isotope( options );

      }

      return false;

    });

    {% include layout-change.js %}

    {% include change-sizes.js %}

    {% include add-buttons.js %}

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

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

      $container.isotope('shuffle');

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

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

      return false;

    });

  });

</script>