FAQ Database Discussion Community


Bind Infinite Scroll + Masonry plugins

jquery,html,jquery-masonry,infinite-scroll
I would like to use infinite scroll and Masonry plugins to display my pictures. However I'm completely stuck with the HTML part. I use the code below to bind the two plugins but I don't know how to display my html class .navigation and .nav-previous a in the dom to...

isotope overlapping after call items with ajax

jquery,ajax,jquery-isotope,jquery-masonry,fullpage.js
I'm working on website and using fullpage.js , with tow sections, I added a link to open a gallery into second section using ajax depending on the gallery link clicked, so the content changed .. I use isotope for images layout but the problem is images overlapping after ajax call,...

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...

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 {...

How do I discover which code is triggering a scroll to the top?

javascript,fancybox-2,jquery-masonry
This page: http://crossroadsphotographicworkshops.com/blog/blog-post-the-first/ I created the gallery, at the bottom. When a thumbnail is clicked, the lightbox opens, as expected, but the page behind it scrolls to the top. There is no # on my url. This doesnt happen on another site/theme. I assume this is caused by js in...

Auto Sizing Isotope

javascript,jquery,jquery-isotope,jquery-masonry
I've been looking at this theme http://clapat.ro/berger/ and the way it does it's grid in the middle of it. I've been snooping through the javascript files and it looks like it's auto sizing the '.item' class based on the width. I'm trying to replicate this sort of sizing but with...

as densely packed blocks? [closed]

javascript,jquery,jquery-masonry
please help solve the problem. for dense packing blocks I used a popular plugin masonry. my resulting code is not worked. but I used the method described in the documentation $('#container').masonry({ itemSelector: '.box', // set columnWidth a fraction of the container width columnWidth: function( containerWidth ) { return containerWidth /...

Second container does not load jquery masonry in my rails app

ruby-on-rails,jquery-masonry
I am trying to display my posts organized by date created. Jquery Masonry works fine for the first container, but for the second container it fails to properly load. When I view the code in a web browser it shows this for the second container: <div id="pins" class="transitions-enabled"> <div class="box...

Remove gutter on masonry from last column

jquery,jquery-isotope,jquery-masonry,fluid-layout,gutter
I've got a fluid responsive isotope, masonry grid (also using images loaded - but not in this example), with breakpoints. I want to remove the last gutter column, so there's no spacing on the right hand side, so it sits flush - but I can't work out the code. I've...

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":...

How to reload jQuery Masonry, when deleting items with AJAX?

javascript,jquery,ruby-on-rails,ajax,jquery-masonry
UPDATE: Here is my CSS: #masonry-container { margin: 0 auto; } .box { width: 50%; margin-top: 30px; } I'm using Rails 4, Bootstrap and the Masonry-Rails gem. I have the following code working for jQuery Masonry to arrange my divs, in assets/javascipts/application.js: $(function(){ $('#masonry-container').masonry({ itemSelector: '.box', isFitWidth: true }); });...

Wordpress jetpack infinite scroll and Isotope

jquery,wordpress,jquery-isotope,jquery-masonry,infinite-scroll
At the moment i am busy creating a new wordpress template, where i try to implement Infinite-Scroll (which is part of "Jetpack") in combination with Isotope. The project Homepage is: http://184990.webhosting29.1blu.de/fashion/. This is my code for isotope: <script type="text/javascript"> jQuery(document).ready(function($){ var $container = jQuery('#content').isotope({ itemSelector: '.isotope-item', masonry: { columnWidth: '.isotope-item',...

Jquery Masonry extra space

javascript,jquery,css,jquery-masonry
I am trying to make a image grid system using JQUERY Masonry but i have a space problem. I have created this DEMO from codepen.io If you visit the demo then please resize the page width<580px and then you can see there is a extra space how can i remove...

Masonry and imagesLoaded error

jquery-masonry,imagesloaded
I combined masonry with imagesLoaded like this: var container = document.querySelector('.masonry-container'); var msnry; // initialize Masonry after all images have loaded imagesLoaded( container, function() { var msnry = new Masonry( container, { itemSelector: '.masonry-item' }).resize(); }); But getting error: Uncaught TypeError: Cannot read property 'length' of null What am I...

Conflict between masonryjs and mustachejs

javascript,mustache,jquery-masonry
I have a syntax error somewhere in my javascript that seems to be slipping by. I can either access the content through a file into a mustache template, or I can hard code the items (images and audio) and have the items smoothly fill up the page with masonryjs. But...

How to turn off jquery plugin

jquery,jquery-masonry
Not sure if I asked the question right, but what I want to achieve is: I am using masonry plugin on responsive website, and I want it only to work for desktop. So I'm using this code to run the plugin: var $container = $('#container'); $container.masonry({ columnWidth: 200, itemSelector: '.item'...