---

title: Help
category: docs
layout: default
toc:
  - { title: Reporting bugs and issues, anchor: reporting_bugs_and_issues }
  - { title: Additional resources, anchor: additional_resources }
  - { title: Unloaded media and overlapping, anchor: unloaded_media_and_overlapping }
  - { title: @font-face fonts, anchor: fontface_fonts }
  - { title: First item breaks grid, anchor: first_item_breaks_grid }
  - { title: Filtering, anchor: filtering }
  - { title: Getting data, anchor: getting_data }
  - { title: Other frameworks, anchor: other_frameworks }

---

jQuery Masonry is a fairly popular plugin. Chances are your issue has already been encountered by someone else.

## Reporting bugs and issues

Please read my [Issues Agreement](https://github.com/desandro/issues-agreement/#readme) and then [report bugs and issues on GitHub](http://github.com/desandro/masonry/issues). 

## Additional resources

+ The [Metafizzy blog](http://metafizzy.co/blog/) has posts that cover specialized use cases
+ [My answers on Stack Overflow](http://stackoverflow.com/users/182183/desandro?tab=answers)
+ [Various Masonry tests on jsFiddle](http://www.delicious.com/desandro/re:masonry+fiddle)
+ [Sites using Masonry on Delicious](http://www.delicious.com/desandro/jquerymasonry)
+ [Sites using Masonry on Zootool](http://zootool.com/user/desandro/tag:masonry) (has screenshots)
+ [Stack Overflow questions about Masonry](http://stackoverflow.com/search?q=masonry)
+ [Related Masonry links](http://www.delicious.com/desandro/re:masonry)
+ Other resources that are [like Masonry but not](http://www.delicious.com/desandro/likemasonrybutnot)

## Unloaded media and overlapping

The number one issue that pops up is overlapping content. This is most likely due to unloaded images.

### imagesLoaded plugin

The easiest solution is to use the <a href="intro.html#imagesloaded_plugin">imagesLoaded plugin</a> as shown in the intro. This small plugin will trigger a callback after all the images in the specified content have been loaded.

[See Demo: Images](../demos/images.html).

### Inline dimensions

Or you can specify the width and height of images inline.

{% highlight html %}

<img src="img-file.jpg" width="280" height="160" />

{% endhighlight %}

If you’re using a PHP-based CMS, you can use the [getimagesize](http://php.net/manual/en/function.getimagesize.php) function.

### $(window).load()

Another solution is to initialize Masonry inside `$(window).load()` instead of `$(document).ready()`. This will trigger Masonry after all the media on the page has loaded -- images, fonts, external scripts and stylesheets, etc. This method is not recommended as it can cause ugly wait times.

{% highlight javascript %}

$(window).load(function(){
  $('#container').masonry({
    // options...
  });
});

{% endhighlight %}

## @font-face fonts

Both Typekit and Google WebFont Loader provide font events to control scripts based on how fonts are loaded. 

+ [Typekit font events](http://blog.typekit.com/2010/10/18/more-control-with-typekits-font-events/)
+ [Google WebFont Loader: Events](http://code.google.com/apis/webfonts/docs/webfont_loader.html#Events)

### Typekit

Try the script below when using Masonry on a page with Typekit. This will trigger Masonry when the document is ready and again when fonts have loaded. Be sure to remove Typekit's default script,  `try{Typekit.load();}catch(e){}`.

{% highlight javascript %}

var $container;

function triggerMasonry() {
  // don't proceed if $container has not selected
  if ( !$container ) {
    return
  }
  $container.masonry({
    // options...
  });
}

$(function(){
  $container = $('#container');
  // trigger masonry on doc ready
  triggerMasonry();
});

// trigger masonry when fonts have loaded
Typekit.load({
  active: triggerMasonry,
  inactive: triggerMasonry
});

{% endhighlight %}

## First item breaks grid

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](options.html#columnwidth). Without `columnWidth` set, Masonry will use the width of the first item for the size of its columns.

{% highlight javascript %}

$('#container').masonry({
  columnWidth: 220
});

{% endhighlight %}

## Filtering

Filtering with Masonry is officially unsupported as of v2.0. Use [Isotope](http://isotope.metafizzy.co) instead. Isotope shares a majority Masonry's features. It also has additional powerful features like filtering and sorting built right in, so you probably won't be missing any functionality.

## Getting data

You can access all the options and properties in a Masonry instance using the `.data()` method with the namespace `'masonry'`.

{% highlight javascript %}

$('#container').data('masonry');

{% endhighlight %}

## Other frameworks

+ [mooMasonry for MooTools](http://mootools.net/forge/p/moomasonry)
+ [Prototype Masonry for Prototype JS](http://www.sthoughts.com/prototype-masonry/)
