JQuery being performed in order in Safari - Isotope

Question

I have this webpage where when you click a isotope block it fills the page and then filters out all the other block. When i click the block again it should go back to its original location. My current problem is the page doesn't move with the block (you would have to scroll through all the posts again)

I decided that after I re layout the isotope blocks on the grid I will tell the page to go to the appropriate id (don't like this though because i have to assign id to every block)

Right now the code works in Chrome but does not work in safari. I think what is happening is the linking is happening before the relayout and thus remains at the top of the page.

Here is my JQuery:

$(document).ready(function(){
    var $container = $('.news').isotope({
        itemSelector: '.news-block',
        layoutMode: 'masonry',
        getSortData: {
            type: '[data-type]', // value of attribute
            time:'[content]'
        }/*
           sortBy:'type',
           sortAscending: true*/
    });
    $container.on( 'click', '.news-block', function() {
        $(this).toggleClass('expand');
        if ($(this).hasClass('expand')) {
            $container.isotope({ filter: '.expand' });
            $container.isotope('layout');
        } else {
            $container.isotope({ filter: '*' });
            $container.isotope('layout');
            window.location.href = '#'+$(this).attr("id");

        }
    });
});

Css for blocks (shows expansion in width):

.news-block {
    width:30.6666666666%;
    margin:1%;
    padding:2%;
    float:left;
    box-sizing: border-box;
    word-wrap: break-word;
    background-color: white;
    color:#888;
}
.news-block.expand {
    width:96%;
}

I hope there is an easy solution. Tried to use the wait till layout complete in isotope but wouldnt work. Also tried a delay and that didnt work either. Any suggestions. (I am new to JQuery, html, and css)

Maybe you could use `scrollTo()` instead of changing the hash. — Barmar, Jan 31 '15 at 21:28
How would i do that? New to jquery / javascript just post in answer section if you have idea — orwinmc, Jan 31 '15 at 21:29
Nvm I solved the problem. Can i post answer to my own question? — orwinmc, Jan 31 '15 at 21:38
Yes, you can answer your own question. I was just about to close this as a duplicate of http://stackoverflow.com/questions/6677035/jquery-scroll-to-element/6677069#6677069 — Barmar, Jan 31 '15 at 21:39
Ok. Didnt know was duplicate. Couldnt find for longest time. so needs a better search — orwinmc, Jan 31 '15 at 21:46

score 0 · Accepted Answer · answered Jan 31 '15 at 21:45

Create scroll value
Set Scroll value before blocks are removed and clicked block is chosen
After clicking again to go back to panel set the scroll to the scroll value

answer: scrollTop()

$(document).ready(function(){
                var $container = $('.news').isotope({
                    itemSelector: '.news-block',
                    layoutMode: 'masonry',
                    getSortData: {
                        type: '[data-type]', // value of attribute
                        time:'[content]'
                    }/*
                    sortBy:'type',
                    sortAscending: true*/
                });
                var scroll = 0;
                $container.on( 'click', '.news-block', function() {
                    $(this).toggleClass('expand');
                    if ($(this).hasClass('expand')) {
                        $container.isotope({ filter: '.expand' });
                        $container.isotope('layout');
                        scroll=$('body').scrollTop();
                        console.log(scroll);
                    } else {
                        $container.isotope({ filter: '*' });
                        $container.isotope('layout');
                        $('body').scrollTop(scroll);
                        //scrollTop: $('#'+$(this).attr("id")).offset().top
                        //$('body').scrollTo('#'+$(this).attr("id"));
                    }
                });
            });

JQuery being performed in order in Safari - Isotope

1 Answers1