Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Already on GitHub? Sign in to your account

'Insert' with dynamic Items not working; adding to top left of container, not resizing parent #259

Closed
andrewmartin opened this Issue Sep 10, 2012 · 14 comments

Comments

4 participants

Unfortunately, I have a somewhat complex and private rails app I can't post up, but I'm having a few issues with the Isotope plugin. I've spent several hours trying to get this to work and it's just not working.

What I have is a page with several images, and as you scroll to the bottom, I'm grabbing a JS object of other images to append to the container; I want it to keep appending, much in the way your infinite scroll is.

I'm initializing Isotope on page load, and I've tested and logged the isotopeInstance from this other script. It's grabbing the correct instance, and even updating the number of items correctly, but for some reason, the items are getting stacked in the top left corner, all with top:0px; and left:0px; styles. Also, the height of the containing element stays at its initial height (the appropriate 1665px to hold the first set of images).

Isotope is definitely working on page load, and I'm able to use append to get the items to the bottom of the container without Isotope being involved (e.g. I can have an infinite scroll layout working just fine using Append and excluding the Isotope masonry effect).

Is there any reason why the images are not getting pushed onto the bottom of the container and the height of the container is not being set?

Here's what the script is calling when you scroll to the bottom of the page:

Called on scroll to bottom of page:

$container = $('#photos');
var $new_items = $('#{j render(@images)}');
$container.isotope('insert', $new_items);

Initial Isotope setup, called on doc ready (coffeescript)

$('#photos').isotope
  layoutMode: 'masonry'
  resizesContainer: true

Screenshot of HTML getting appended, the "photo-thumbs" with top:0px; left: 0px;' are the "new" items
Screenshot of HTML getting appended, the "photo-thumbs" with top:0px; left: 0px;' are the "new" items

Thanks in advance for your help.

Owner

desandro commented Sep 12, 2012

Sorry to hear you're running into trouble with Isotope. I can't make a proper diagnosis without live code, but here's what I do see:

It appears that the items are not getting positioned - they are all missing the appropriate -webkit-transform translate styles.

Could you try adding a callback to the insert call and see if that ever gets triggered?

$container.isotope('insert', $new_items, function() {
  console.log('yes inserted');
});

howells commented Dec 12, 2012

I seem to have the same problem as this. This is my code in coffeescript. It fetches and appends the content, but doesn't position any of the new elements, and "yes appended" doesn't fire in the console.

Any ideas?

isotopeLargeGrid: ->
        if $(@largeGridContainer).size()>0
            $(@largeGridContainer).isotope
                itemSelector: 'li'
                layoutMode: 'masonry'
                masonry: 
                    columnWidth: 300
                    gutterWidth: 20
                resizesContainer: true
            $(@largeGridContainer).infinitescroll
                navSelector  : 'nav.pagination'
                nextSelector : '.link.next a'
                itemSelector : 'li.home-news'
                (newElements) -> 
                    $(@largeGridContainer).isotope 'appended', $(newElements), ->
                        console.log('yes appended')

howells commented Dec 12, 2012

Hmm it seems to be my bad coffeescript as it works fine in vanilla jquery! Any ideas why it isn't working as above? (Sorry - that's not your problem!)

Howells,

Just curious––this is what it's outputting for me, I'm sure you've tried this already but maybe you can find a parse error or something funky with how the Coffee is getting output?

I'd love to know because I had a problem with the infinite scroll plugin and Isotope as well awhile back.

(function() {

  ({
    isotopeLargeGrid: function() {
      if ($(this.largeGridContainer).size() > 0) {
        $(this.largeGridContainer).isotope({
          itemSelector: 'li',
          layoutMode: 'masonry',
          masonry: {
            columnWidth: 300,
            gutterWidth: 20
          },
          resizesContainer: true
        });
        return $(this.largeGridContainer).infinitescroll({
          navSelector: 'nav.pagination',
          nextSelector: '.link.next a',
          itemSelector: 'li.home-news'
        }, function(newElements) {
          return $(this.largeGridContainer).isotope('appended', $(newElements), function() {
            return console.log('yes appended');
          });
        });
      }
    }
  });

}).call(this);

howells commented Dec 12, 2012

Yeah I tried that but nothing unusual was happening - it seems to be valid, no?

Interesting...out of sheer curiosity, can you paste the Javascript that's for sure working? Or is it literally identical?

howells commented Dec 12, 2012

This is for sure working:

$(document).ready(function(){

    $('.grid ul').infinitescroll({
        navSelector  : 'nav.pagination',
        nextSelector : '.link.next a',
        itemSelector : 'li.home-news'
    }, function(newElements){
        console.log('yes about to');
        $('.grid ul').isotope('appended', $(newElements), function(){
            console.log('yes appended')
        })
    });

});

so a few differences but fundamentally the same I think?

Wait, I think I see why, possibly, this may be silly, (and I'm sure you didn't paste all of the code, right?) but are you invoking the "isotopeLargeGrid" anywhere in the document ready? Using isotopeLargeGrid() or something? Also, how/where are you defining @largeGridContainer?

howells commented Dec 12, 2012

Yes, doing that. As I say everything works apart from actually re-arranging the returned new elements, and firing "yes appended"

Owner

desandro commented Dec 13, 2012

@howells Again, I'm sorry to hear you're having trouble, but without a live URL to take a look at, I can't properly diagnose what's going wrong.

guyisra commented Dec 23, 2012

I am having the same issues as well (http://stackoverflow.com/questions/14011015/isotope-doesnt-relayout-when-items-are-appended) also on rails.
As I've yet to find a good solution to my problem, it seems that the render helper is naughty and inserts \n \t and spaces all over the place causing isotope to malfunction.
I've recreated it here http://jsfiddle.net/maqra/5/

I've added \n\n between the .item divs to show the problem. Using inspect you can see that the problem is reproduced (several isotoped divs with several newly unisotoped divs)

the solution I found (unless some will be implemented inside isotope to ignore \n, \t,etc is to gsub the bad chars out of the render output using .gsub(/>\s_/, ">").gsub(/\s_</, "<").html_safe

I'm not sure this is a good solution because on long render output this can be quite slow...

hope this helps

Owner

desandro commented Dec 29, 2012

@guyisra thank you for providing an example!

What's happening is that the \n\n string is being treated properly like a text node, when jQuery is parsing the string to HTML.

The easiest solution, given this example, is to set itemSelector option for Isotope. See http://jsfiddle.net/desandro/maqra/7/

Here, I'm just adding itemSelector: '.item' to the Isotope options, and then adding a class of item to the red-items.

desandro added a commit that referenced this issue Dec 29, 2012

Owner

desandro commented Dec 29, 2012

v1.5.23 adds an additional filter in _getAtoms to weed out pesky text nodes. Please try it out and report back

desandro added a commit that referenced this issue Dec 29, 2012

guyisra commented Dec 29, 2012

@desandro this resolves the issue for me. I don't need to filter out the /n myself anymore. Thanks a lot!

@desandro desandro closed this Feb 11, 2013

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment