|
1 --- |
|
2 |
|
3 title: Help |
|
4 category: docs |
|
5 layout: default |
|
6 toc: |
|
7 - { title: Reporting bugs and issues, anchor: reporting_bugs_and_issues } |
|
8 - { title: Additional resources, anchor: additional_resources } |
|
9 - { title: Unloaded media, anchor: unloaded_media } |
|
10 - { title: Images, anchor: images } |
|
11 - { title: @font-face fonts, anchor: fontface_fonts } |
|
12 - { title: Problems with CSS transforms, anchor: css-transforms } |
|
13 - { title: Getting item position, anchor: getting_item_position } |
|
14 - { title: Accessing the instance, anchor: accessing_the_instance } |
|
15 - { title: CSS transforms in Opera, anchor: css_transforms_in_opera } |
|
16 - { title: Infinite Scroll with filtering or sorting, anchor: infinite_scroll_with_filtering_or_sorting} |
|
17 - { title: Poor type rendering in WebKit, anchor: poor_type_rendering_in_webkit } |
|
18 - { title: First item breaks Masonry layout, anchor: first_item_breaks_masonry_layout } |
|
19 - { title: Right-to-left layouts, anchor: righttoleft_layouts } |
|
20 - { title: Preventing clicks on filtered items, anchor: unclickable-filtered } |
|
21 |
|
22 --- |
|
23 |
|
24 |
|
25 ## Reporting bugs and issues |
|
26 |
|
27 Please read my [Issues Agreement](https://github.com/desandro/issues-agreement/#readme) and then [report bugs and issues on GitHub](http://github.com/desandro/isotope/issues). |
|
28 |
|
29 ## Additional resources |
|
30 |
|
31 + The [Metafizzy blog](http://metafizzy.co/blog/) has posts that cover specialized use cases |
|
32 + [Various Isotope tests on jsFiddle](http://www.delicious.com/desandro/re:isotope+fiddle) |
|
33 + [My answers on Stack Overflow](http://stackoverflow.com/users/182183/desandro?tab=answers) |
|
34 + [Sites using Isotope on Zootool](http://zootool.com/user/desandro/tag:isotope), has screenshots |
|
35 + [Sites using Isotope on Delicious](http://www.delicious.com/desandro/using:isotope) |
|
36 + [Miscelleanous Isotope content](http://www.delicious.com/desandro/re:isotope) |
|
37 |
|
38 ## Unloaded media |
|
39 |
|
40 Most layout modes (i.e masonry, fitRows) need to measure the size of each item to appropriately account for its space in the layout. Unloaded media files like images and @font-face fonts can throw off layout and cause item elements to overlap one another. Ideally, Isotope layouts should be initialized after all inner content has loaded. |
|
41 |
|
42 ## Images |
|
43 |
|
44 ### Inline dimensions |
|
45 |
|
46 For images, the best method is to specify the width and height of images inline. |
|
47 |
|
48 {% highlight html %} |
|
49 |
|
50 <img src="img-file.jpg" width="280" height="160" /> |
|
51 |
|
52 {% endhighlight %} |
|
53 |
|
54 If you’re using a PHP-based CMS, you can use the [getimagesize](http://php.net/manual/en/function.getimagesize.php) function. |
|
55 |
|
56 ### imagesLoaded plugin |
|
57 |
|
58 The next best solution is to use the [imagesLoaded plugin](https://github.com/desandro/imagesloaded) included with Isotope. It's a small plugin that finds all the images in a context, and fires a callback function once all the images have loaded. |
|
59 |
|
60 {% highlight javascript %} |
|
61 |
|
62 var $container = $('#container'); |
|
63 |
|
64 $container.imagesLoaded( function(){ |
|
65 $container.isotope({ |
|
66 // options... |
|
67 }); |
|
68 }); |
|
69 |
|
70 {% endhighlight %} |
|
71 |
|
72 ### `$(window).load()` |
|
73 |
|
74 Another solution is to initialize Isotope inside `$(window).load()` instead of `$(document).ready()`. This will trigger Isotope after all the media on the page has loaded. |
|
75 |
|
76 {% highlight javascript %} |
|
77 |
|
78 $(window).load(function(){ |
|
79 $('#container').isotope({ |
|
80 // options... |
|
81 }); |
|
82 }); |
|
83 |
|
84 {% endhighlight %} |
|
85 |
|
86 ## @font-face fonts |
|
87 |
|
88 Both Typekit and Google WebFont Loader provide font events to control scripts based on how fonts are loaded. |
|
89 |
|
90 + [Typekit font events](http://blog.typekit.com/2010/10/18/more-control-with-typekits-font-events/) |
|
91 + [Google WebFont Loader: Events](http://code.google.com/apis/webfonts/docs/webfont_loader.html#Events) |
|
92 |
|
93 ## Problems with CSS transforms {: #css-transforms} |
|
94 |
|
95 As the browser implementations of CSS tranforms are still a work-in-progress, they can cause buggy behavoir with other types of dynamic content. |
|
96 |
|
97 <div id="flash"></div> |
|
98 |
|
99 + [Flash content in Safari and Firefox](http://dropshado.ws/post/4085720152/css-transforms-breaking-flash), like YouTube or Vimeo videos, Flash ads, or Flash audio players. |
|
100 |
|
101 ### Disabling transforms |
|
102 |
|
103 Set [`transformsEnabled`](options.html#transformsenabled) to `false`. This is an easy step to take when troubleshooting. |
|
104 |
|
105 {% highlight javascript %} |
|
106 |
|
107 $('#container').isotope({ |
|
108 // options... |
|
109 transformsEnabled: false |
|
110 }); |
|
111 |
|
112 {% endhighlight %} |
|
113 |
|
114 ## Getting item position |
|
115 |
|
116 CSS transforms will break previous patterns for getting the position of an item. See the [`itemPositionDataEnabled`](options.html#itempositiondataenabled) option for a stop-gap. |
|
117 |
|
118 ## Accessing the instance |
|
119 |
|
120 [Similar to jQuery UI](http://docs.jquery.com/UI_Developer_Guide#Internal_functions_.26_scopes_explained), Isotope stores a instance containing properties, settings and methods with jQuery.data. You can access the instance with the `'isotope'` namespace. |
|
121 |
|
122 {% highlight javascript %} |
|
123 |
|
124 var $container = $('#container'); |
|
125 |
|
126 // initialize Isotope instance |
|
127 $container.isotope({ |
|
128 // options... |
|
129 }); |
|
130 |
|
131 // get Isotope instance |
|
132 var isotopeInstance = $container.data('isotope'); |
|
133 isotopeInstance.options; // options |
|
134 isotopeInstance.$filteredAtoms; // jQuery object of filtered & sorted item elements |
|
135 isotopeInstance.masonry.columnWidth; // Layout mode specific properties |
|
136 |
|
137 {% endhighlight %} |
|
138 |
|
139 ## CSS transforms in Opera |
|
140 |
|
141 [Using CSS transforms in older versions Opera (< 12) distorts text rendering](http://dropshado.ws/post/1260101028/opera-transform-issues). See how to enable [CSS transitions with top, left positioning](options.html#transformsEnabled-css). |
|
142 |
|
143 ## Infinite Scroll with filtering or sorting |
|
144 |
|
145 I recommend against using Infinite Scroll with filtering or sorting. This combination produces a unnecessarily complex user interaction that will frustrate your users. New content gets added, but part of it might be hidden. There is no way for the user to tell what gets hidden or re-arranged when Infinite Scroll adds more content. Exercise [moderation](introduction.html#moderation) with your Isotope implementation. |
|
146 |
|
147 If you do plan on implementing Infinite Scroll with filtering or sorting (which is a _bad idea_), use the `insert` method instead of `appended`. |
|
148 |
|
149 ## Poor type rendering in WebKit |
|
150 |
|
151 Type rendering may appear poor in WebKit browsers like Chrome and Safari. This is because of Isotope's activation of hardware acceleration. A 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). Another solution is to [disable transforms](#disabling_transforms). |
|
152 |
|
153 ## First item breaks Masonry layout |
|
154 |
|
155 With [Masonry layout mode](layout-modes.html#masonry) If you run into an issue where you re-size the first item, and all the rest of the items no longer fit together in the grid, you most likely need to set [`columnWidth` option](layout-modes.html#masonry-options). Without `columnWidth` set, the Masonry layout mode will use the width of the first item for the size of its columns. |
|
156 |
|
157 {% highlight javascript %} |
|
158 |
|
159 $('#container').isotope( |
|
160 masonry: { |
|
161 columnWidth: 220 |
|
162 } |
|
163 }); |
|
164 |
|
165 {% endhighlight %} |
|
166 |
|
167 ## Right-to-left layouts |
|
168 |
|
169 Isotope can be modified to support right-to-left layouts for languages like Hebrew and Arabic. |
|
170 |
|
171 [**See test: Right to left**](../tests/right-to-left.html) |
|
172 |
|
173 You'll need to make the following changes: |
|
174 |
|
175 + Modify Isotope's `_positionAbs` method |
|
176 + Set `transformsEnabled: false` in the Isotope options |
|
177 + Add CSS transition property styles for right/top. |
|
178 |
|
179 ### JavaScript for right-to-left support |
|
180 |
|
181 {% highlight javascript %} |
|
182 |
|
183 // modify Isotope's absolute position method |
|
184 $.Isotope.prototype._positionAbs = function( x, y ) { |
|
185 return { right: x, top: y }; |
|
186 }; |
|
187 |
|
188 // initialize Isotope |
|
189 $('#container').isotope({ |
|
190 transformsEnabled: false |
|
191 // other options... |
|
192 }); |
|
193 |
|
194 {% endhighlight %} |
|
195 |
|
196 ### CSS for right-to-left support |
|
197 |
|
198 {% highlight css %} |
|
199 |
|
200 .isotope .isotope-item { |
|
201 -webkit-transition-property: right, top, -webkit-transform, opacity; |
|
202 -moz-transition-property: right, top, -moz-transform, opacity; |
|
203 -ms-transition-property: right, top, -ms-transform, opacity; |
|
204 -o-transition-property: right, top, -o-transform, opacity; |
|
205 transition-property: right, top, transform, opacity; |
|
206 } |
|
207 |
|
208 {% endhighlight %} |
|
209 |
|
210 ## Preventing clicks on filtered items {: #unclickable-filtered} |
|
211 |
|
212 The [recommended CSS for filtering](filtering.html#recommended_css) includes `pointer-events: none` for `.isotope-hidden`. Unfortunately, Opera and Internet Explorer still let click events propagate with this style in place. But you can still dismiss click events in your click handler by checking to see if the element or element's parent is a filtered item. |
|
213 |
|
214 [See test: Unclickable filtered](../tests/unclickable-filtered.html) |
|
215 |
|
216 {% highlight javascript %} |
|
217 |
|
218 $('.item a').click(function(){ |
|
219 var $this = $(this); |
|
220 // back out if hidden item |
|
221 if ( $this.parents('.isotope-item').hasClass('isotope-hidden') ) { |
|
222 return; |
|
223 } |
|
224 // otherwise, continue to do stuff... |
|
225 console.log('item was clicked'); |
|
226 }); |
|
227 |
|
228 {% endhighlight %} |