Thank you! Your feedback has been delivered
Thank you! Your feedback has been sent

Isotope liquid layout - Add item in the next row

Hi coders!

I have this project: www.mercatocentrale.it - I have used isotope to generate a liquid masonry with different width and height dimensions for each box.

I have sorted each box with a "sort order" value that I parse with isotope class.

When you click on specific boxes i append a new div to isotope and I want to position it in the next row of the grid. Actually the effect works but:

1) I have to specify manually WHERE the box should appear or it will be appended (or propended) ant the end of the grid.

2) I can't use a filter to show specific boxed dynamically 'cause the lost the right "sort order" anche new appended divs appears in the wrong place.

I would like to have a way to teach my script to find the actual position of the box and open the appended one at the beginning of the next row like now but without have to specify manually a sort order.

Just other few info: i am on Wordpress, i generate dynamically all the boxes + i need a working page, please don't send me Javascript's frameworks or other stuff, just the working code with the actual contents so i can just edit my file and go go go + all my jQuery code is in the footer of the page.

Thank you so much.

User Gravatar

LenusMedia

Posted May 21 2014 0:02 UTC

$200


  • Assigned To jawish2208
  • Solved
  • jquery
    isotope
    isotope-on-append
  • 1835 Views

16 Replies


Hi I don't have all the code completed by it's enough to make you able to code it.

First you'd have to mark all the last elements in the masonry.

For that you can do this. $('#main .elemento:last-child').addClass('last'); var maxWidth = 0;

// Use max to handle last div
$("#main div.elemento").each(function (i) {  
  matrix = $(this).get(0).offsetLeft;

  // identify first elements
  if ( matrix == 0 ) {
    $(this).addClass("first");
  }

  // identify last elements
  if ( matrix > maxWidth ) { 
    maxWidth = matrix;
  } else {      
    $(this).prev().addClass("last");
    maxWidth = 0;
  } 
});

This marks all elements which are with the highest offset to the left.

If you now do $('.elemento.last') you will get all of them.

But because Masonry squeezes items in, you will see pairs of items in the array which are both considered laft but the second one is actually the last element.

To fix that, you need to look at each pair, and check if

// Pseudo code
if (second_element.top - second_element.height == first_element.top)
then it is the real last and you can delete first_element
else
both are real last for different rows

Now that you can check all the last elements you need to check for the clicked item who is the closest .last element to it, to do that, you'll have to do .nextAll('.last').first()

You can for example:

$('#item_39').nextAll('.last').first()
$('#item_299').nextAll('.last').first()

Now that you know the last element in that row you can use isotope append to add it correctly.

You can do the same first for elements who have offsetLeft equals to 0 to mark all first elements and decide wether you want to append or prepend.

Good luck.

User Gravatar

gmaliar

Posted May 22 2014 7:32 UTC

Great answear! Should you think that using last-child will work properly on all modern browsers? So with this solution i will be able to define different matrix with different columns and the retrieve the last one...

could you arrange the whole working code?

User Gravatar

LenusMedia

Posted May 22 2014 8:40 UTC

Yes :last-child should work on IE9+, Chrome, Safari 3.2+, FF, Android/iOS, Opera 9.5+ (http://css-tricks.com/almanac/selectors/l/last-child/).

I didn't notice that this was a task so I didn't actually create all the code, I am pretty busy right now but those snippets should go into your open_bollino function, instead of the target_sorting line.

It is not tested so there might need to be more changes.

Sorry I can not create a snippet.

User Gravatar

gmaliar

Posted May 22 2014 9:22 UTC

ok, i am pretty sure that i can take few hours to test everything. I will be back with a new live example to test :) Thank you for the moment.

User Gravatar

LenusMedia

Posted May 22 2014 9:55 UTC

Hi,

I've rewritten your open_bollino() function to handle all that you asked dynamically. You only need the sorting for the original item and the code will scan the items till it reaches the end of the row and then add an item with a sort value of row_last_item_sort + 0.5 to push it to the next line.

Here's the code:

