desandro / masonry Goto Github PK
View Code? Open in Web Editor NEW:love_hotel: Cascading grid layout plugin
Home Page: https://masonry.desandro.com
:love_hotel: Cascading grid layout plugin
Home Page: https://masonry.desandro.com
Hi,
thank for this amazing...
When i want put the wall in a fixed div :
in firefox (3.6), masonry re-arange the box in one column and the scroling working.
in ie (6-7), masonry dont care the height div and scrolling don't work
There is a way to fix it in firefox ? (I want work it in local using firefox)
Note : i am using Filtering hashes.
html :
css :
overflow-y : scroll;
height:450px;
}
sorry for my english.
Thank a lot !
Hello, please forgive me if this is a bad spot for this kind of question.
I am trying to figure out why this is happening:
http://img222.imageshack.us/img222/8043/masonry.jpg
Clearly, number 9 could go under 1
Is it because of the order in which these divs are loaded (they're numbered in that order)?
If so, what can be done before Masonry starts to "arrange" block so that number 9 goes under number 1?
Thanks a bunch in advance!
Hello!
Firstly, thanks for Jquery Masonry. It's awesome and has worked perfectly, up until now that is.
I'm trying to get the calendar items on my website to filter by their category. You can see it here: http://events.joydropper.com/.
I put in the scripts and changed everything so that it applies to my div classes and ids. However, when the category buttons are clicked, it looks like Masonry breaks. The appropriate items are made invisible, but nothing is resorted properly.
This is only a problem with the actual category items, and doesn't happen on the initial page load or when someone filters by "all."
Thanks in advance for any help with this!
Having an issue with this in IE (all versions). The elements are all being placed on top of each other.
Reverting to v1.1.3 works.
edit. It seems that the style top for the elements is being passed a value of "-infinitypx"
I've been able to get masonry working with jquery.ui.sortable and jquery.ui.resizeable all at the same time.
In my case, it required the following:
No changes to the actual code was needed.
*Tested in Chrome (fast - no performance hit), IE8 (slow, but works), Firefox (fast)
I made a Wordpress theme using Masonry, but each time I load a page the divs overlap. When I refresh the page, everything loads normal. If I click to my archives or browse to view older pages, the overlapping occurs again. Is there any way I can prevent this?
PS: I also made a tumblr theme with masonry and the same thing happened, so I don't think it has anything to do with Wordpress in particular. Maybe I am just missing something.
hello, first of all nice work! I love to lib, thanks for this!
when you updated from 1.3.0 to 1.3.1 (because of the explorer issues) i noticed a new thing
compare these urls
1.3.0
http://www.oscarsmeulders.com/clients/SOS/versie_01/test_new.html
1.3.1
http://www.oscarsmeulders.com/clients/SOS/versie_02/test_new.html
i used the same code, only a different version of masonry, But with version there are gaps.
or am i doing something wrong?
thanks
I'm having trouble where this page doesn't seem to be getting arranged as expected... it looks like common floats. I just can't seem to figure out what's going on. I've broken the page down to a simple example: http://gist.github.com/570057
The new Version doesn't work in Internet Explorer, the older Version 1.2.0 does. Any clue?
Can anyone confirm if they have used infinitescroll and filtering at the same time with any success?
Thanks for an amazing plugin by the way, one of the best I've used.
I'm using Vollkorn with Masonry, and I get a broken layout if I call masonry when $(window).ready. I assume this is because Masonry doesn't yet know the metrics of the Vollkorn font. Is there a way to fix this?
I am not sure what is going on. I am using the WP theme from here: http://shakenandstirredweb.com/themes/
If you look at the page I put together: v1.pedrogomez.com, when you resize the page, the images do not re-shuffle correctly, rather it goes into two columns when there is plenty of room for a third column. Any thoughts?
Thanks for your help.
-pg
When boxes are hidden while filtering, links inside them are still active
Hey David, great plugin by the way!
I am using masonry in Ruby on Rails app where using ajax I update and replace the masonry content. At first I would just call the masonry init line again but after I updated the content with ajax and tried to resize, the masonry content would flash while the window was being being resized then would appear kind of rearranged but not stacked close together as it was on the initial page load.
Next I tried using code similar to your append example in the docs after the ajax update was complete.
$('#masonry_container').append($('div.brick')).masonry({ appendContent: $('div.brick') });
This got rid of the flashing during window resize and the bricks are a lot closer than they were after the ajax without the "appendContent" option.
I am just wondering if it's possible to animate and append content?
Many thanks in advance,
Chris
Using the following code on a Drupal site, I experience crashes on Chrome when pages are loaded that don't have the .brick div element.
$(window).load(function() {
$('#pagecontent').masonry({ itemSelector: '.brick', resizeable: 'false', saveOptions: 'false' });
})
Note, I've chosen to load the jquery.masonry.js and insert the javascript by hand in my theme files rather than using a contributed module or using a module to load the script.
Hi.
I am using the masonry plugin inside a layout maded by the layout plugin. I test the resizable feature work fine with the divs are located in a single page but when use in the center panel of the layout of the layout plugin, then not resize nothing.
Thanks.
Hi,
I need to apply extra jquery actions after masonry have rearranged the boxes, I don't know where I can paste my code in your plugin.
Right now I have to resize screen one more time for my code to be run...
I d'like this to be run every time boxes get rearranged.
Thank you
Hello,
I am using Masonry with Tumblr so I have the issue as everyone know/ stated in the Primer page of the demo. The effect only comes in after everything is loaded. How can I solve this or display a spinning icon while the content is being loaded.
Thanks
Quick point:
The FAQ about disable masonry should also mention the need to remove the $.data()
for masonry as well. Otherwise, things get wonky if you try to re-apply masonry later.
Longer point:
I don't see disabling/removing as an edge case. The primary example (and the one I need it for) is for switching views on the same data, i.e., switching between a list view and grid (masonry) view. Now, I understand that it would be very difficult to completely undo masonry without potentially stepping on something else (another plugin, or some custom stuff). However, I think there are a few things that could be done.
One idea is to add a disable()
method to masonry, that takes care of event and data management. It's a pretty brittle solution to manually remove these things. For example, what if masonry changes what it calls the events or the data? My disabling code becomes broken.
The bigger issue (and the one that could step on other plugins or user code) is resetting styles. However, why can't you set the current element styles ( with attr('styles')
) to a data attribute on the element? Then, on disable, you could just set it back. I realize it's not perfect (what about styles added after the initial masonry binding?), but I think it's workable and more easily explained.
Is this bad? Why?
Thanks for this plug in David, it's pretty cool. I was having a problem similar to this guy...
http://github.com/desandro/masonry/issues/unreads#issue/23
...but I saw he upgraded to version 1.3.1 and it resolved the problem, I did the same and it sorted the problem, however it seems to have come back for some reason. The boxes overlap on first page load, when you set the filter to show all they all go into place perfectly, it's just the initial layout on page load where all the boxes overlap on one horizontal line. There is a live URL of the problem here
http://stephenrobertskinner.com/work
I'm on a Mac using latest builds of Chrome and Firefox and the site runs through Expression Engine.
Thank you for any help!
It's possible to get filtering to work with infinite scroll, but the layouts gets very broken. Issues:
Hi !
After first upload of web page http://makler.if.ua/ Google Chrome sticks all of the brick together, zoom-in-zoom-out in browser fix this problem. Please help me to find a solution for the best perfomance. Thank you.
Hi, is it possible to use Masonry to fit X number of same-height images into a sidebar div, based on the height of the main content div? That is, on a page with a lot of long text content, load a dozen images into the sidebar, but on a short content page only load 3?
Thanks, even if this isn't possible, I can imagine a lot of great uses for Masonry.
First of all: Great jquery plugin! Really easy to use and to modify. I just have one problem which I can't solve. In the grid of all the div boxes I want a single div box stick to the upper right corner. The other div boxes have to float "around" and not affect this box in the upper right corner. I hope this question is clear enough. Otherwise I can always upload a image to make it more clear.
Cheers and thanks!
firefox OK, IE7&8 OK.
but all of my divs were simply arranging in a vertical column with style="position: absolute; left: 0px; top: XXXpx;"
give those divs a float:left; and they get masoned properly in chrome/safari.
Hi,
Is there any way to make Masonry avaiable in a horizontal way?
I mean, to position divs setting max height not max width?
Thank you.
Masonry is remarkable.
Hi. I'm experiencing great problems with the masonry plugin and IE7. Everything get stuffed together, and when I look into the code, the items doesn't get styled (absolute positioning etc.) like in other browsers...
See screenshots from IE7 – both from the official site and the one I'm developing;
http://dl.dropbox.com/u/1134061/ie_01.png
http://dl.dropbox.com/u/1134061/ie_02.png
I thought this was compatible with IE7?
Thanks..
Bjarne
Masonry layouts break when you zoom or resize text in the browser.
See example here (2:50) http://screenr.com/prp
hi,
is it possible to have everything floating to the right so it can be used in a right-to-left language layout (such as hebrew)....
i tried it with the vgrid script and it was easy enough to get the right float, but this masonry script is much better documented and has filtering which i need for my project... now if only i can get right-to-left alignment :)
cheers
dog
Seems to be issues when using @font-face... instead of trying to explain it here... i did a quick screencast on the problems... http://screenr.com/prp
Thanks!
Hey hey,
Great plugin that I've been meaning to test/learn since I discovered it.
The issue I face is that I am setting up my page so all of my elements are in a specific order. I'm noticing that Masonry is re-ordering the elements when it positions them. The end result that I am hoping to achieve is this:
http://jacobdubail.com/jacobdubail/examples/test/images/good.png
but what I'm getting is this:
http://jacobdubail.com/jacobdubail/examples/test/images/bad.png
Is this normal? Is there a way to override this feature?
Thanks,
Jacob
This was the only place I could think of to ask for help, but, I'm trying to make my Tumblr theme work with masonry.js, and all that's happening is a small column to the left of the page is being made.
Here is my code, in the order of JavaScript, HTML, and CSS:
< script type = 'text/javascript' src = 'http://static.tumblr.com/c427a2a/gGNl6h94x/jquery-1.4.2.min.js'> </ script >
< script type = 'text/javascript' src = 'http://static.tumblr.com/c427a2a/HxNl6fwva/jquery.masonry.js'> < / script >
< script type = "text/javascript" >
$ (function(){
$ ('#section'). masonry({
single Mode: true,
item Selector: '. post'
});
});
< / script>
(Spaces were put so the code would show up)
<div id='section'>
{block:Posts}
{block:Text}
<div class='post text'>
{block:Title}
<h3><a class='post-title' href='{Permalink}'>{Title}</a></h3>
{/block:Title}
{Body}
{block:Date}
<div class="post-footer">
<div class="date">
<a class='post-title' href='{Permalink}'><h4>
{block:Reblog}Reblogged{/block:Reblog}
{block:NotReblog}Posted{/block:NotReblog}
{Month} {DayOfMonth}{DayOfMonthSuffix} at {12Hour}:{Minutes} {CapitalAmPm}</a>
{block:Reblog}
from <a class='post-title reblog' href='{ReblogParentURL}'>{ReblogParentName}</a>
{block:RebloggedFromReblog} (originally from <a class='post-title' href='{ReblogRootURL}' class='reblogurl'> {ReblogRootName}</a>){/block:RebloggedFromReblog}{/block:Reblog}
{block:FromBookmarklet}from bookmarklet{/block:FromBookmarklet}
{block:FromMobile}from mobile{/block:FromMobile}</a> {block:IfDisqusShortname}| <a class='post-title' href='{Permalink}#disqus_thread'>Comments</a>{/block:IfDisqusShortname} {block:IfShowNotes}{block:NoteCount}| <a class='post-title' href='{Permalink}#notes'>{NoteCountWithLabel}</a>{/block:NoteCount}{/block:IfShowNotes}{block:IfShowTags}{block:HasTags}<br/><br/> <h4>{block:Tags}<a class='tag post-title' href='{TagURL}'>{Tag}</a> {/block:Tags}</h4>{/block:HasTags}{/block:IfShowTags}
</div>
</div>
{/block:Date}
{block:IfShowNotes}
{block:PostNotes}
<div id='notes'>
{PostNotes}
</div>
{/block:PostNotes}
{/block:IfShowNotes}
</div>
{/block:Text}
{block:Photo}
<div class='post photo'>
{LinkOpenTag}<img src='{PhotoURL-500}' alt='{PhotoAlt}'>{LinkCloseTag}
{block:Caption}
{Caption}
{/block:Caption}
{block:Date}
<div class="post-footer">
<div class="date">
<a class='post-title' href='{Permalink}'><h4>
{block:Reblog}Reblogged{/block:Reblog}
{block:NotReblog}Posted{/block:NotReblog}
{Month} {DayOfMonth}{DayOfMonthSuffix} at {12Hour}:{Minutes} {CapitalAmPm}</a>
{block:Reblog}
from <a class='post-title reblog' href='{ReblogParentURL}'>{ReblogParentName}</a>
{block:RebloggedFromReblog} (originally from <a class='post-title' href='{ReblogRootURL}' class='reblogurl'> {ReblogRootName}</a>){/block:RebloggedFromReblog}{/block:Reblog}
{block:FromBookmarklet}from bookmarklet{/block:FromBookmarklet}
{block:FromMobile}from mobile{/block:FromMobile}</a> {block:IfDisqusShortname}| <a class='post-title' href='{Permalink}#disqus_thread'>Comments</a>{/block:IfDisqusShortname} {block:IfShowNotes}{block:NoteCount}| <a class='post-title' href='{Permalink}#notes'>{NoteCountWithLabel}</a>{/block:NoteCount}{/block:IfShowNotes}{block:IfShowTags}{block:HasTags}<br/><br/> <h4>{block:Tags}<a class='tag post-title' href='{TagURL}'>{Tag}</a> {/block:Tags}</h4>{/block:HasTags}{/block:IfShowTags}
</div>
</div>
{/block:Date}
{block:IfShowNotes}
{block:PostNotes}
<div id='notes'>
{PostNotes}
</div>
{/block:PostNotes}
{/block:IfShowNotes}
</div>
{/block:Photo}
{block:Photoset}
<div class='post photoset'>
<img src='{Photoset-500}' alt='{PhotoAlt}'>
{block:Caption}
{Caption}
{/block:Caption}
{block:Date}
<div class="post-footer">
<div class="date">
<a class='post-title' href='{Permalink}'><h4>
{block:Reblog}Reblogged{/block:Reblog}
{block:NotReblog}Posted{/block:NotReblog}
{Month} {DayOfMonth}{DayOfMonthSuffix} at {12Hour}:{Minutes} {CapitalAmPm}</a>
{block:Reblog}
from <a class='post-title reblog' href='{ReblogParentURL}'>{ReblogParentName}</a>
{block:RebloggedFromReblog} (originally from <a class='post-title' href='{ReblogRootURL}' class='reblogurl'> {ReblogRootName}</a>){/block:RebloggedFromReblog}{/block:Reblog}
{block:FromBookmarklet}from bookmarklet{/block:FromBookmarklet}
{block:FromMobile}from mobile{/block:FromMobile}</a> {block:IfDisqusShortname}| <a class='post-title' href='{Permalink}#disqus_thread'>Comments</a>{/block:IfDisqusShortname} {block:IfShowNotes}{block:NoteCount}| <a class='post-title' href='{Permalink}#notes'>{NoteCountWithLabel}</a>{/block:NoteCount}{/block:IfShowNotes}{block:IfShowTags}{block:HasTags}<br/><br/> <h4>{block:Tags}<a class='tag post-title' href='{TagURL}'>{Tag}</a> {/block:Tags}</h4>{/block:HasTags}{/block:IfShowTags}
</div>
</div>
{/block:Date}
{block:IfShowNotes}
{block:PostNotes}
<div id='notes'>
{PostNotes}
</div>
{/block:PostNotes}
{/block:IfShowNotes}
</div>
{/block:Photoset}
{block:Quote}
<div class='post quote'>
<h3 style='display: block'><a style='display: block' class='post-title' href='{Permalink}'>“{Quote}”</a></h3>
{block:Source}
<p>- {Source}</p>
{/block:Source}
{block:Date}
<div class="post-footer">
<div class="date">
<a class='post-title' href='{Permalink}'><h4>
{block:Reblog}Reblogged{/block:Reblog}
{block:NotReblog}Posted{/block:NotReblog}
{Month} {DayOfMonth}{DayOfMonthSuffix} at {12Hour}:{Minutes} {CapitalAmPm}</a>
{block:Reblog}
from <a class='post-title reblog' href='{ReblogParentURL}'>{ReblogParentName}</a>
{block:RebloggedFromReblog} (originally from <a class='post-title' href='{ReblogRootURL}' class='reblogurl'> {ReblogRootName}</a>){/block:RebloggedFromReblog}{/block:Reblog}
{block:FromBookmarklet}from bookmarklet{/block:FromBookmarklet}
{block:FromMobile}from mobile{/block:FromMobile}</a> {block:IfDisqusShortname}| <a class='post-title' href='{Permalink}#disqus_thread'>Comments</a>{/block:IfDisqusShortname} {block:IfShowNotes}{block:NoteCount}| <a class='post-title' href='{Permalink}#notes'>{NoteCountWithLabel}</a>{/block:NoteCount}{/block:IfShowNotes}{block:IfShowTags}{block:HasTags}<br/><br/> <h4>{block:Tags}<a class='tag post-title' href='{TagURL}'>{Tag}</a> {/block:Tags}</h4>{/block:HasTags}{/block:IfShowTags}
</div>
</div>
{/block:Date}
{block:IfShowNotes}
{block:PostNotes}
<div id='notes'>
{PostNotes}
</div>
{/block:PostNotes}
{/block:IfShowNotes}
</div>
{/block:Quote}
{block:Link}
<div class='post link'>
<h3><a class='post-title' href='{URL}' {Target}>{Name}</a></h3>
{block:Description}
{Description}
{/block:Description}
{block:Date}
<div class="post-footer">
<div class="date">
<a class='post-title' href='{Permalink}'><h4>
{block:Reblog}Reblogged{/block:Reblog}
{block:NotReblog}Posted{/block:NotReblog}
{Month} {DayOfMonth}{DayOfMonthSuffix} at {12Hour}:{Minutes} {CapitalAmPm}</a>
{block:Reblog}
from <a class='post-title reblog' href='{ReblogParentURL}'>{ReblogParentName}</a>
{block:RebloggedFromReblog} (originally from <a class='post-title' href='{ReblogRootURL}' class='reblogurl'> {ReblogRootName}</a>){/block:RebloggedFromReblog}{/block:Reblog}
{block:FromBookmarklet}from bookmarklet{/block:FromBookmarklet}
{block:FromMobile}from mobile{/block:FromMobile}</a> {block:IfDisqusShortname}| <a class='post-title' href='{Permalink}#disqus_thread'>Comments</a>{/block:IfDisqusShortname} {block:IfShowNotes}{block:NoteCount}| <a class='post-title' href='{Permalink}#notes'>{NoteCountWithLabel}</a>{/block:NoteCount}{/block:IfShowNotes}{block:IfShowTags}{block:HasTags}<br/><br/> <h4>{block:Tags}<a class='tag post-title' href='{TagURL}'>{Tag}</a> {/block:Tags}</h4>{/block:HasTags}{/block:IfShowTags}
</div>
</div>
{/block:Date}
{block:IfShowNotes}
{block:PostNotes}
<div id='notes'>
{PostNotes}
</div>
{/block:PostNotes}
{/block:IfShowNotes}
</div>
{/block:Link}
{block:Chat}
<div class='post chat'>
{block:Title}
<h3><a class='post-title' href="{Permalink}">{Title}</a></h3>
{/block:Title}
{block:Lines}
<ul class='chatlines'>
<li class='lines{Alt}'>
{block:Label}
<span class="label"><strong>{Label}</strong></span>
{/block:Label}
{Line}
</li>
</ul>
{/block:Lines}
{block:Date}
<div class="post-footer">
<div class="date">
<a class='post-title' href='{Permalink}'><h4>
{block:Reblog}Reblogged{/block:Reblog}
{block:NotReblog}Posted{/block:NotReblog}
{Month} {DayOfMonth}{DayOfMonthSuffix} at {12Hour}:{Minutes} {CapitalAmPm}</a>
{block:Reblog}
from <a class='post-title reblog' href='{ReblogParentURL}'>{ReblogParentName}</a>
{block:RebloggedFromReblog} (originally from <a class='post-title' href='{ReblogRootURL}' class='reblogurl'> {ReblogRootName}</a>){/block:RebloggedFromReblog}{/block:Reblog}
{block:FromBookmarklet}from bookmarklet{/block:FromBookmarklet}
{block:FromMobile}from mobile{/block:FromMobile}</a> {block:IfDisqusShortname}| <a class='post-title' href='{Permalink}#disqus_thread'>Comments</a>{/block:IfDisqusShortname} {block:IfShowNotes}{block:NoteCount}| <a class='post-title' href='{Permalink}#notes'>{NoteCountWithLabel}</a>{/block:NoteCount}{/block:IfShowNotes}{block:IfShowTags}{block:HasTags}<br/><br/> <h4>{block:Tags}<a class='tag post-title' href='{TagURL}'>{Tag}</a> {/block:Tags}</h4>{/block:HasTags}{/block:IfShowTags}
</div>
</div>
{/block:Date}
{block:IfShowNotes}
{block:PostNotes}
<div id='notes'>
{PostNotes}
</div>
{/block:PostNotes}
{/block:IfShowNotes}
</div>
{/block:Chat}
{block:Audio}
<div class='post audio'>
{AudioPlayer}
{block:Caption}
<p>{Caption}</p>
{/block:Caption}
{block:IfShowAlbumArtOnAudioPosts}
{block:AlbumArt}
<img src='{AlbumArtURL}' alt='{block:Artist}{Artist}{/block:Artist} - {block:TrackName}{TrackName}{/block:TrackName}'/>
{/block:AlbumArt}
{/block:IfShowAlbumArtOnAudioPosts}
{block:Date}
<div class="post-footer">
<div class="date">
<a class='post-title' href='{Permalink}'><h4>
{block:Reblog}Reblogged{/block:Reblog}
{block:NotReblog}Posted{/block:NotReblog}
{Month} {DayOfMonth}{DayOfMonthSuffix} at {12Hour}:{Minutes} {CapitalAmPm}</a>
{block:Reblog}
from <a class='post-title reblog' href='{ReblogParentURL}'>{ReblogParentName}</a>
{block:RebloggedFromReblog} (originally from <a class='post-title' href='{ReblogRootURL}' class='reblogurl'> {ReblogRootName}</a>){/block:RebloggedFromReblog}{/block:Reblog}
{block:FromBookmarklet}from bookmarklet{/block:FromBookmarklet}
{block:FromMobile}from mobile{/block:FromMobile}</a> {block:IfDisqusShortname}| <a class='post-title' href='{Permalink}#disqus_thread'>Comments</a>{/block:IfDisqusShortname} {block:IfShowNotes}{block:NoteCount}| <a class='post-title' href='{Permalink}#notes'>{NoteCountWithLabel}</a>{/block:NoteCount}{/block:IfShowNotes}{block:IfShowTags}{block:HasTags}<br/><br/> <h4>{block:Tags}<a class='tag post-title' href='{TagURL}'>{Tag}</a> {/block:Tags}</h4>{/block:HasTags}{/block:IfShowTags}
</div>
</div>
{/block:Date}
{block:IfShowNotes}
{block:PostNotes}
<div id='notes'>
{PostNotes}
</div>
{/block:PostNotes}
{/block:IfShowNotes}
</div>
{/block:Audio}
{block:Video}
<div class='post video'>
{block:Caption}
<p>{Caption}</p>
{/block:Caption}
{Video-500}
{block:Date}
<div class="post-footer">
<div class="date">
<a class='post-title' href='{Permalink}'><h4>
{block:Reblog}Reblogged{/block:Reblog}
{block:NotReblog}Posted{/block:NotReblog}
{Month} {DayOfMonth}{DayOfMonthSuffix} at {12Hour}:{Minutes} {CapitalAmPm}</a>
{block:Reblog}
from <a class='post-title reblog' href='{ReblogParentURL}'>{ReblogParentName}</a>
{block:RebloggedFromReblog} (originally from <a class='post-title' href='{ReblogRootURL}' class='reblogurl'> {ReblogRootName}</a>){/block:RebloggedFromReblog}{/block:Reblog}
{block:FromBookmarklet}from bookmarklet{/block:FromBookmarklet}
{block:FromMobile}from mobile{/block:FromMobile}</a> {block:IfDisqusShortname}| <a class='post-title' href='{Permalink}#disqus_thread'>Comments</a>{/block:IfDisqusShortname} {block:IfShowNotes}{block:NoteCount}| <a class='post-title' href='{Permalink}#notes'>{NoteCountWithLabel}</a>{/block:NoteCount}{/block:IfShowNotes}{block:IfShowTags}{block:HasTags}<br/><br/> <h4>{block:Tags}<a class='tag post-title' href='{TagURL}'>{Tag}</a> {/block:Tags}</h4>{/block:HasTags}{/block:IfShowTags}
</div>
</div>
{/block:Date}
{block:IfShowNotes}
{block:PostNotes}
<div id='notes'>
{PostNotes}
</div>
{/block:PostNotes}
{/block:IfShowNotes}
</div>
{/block:Video}
{block:Answer}
<div class='post answer'>
<h3 class='question'>{Asker} asked me, “{Question}”</h3>
<p>{Answer}</p>
{block:Date}
<div class="post-footer">
<div class="date">
<a class='post-title' href='{Permalink}'><h4>
{block:Reblog}Reblogged{/block:Reblog}
{block:NotReblog}Posted{/block:NotReblog}
{Month} {DayOfMonth}{DayOfMonthSuffix} at {12Hour}:{Minutes} {CapitalAmPm}</a>
{block:Reblog}
from <a class='post-title reblog' href='{ReblogParentURL}'>{ReblogParentName}</a>
{block:RebloggedFromReblog} (originally from <a class='post-title' href='{ReblogRootURL}' class='reblogurl'> {ReblogRootName}</a>){/block:RebloggedFromReblog}{/block:Reblog}
{block:FromBookmarklet}from bookmarklet{/block:FromBookmarklet}
{block:FromMobile}from mobile{/block:FromMobile}</a> {block:IfDisqusShortname}| <a class='post-title' href='{Permalink}#disqus_thread'>Comments</a>{/block:IfDisqusShortname} {block:IfShowNotes}{block:NoteCount}| <a class='post-title' href='{Permalink}#notes'>{NoteCountWithLabel}</a>{/block:NoteCount}{/block:IfShowNotes}{block:IfShowTags}{block:HasTags}<br/><br/> <h4>{block:Tags}<a class='tag post-title' href='{TagURL}'>{Tag}</a> {/block:Tags}</h4>{/block:HasTags}{/block:IfShowTags}
</div>
</div>
{/block:Date}
{block:PostNotes}
<div id='notes'>
{PostNotes}
</div>
{/block:PostNotes}
</div>
{/block:Answer}
{/block:Posts}
{block:IfDisqusShortname}
{/block:IfDisqusShortname}
</div>
#section {
width: 960px;
word-wrap: break-word;
}
div.post {
width: 300px;
background-image: url(http://static.tumblr.com/c427a2a/4iHl5b98u/diagonal_lines_lol.png);
padding: 10px;
margin: 15px 10px;
border-radius: 7px;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
box-shadow: inset 0 0 3px #000;
-webkit-box-shadow: inset 0 0 3px #000;
-moz-box-shadow: inset 0 0 3px #000;
}
First off - this is an amazing script, its so beautiful.
But I can't for the life of me figure out why this isn't working, I think it might be clashing with another jquery plugin but I can't figure out which one it is. I have set up a test page and if you click the button in the middle column you will be able to see the error - opts.$brickParent.find is not a function.
http://ninthdesign.co.nz/my/test.php
Any suggestions?
Cheers,
Michael
Hi
I realised in Masonry FAQ page there's a fork by kvnsmth that does this. But if I'm not wrong, that code is based on a much older Masonry version.
How do I implement this on the latest Masonry version?
Thanks heaps!
(FYI I'm a complete newbie at this and Masonry is really cool! )
does the infiniteScroll works on iphones and ipads?
Is not working for me on them.
Do i have to add some code to display all content on load if users visit the site on Macs gadgets?
thanks in advance :)
It works beautifully on screen, but when it gets printed, the floated elements all hop on top of each other, making a big mess.
Resize event call twice in ie.
jQuery 1.4.2 problem?
Hello,
I've been troubleshooting my Masonry installation but can't seem to figure out why it works in Safari but not Chrome or Firefox. I thought perhaps it was because of the new HTML5 elements I'm using, so I stripped them out and used divs with IDs and even classes but it didn't help.
Has anyone else had experience with this?
You can see what I'm doing here: http://signyourbikeout.com/articles
Thanks,
Paul
I have to types of boxes () within the container that i'm using masonry on. all divs are the same width (180px) and there are 5 cols each item has either a large or small height image and this alternates along the rows so its always large, small, large, small, large.
this is fine to start with but when filtering they can end up large, small, small, large, large etc
how can i get them to appear in the order i want but still animate the ordering using masonry?
(This is a question about adding a so-called fluid layout component. The FAQ entry apparently on that topic does not do that.)
I’d like to vary both the column width and number of columns simultaneously as the window is resized. The goal is to always use the whole screen while keeping each column a reasonable number of chars wide. Is that possible?
For instance, suppose you want as many columns as possible that are at least 200 pixels wide. If the screen was 900 pixels wide, you want 4 columns each 225 pixels wide. If W is the screen width, then the number of columns would be floor(W/200) and each column’s width W/floor(W/200).
Thanks.
Hi
I have just installed this awesome piece of code in a joomla site of mine:
It works nicely in Chrome, Safari and Firefox,
but not in IE9 and Opera (10.63)
have not tested any other explorer or opera versions though.
In IE9 and Opera it does not seem to figure out the correct with for the container which holds the "boxes".
Take a look at this page here to se what happens.
http://www.monsanto.no/index.php/en/environmental/gmo/gmo-news
In IE9 and Opera it show the article teaser boxes in three columns, so the last column is partly behind the right menu.
Could anybody please explain to me why this happens?
https://github.com/gilmoreorless/masonry/commit/e88114d2b0825c47f57e31e50abc62dd336d78be
you list this on your site; it is a fantastic addition. Would you consider adding it to the core base?
thanks
Very cool script and very powerful. I would love to see if it's possible to also create an auto pagination function. Instead of autoscroll I would like to either set a fixed height or fixed number of posts so modules would also fit then any overflow would go to another page. Any help or pointers would be appreciated.
I'm trying to use masonry in a bookmarklet that displays images in an overlay over an existing page. the problem is that all the brick are being placed below the old content on the page (even though I'm only targeting the image wrapper for my images, which sits above the content. any idea how I can resolve this, so masonry will ignore the content already on the page? thanks!
(apologies if I'm not using the right forum for this - I've just been banging my head against the wall trying to solve this issue).
Masonry is working great in IE now. Thanks for the update!
The only place it doesn't like to work is with ajax-loaded content ;-(
I'm using Ben Alman's HashChange plugin to load images that get positioned with Masonry. It works everywhere except IE. I'm not really sure that this is really an issue with Masonry, but wanted to post it here to see if anyone has tried to use these 2 great plugins in concert. You can see what I mean at a site I'm working on at http://daniellehendrix.com
Thanks for any insight you may have.
Spent a good hour looking through the masonry code to try and find where/why this happening and can't work it out so I'm hoping someone here will have come across this issue.
The problem is as follows, on my page I have a Google Map, beneath is a list (li elements inside of a ul of course) of all the markers on the map (and various bits of information, like name, address, phone number etc.) the problem I am having is that when masonry reorders the list items it seems to be removing the z-index of the parent (in this case the ul).
Has this issue arisen before? Is there a simple work around?
Thanks,
Stewart
hey david.
love your plugin man. having some issues with a site i'm building. i followed an issue that seemed like it would work - http://github.com/desandro/masonry/issues/closed#issue/24 - but alas it hasn't solved the problem. take a look at the page i'm building - http://www.saskiamoore.com/projects.html - as you can see i want the bottom row to nest in with the top row. it's not happening. can you enlighten me to how to work with variable (2) heights in a single column like that? the first two elements nest in beautiful but then it becomes weird. i took at look at the page in firebug and it is strange the order that occurs...any help is much appreciated. thanks for all your work man..
peace,
Miles
Help. I am using a php cms and also phpthumb to generate thumbnails. everything works fine on first load but when I click on my logo which is just a link to my site the thumbnails stack on-top of each other. Any help would be very appreciated!!! This problem isn't occurring in firefox on mac but definitely in safari and also chrome.
Hello,
I've found a bug which prevents jQuery Masonry from being usable unless you already start the wrapper area with some content inside.
To demonstrate the issue, I've set up a project with instructions on the readme document on how to replicate.
I am having a hard time figuring this out and I really dont know what else to do!
I am trying to avoid the boxes overlapping when the window loads using
for some reason $(window).load(function(){ doesnt seem to call masonry. I am using wordpress as the cms
Also I am using the filter feature option and It seems to re arrange the boxes when the ALL category is clicked just fine. But I would like the window to load with the boxes masoned*
Thanks to any help I can get on this in adavance!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.