Browse Source

Merge branch 'master' into gh-pages

v1
David DeSandro 13 years ago
parent
commit
52d6238f39
  1. 43
      _posts/docs/2011-12-11-help.mdown
  2. 150
      _posts/tests/2011-08-19-right-to-left.html

43
_posts/docs/2011-12-11-help.mdown

@ -15,6 +15,7 @@ toc:
- { title: Infinite Scroll with filtering or sorting, anchor: infinite_scroll_with_filtering_or_sorting} - { title: Infinite Scroll with filtering or sorting, anchor: infinite_scroll_with_filtering_or_sorting}
- { title: Flash, anchor: flash } - { title: Flash, anchor: flash }
- { title: Poor type rendering in WebKit, anchor: poor_type_rendering_in_webkit } - { title: Poor type rendering in WebKit, anchor: poor_type_rendering_in_webkit }
- { title: Right-to-left layouts, anchor: righttoleft_layouts }
--- ---
@ -154,3 +155,45 @@ The best way to resolve this issue is to disable CSS transforms by setting the [
## Poor type rendering in WebKit ## Poor type rendering in WebKit
Type rendering may appear poor in WebKit browsers like Chrome and Safari. This is because of Isotope's activation of hardware acceleration. The solution is to add add a matching background to the item elements. See more: [dropshado.ws - Resolving anti-aliasing on WebKit hardware-accelerated elements](http://dropshado.ws/post/6142339613/resolving-anti-aliasing-on-webkit-hardware-accelerated). Type rendering may appear poor in WebKit browsers like Chrome and Safari. This is because of Isotope's activation of hardware acceleration. The solution is to add add a matching background to the item elements. See more: [dropshado.ws - Resolving anti-aliasing on WebKit hardware-accelerated elements](http://dropshado.ws/post/6142339613/resolving-anti-aliasing-on-webkit-hardware-accelerated).
## Right-to-left layouts
Isotope can be modified to support right-to-left layouts for languages like Hebrew and Arabic.
[**See test: Right to left**](../tests/right-to-left.html)
You'll need to make the following changes:
+ Modify Isotope's `_positionAbs` method
+ Set `transformsEnabled: false` in the Isotope options
+ Add CSS transition property styles for right/top.
### JavaScript for right-to-left support
{% highlight javascript %}
// modify Isotope's absolute position method
$.Isotope.prototype._positionAbs = function( x, y ) {
return { right: x, top: y };
};
// initialize Isotope
$('#container').isotope({
transformsEnabled: false
// other options...
});
{% endhighlight %}
### CSS for right-to-left support
{% highlight css %}
.isotope .isotope-item {
-webkit-transition-property: right, top, -webkit-transform, opacity;
-moz-transition-property: right, top, -moz-transform, opacity;
-o-transition-property: right, top, -o-transform, opacity;
transition-property: right, top, transform, opacity;
}
{% endhighlight %}

150
_posts/tests/2011-08-19-right-to-left.html

@ -0,0 +1,150 @@
---
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;
-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.</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>
Loading…
Cancel
Save