function open_bollino(id) { var elem_bollino = jQuery('#bollino'); if (elem_bollino) { console.log(elem_bollino.data('item-id')); var activeItem = elem_bollino.data('item-id');

        if (activeItem == id) {
            return;
        }
        else {
            hide_bollino();
        }
    }

    var elem = jQuery('#'+id);

    if (!elem.hasClass('contenutohtml')) return;

    var main_width = jQuery('#main').width();
    var num = (main_width < 641) ? 2 : 7;
    var item_width = Math.floor(main_width / num);

    calculate_dimensions(item_width, num);

    var htmlcontents    =   elem.children('.htmlcontents').html().replace(/(rn|n|t|r)/gm, "");

    if (htmlcontents != '')
    {
        var valid_colore = [  'rosa', 'verde', 'rosso', 'giallo', 'blu', 'panna', 'aqua', 'pizza', 'paglia' ];
        var colore = '';
        for (c in valid_colore) {
            if (elem.hasClass(c)) { 
                colore = c;
            }
        }

        var sorting = 0;
        var isoElems = jQuery('#main').isotope('getItemElements');
        var hunt = false;
        for (var i=0;i <isoElems.length;i++) {
            if (id == isoElems[i].id) {
                hunt = true;
                continue;
            }

            if (hunt == true && isoElems[i].offsetLeft == 0) {
                sorting = jQuery('#' + isoElems[i].id).children('.sorting').text() - 0.5;
                break;
            }
        }

        var marginesx       =   elem.offset().left + (elem.width() / 2) - 7 - jQuery('#mainmenu').width();
        var newItem         =   jQuery('<div id="bollino" data-item-id="'+ id + '" class="elemento ballon artigiani has_content_to_display losapevi"><div class="toparrow '+colore+'" style="margin-left: '+marginesx+'px">&nbsp;</div>'+htmlcontents+'<p class="sorting">'+sorting+'</p></div>');

        // calcoliamo la posizione della pagina.
        var body_pos    =   jQuery('#top').offset();

        // generiamo il nuovo
        jQuery('#main').append( newItem ).isotope('appended', newItem);
        jQuery('#main').isotope({ sortBy: 'sorting' });

        elem.children('.hoverBox').addClass('hovered');

        //jQuery("#appended_to_"+id+" .boxscroll-active").niceScroll({
        jQuery("#bollino .boxscroll-active").niceScroll({
            cursorcolor:"#000000",
            cursoropacitymin: 1,
            cursoropacitymax: 1,
            cursorwidth: 8,
            cursorborder: '0'
        });
        jQuery("#bollino .boxscroll-active").getNiceScroll().resize();
        jQuery("#bollino").mouseover(function(){
            jQuery("#bollino .boxscroll-active").getNiceScroll().resize();
        })

        // definiamo lo scorrimento 
        dest    =   elem.offset().top;
        jQuery('body,html').scrollTo(dest, 500);

    }
}
// *
// * hide Box
// *
function hide_bollino()
{
    var elem_bollino = jQuery('#bollino');
    if (elem_bollino) {
        var activeItem = elem_bollino.data('item-id');
        jQuery('#'+activeItem + ' .hoverBox').removeClass('hovered');
        jQuery('#main').isotope('remove', elem_bollino);
        jQuery('.nicescroll-rails').css('display', 'none');

        jQuery('#main').isotope();
    }
}

I can upload the whole code/files I have working if you need it.

Good luck.

User Gravatar

jawish2208

Posted May 22 2014 10:25 UTC

jawis, if you can upload the code an it will works, you have won the prize (and a beautiful T-shirt, i think).

Emanuele

User Gravatar

LenusMedia

Posted May 22 2014 10:29 UTC

Here you go https://dl.dropboxusercontent.com/u/457073/mercatocentraleit.zip

User Gravatar

jawish2208

Posted May 22 2014 10:30 UTC

LenusMedia: Didn't work for you?

User Gravatar

jawish2208

Posted May 23 2014 3:54 UTC

i'm testing right now (sorry for my delay)

User Gravatar

LenusMedia

Posted May 23 2014 3:55 UTC

well, this is my page: www.mercatocentrale.it/en with my code and this is your code (please check) http://www.mercatocentrale.it/test-3/

I saw that some functions (autoclose / navigate between black section doesn't work). Is is my fault or...?

User Gravatar

LenusMedia

Posted May 23 2014 4:10 UTC

Sorry, my bad. Here's the files with the open_billino(), hide_bollino(), prev_bollino() and next_bollino() functions modified with my changes and should work with the autoclose and navigation.

https://dl.dropboxusercontent.com/u/457073/mercatocentraleit.v2.zip

You really should go for a code cleanup/optimization at some point, there's so much clutter in there.

User Gravatar

jawish2208

Posted May 23 2014 5:22 UTC

Solution

This didn't solve your task? Get your own custom solution.

No problem, I have another opened task to simplify my code :)

It's somewhere in Coder's Clan (Check you newsletter)

Wanna do an "en plein"? I will check in minutes

User Gravatar

LenusMedia

Posted May 23 2014 5:27 UTC

Had a quick look. I don't see another task. Maybe expired/completed.

User Gravatar

jawish2208

Posted May 23 2014 6:14 UTC

Hey guys, this is the task

https://www.codersclan.net/ticket/317

It is indeed technically expired like this one. @LenusMedia, please let me know if you would like to extend their deadlines so they would reappear on the main list.

Dror - CodersClan

User Gravatar

CodersClan

Posted May 23 2014 6:17 UTC

Hey guys, this is the task

https://www.codersclan.net/ticket/317

It is indeed technically expired like this one. @LenusMedia, please let me know if you would like to extend their deadlines so they would reappear on the main list.

Dror - CodersClan

User Gravatar

CodersClan

Posted May 23 2014 6:17 UTC

Jawis, you code works: www.mercatocentrale.it (it's live). But it seems to be broken on my Firefox at the first load: www.mercatocentrale.it/first_load.gif and I have to resize to have the right effect.

Or sometimes under "stress" the niceScroll effect ...doesn't work properly www.mercatocentrale.it/bar.gif

If I try to load just one kind of boxes like here: http://www.mercatocentrale.it/gli-artigiani-gusto/ it seems to not work properly...

For me THIS task is complete, great work Jawis. @Coderscaln coul you update my other task with 36hours? This weekend i will be unavaible to check code.

Thank you.

User Gravatar

LenusMedia

Posted May 23 2014 6:36 UTC

Add a reply

By posting a reply on CodersClan you agree to our Terms & Conditions