FAQ Database Discussion Community


masonry only works properly after window resize

php,html,wordpress,zurb-foundation,masonry
Site: www.zrrdigitalmedia.com When images load in the project section masonry overlaps it into the next. When you resize the window and back it's looking fine - like how it did on my XAMPP site. Below's the HTML code used for the project's section where the Masonry part is contained (didn't...

Uneven columns in Masonry

html,css,masonry
Quick question, struggling with Masonry. Would it be possible to have columns that are uneven? See example below: The images are different in height as you can see. I'm having no problems as long as I'm using columns like 50-25-25. My code is as follows: var $container = $('.masonry'); $container.imagesLoaded(...

Cannot initialize Masonry with JQuery

jquery,jquery-masonry,masonry
According to the official documentation there are different ways to initialize the masonry container. The HTML initialization works fine, but when I try to move the parameters from the data-masonry attribute to JQuery, things break. Here is the HTML initialization with the JSON params. <div id="container" class="masonry js-masonry" data-masonry-options='{ "columnWidth":...

Identify and add HTML class to masonry items by their position

javascript,jquery,position,addclass,masonry
I am using Masonry to render a group of items in two columns. Given below is the HTML structure. <div id="grid"> <article class="entry"> … </article> <article class="entry"> … </article> <article class="entry"> … </article> <!-- And so it goes --> </div> What I want to achieve is identify which one of...

Black Stripes below Masonry Items

wordpress,infinite-scroll,masonry,imagesloaded
Hej, I'm facing problems in my masonry project: Oliver Rath There is an unintended black stripe below each item, please have a look at the screenshot: I already tried the usual suggestions, such as manipulating the display or the padding value. Does anyone know hot to get rid of this?...

Masonry layout bug on Safari, using a Wordpress site

javascript,wordpress,safari,masonry
I'm stumped. I use Masonry on my Wordpress site, and it looks fine on all major browsers except for Safari. Here is an article link, for example: masonry article about apple watch on a wordpress site On Safari the div items are all squashed up, and I have no idea...

CSS column count causing items to split columns

css,css3,masonry
Trying to not use a jQuery script for a masonry effect so looking to CSS for alternatives. I am trying to use column count, which appears to be working but not as expected. So the columns are there, but sometimes the items in the container are being split across more...

Masonry grid onclick

jquery,onclick,masonry
I'm building a section of products that I want to open and close on click, using masonry. I've added the onclick but as you can see http://fi-testing.co.uk/zeffire-web/products.html it's working but I'm having a few issues. 1) They all open onclick instead of just the relevant one 2) They don't realign...

Masonry items not reloaded when cliking ajax load more button

javascript,jquery,css,ajax,masonry
Hi everyone i have one problem about masonry items. I have created this DEMO from codepen.io In this demo you can see there is this javascript code: $(window).load(function() { $( function() { var $container = $('.posts-holder'); $container.masonry({ isFitWidth: true, itemSelector: '.kesif-gonderi-alani' }); }); }); I show only 10 posts when...

JQuery Masonry better optimize whitespaces by changing the order of items

jquery,jquery-masonry,masonry
I am currently working with the following code: JSFIDDLE As you can see I have some items that occupy 50% ("item") of the horizontal space and 1 item that occupies 100% ("item double"). The height of the items may vary but not significantly. .item { width: 50%; } .item.double {...

jQuery Masonry - items not correctly organized

jquery,jquery-masonry,masonry
After changing format of my existing report, I have noticed that after filtering one of the items, masonry is not correctly fired. Example below: http://relevantcodes.com/Tools/ReportUnit/res.html Notice that "Filter Fixtures -> Passed" fails to work correctly yet all other filters work. When "Passed" is selected for "Filter Fixtures", the items are...

reload-on-show with angular masonry not working

angularjs,masonry
I have got a little photo app on the build to better understand angular but struggling to get masonary to reload itself when a tab is opened. I am using https://github.com/passy/angular-masonry So far i have a wall of photos, on one side my/(the users) photos, and on the other the...

Programmatically reorder or move elements in Draggable + Packery (Masonry)

javascript,jquery-ui,draggable,masonry,packery
Here's a fiddle for this: http://jsfiddle.net/bortao/00uvL60c/1/ When i press "move left" / "move right" I want to send the block left/right. I do this by reinserting it on the dom structure with el.insertBefore(el.prev()) / el.insertAfter(el.next()) but this don't work since it keeps the left / top coordinates, and also don't...