CODEWITHSUNDEEP
javascriptjqueryjquery-isotope
Johan B
Johan B

Reputation: 1976

Inserting full width item to the isotope layout

I'm trying to add a full width item directly under the item that is being clicked. I have tried two methods (fiddle here).

Is this at all possible?

The first method i tried was inserting the new item directly after the item being clicked. This makes empty gaps after the clicked item if it isn't the last item on the row.

    // First try (looks at DOM)
    if (currentPosition.y === nextPosition.y) {
        insertStudentContent($puff.next());
    } else {

        $puff.after($studentContent);
        $container.isotope('reloadItems').isotope({ sortBy: 'number' });
    }

The second method was inserting the item directly after the last item of the row of the clicked item. This method isn't fail safe either. Sometimes items gets between the item being clicked and the item being added. 

    $container.find('.puff').each(function (index) {
        // is the item (.puff) on the same row as the one being clicked?
        if ($(this).data('isotope-item-position').y === currentPosition.y) {
            // The last item on the row of the clicked item will be $puff
            $puff = $(this);
        }
    });
    $puff.after($studentContent);
    $container.isotope('reloadItems').isotope({ sortBy: 'number' });

Upvotes: 0

Views: 539

Answers (1)

Johan B
Johan B

Reputation: 1976

I figured it out and the answer was a lot of if statements:

    var insertStudentContent = function ($puff) {
    var currentPosition = $puff.data('isotope-item-position');
    var upToClickedFlag = 0;
    $container.find('.puff').each(function (index) {
        if (currentPosition.y === $(this).data('isotope-item-position').y && $(this).height() === 300) {
            $(this).removeClass('big').addClass('small');
        }

        if (upToClickedFlag && currentPosition.y === $(this).data('isotope-item-position').y) {
            if ($(this).prev().data('isotope-item-position').y === $(this).data('isotope-item-position').y) {
                $puff = $(this);
            }
        }

        if ($(this)[0] === $puff[0]) {
            upToClickedFlag = 1;
        }

    });
    $puff.css('opacity', '.5');

    $puff.after($studentContent);
    $container.isotope('reloadItems');
    $container.isotope({ sortBy: 'original-order' }).isotope('reLayout');
};

There is the new function. this doesn't work a hundred percent as i want to. The 140x140px items can technically be the last item in dom but be placed second in the masonry. That makes a small (140px) gap when a 140x10 item is the last item on the row. To fix this i would have to change the fundamentals of how isotope works so that is not an alternative. An updated fiddle.

Upvotes: 1

Related Questions