CODEWITHSUNDEEP
javascriptjqueryjquery-masonryjquery-isotope
user938541
user938541

Reputation:

isotope columnshift doesn't work when child is trigger

I am trying to use this layout: masonry column shift

This works for me when I click the main item:

$container.find('.wrapper').click(function(){
        $(this).css({ height: "+=100" });
        // note that element is passed in, not jQuery object
        $container.isotope( 'shiftColumnOfItem', this );
});

and this is what I want (trigger the size change when clicking a child):

$container.find('.wrapper li').click(function(){
        var closestwrapper = $(this).closest('.wrapper');
        closestwrapper.css({ height: "+=100" });
        // note that element is passed in, not jQuery object
        $container.isotope( 'shiftColumnOfItem', this );
});

The size changes but it wont shift the column. I also tried using closestwrapper instead of this.

On the demo page there is a comment that I don't understand:

// note that element is passed in, not jQuery object

Upvotes: 1

Views: 156

Answers (1)

user1106925
user1106925

Reputation:

"On the demo page there is a comment that I don't understand:"

// note that element is passed in, not jQuery object

A DOM element is the object representing the element on the page. A jQuery object is an object constructed by the jQuery library, which usually contains one or more DOM elements.

In your first isotope() call, you're passing this, which in that case is a DOM element.

But in the second version, if you try to pass closestwrapper, you're passing a jQuery object that contains the DOM element. So what you need is to extract the DOM element from the jQuery object.

jQuery stores the DOM Elements at zero-based numeric indices, so you can use the typical Object member operator to get the DOM element.

// -----------------------------------------------------v
$container.isotope( 'shiftColumnOfItem', closestwrapper[0] );

Upvotes: 1

Related Questions