jquery-masonry | 易学教程

how to trigger/reload Masonry plugin on click

阅读更多关于 how to trigger/reload Masonry plugin on click

问题 Because i have different tabs, masonry is not loading the hidden items, so when i click on a new tab the images stack onto each other, i know this question has been asked before and answered with trigger masonry by clicking the tab, but how would i go about doing this without messing up the first tab. Currently calling masonry with $(function(){ $('#container').masonry({ // options itemSelector : '.item', columnWidth : 260 }); });` $(window).load(function(){ $('#container').masonry(); }); and

How do I get JQuery Masonry to recognize added items?

阅读更多关于 How do I get JQuery Masonry to recognize added items?

问题 This is the same question as this one, but I have a repro of the issue on JSFiddle up here. So I thought I'd repost. JQuery Masonry seems to only assess the children of its container once, on first run. After that, it's impossible to get it to look at the DOM again to get it to reassess its children. 回答1: You have to pass the new content to Masonry's appended method: $("#container").append(content).masonry("appended", content); I updated your fiddle here. 回答2: I seem to have solved this by

jQuery masonry with Wordpress and imagesLoaded

阅读更多关于 jQuery masonry with Wordpress and imagesLoaded

问题 I am using jquery masonry on a wordpress theme I am working on. After struggling with getting it to work for a while I found that this: <script type="text/javascript"> jQuery(function () { jQuery('#masonry-wrap').masonry({ itemSelector: '.masonry-box', columnWidth: 283 }); }) </script> Seems to be working fine for me... However checking the site in Chrome and Safari pushes the bottom of the containing elements into the following elements... Now I read somewhere, that this can be solved by

.parents().removeClass() not working

阅读更多关于 .parents().removeClass() not working

i got this javascript, trying to remove a class on a parent element: $(this).parents(".box").removeClass("expanded"); on this html: <div class="box trx"> <a href="javascript:;" class="open-content"><?php the_post_thumbnail('thumbnail'); ?></a> <div class="expandable"> <?php the_content(); ?> <span class="simple"> <a class="cunload" href="javascript:;">Close</a> </span> </div> </div> Unfortunately, this doesn't work so far. I've done several tests like: $(this).parents(".box").removeClass("trx"); and $(this).parents(".box").addClass("exd"); It all works. I'm using jQuery 1.6.2 and jQuery

Masonry not working with dynamic content

阅读更多关于 Masonry not working with dynamic content

Masonry is not working with my dynamic content, I don't know why. I don't think it's a bug on my side, at least I've looked at the code for a few hours now and I can't find anything that isn't working. //reads listbox.php and cycles through the array calling createbox function listboxs() { $.ajax({ url: '_php/listbox.php', success: function (output) { var jsonArray = $.parseJSON(output); $.each(jsonArray, function (i, box) { createbox(box.id, box.name, box.link, box.description, box.tags); }); } }); } //create the code for 1 box function createbox(id, name, link, description, tags) { var

jQuery Isotope - corner stamp issue

阅读更多关于 jQuery Isotope - corner stamp issue

问题 I started using awsome JQuery Isotope plugin in my project. Everything works great, but I'm having one issue with corner-stapm option. Each element in my masnory grid has fixed width (220px + 5 margin) and random height (depending on its content) and I am using @media queries in CSS file to change columns number on different screen resolution (page width can be 230, 460, 690.. etc.). Problem with corner stamp occurs in the narrowest version (one column) - the corner stamp is covered with

How to get Isotope working with dynamic DOM nodes?

阅读更多关于 How to get Isotope working with dynamic DOM nodes?

问题 I the context of Backbone views, I add and remove views in the DOM. However, the container that contains Isotope elements only works during the initial load; after that, when the container is removed, and added again, Isotope is not working as expected. I did quick JSfiddle here: http://jsfiddle.net/mulderp/T8aSQ/6/ --> When I add the Isotope container: var list = '<div data-foo="bar" id="container"><div class="item red"></div><div class="item blue"></div></div>'; $container.html(list);

Find targets position after isotope positioning

阅读更多关于 Find targets position after isotope positioning

问题 I'm using David Desandros Isotope for a new site, but now it seems I'm unable to find each elements position using jquery. Specifically I'm trying to attach a tooltip on hover, but generally I'd like to know how to get the position() of each anchor after Isotope has formatted them. As of now each element displays a '0' for left, margin-left, position().left, and every other positioning property I could think of. 回答1: See Isotope docs for itemPositionDataEnabled $('#container').isotope({

JQuery masonry.js issue with Json data .append( )

阅读更多关于 JQuery masonry.js issue with Json data .append( )

I have tested masonry.js with multiple columns successfully but with my application I have the need to add masonry items dynamically using .ajax() JSON data. At the moment I have chosen to use .append() to layout the initial masonry .items - The issue is that all of the masonry items are being output in a single column. The container size changes didn't help, even when increasing the amount of container width to more than enough, it will not style to 3 columns. Even when using the containerWidth function and using return containerWidth / 3 Here is the code: jQuery(document).ready(function() {

Top/bottom margin with Masonry stacking

阅读更多关于 Top/bottom margin with Masonry stacking

I'm using JQuery and Masonry and as you can see from the image the boxes doesn't stack properly. The side margins are great but the top/bottom gives random amount of large space in between. Anybody who can help me here? CSS for the boxes: div.article { background-color: white; margin-right: 6px; padding: 20px 10px; width: 155px;} Screenshot of problem: https://skitch.com/subzane/f8n36/2010-andreas-normans-blogg Solution: It seems the error only appeared when using custom fonts. And to fix that, the script must be loaded using Using $(window).load() instead of $(document).ready(). Assuming div