jQuery: Math.floor function on hash load

Question

I have a hashchange function set up to change the class of divs and load them into an isotope grid, thus allowing me to navigate to the divs via a hash url. I also have a Math.floor function in there too as the height of .grid-break is determined by this, always in 230px intervals so it stays consistent with the grid. The .click-block click function show the .grid-break div at the correct height, this is great. But then navigating to this function via e.g. www.website.com/#thisisahash and the .grid-break div appears with no height and appears broken.
jQuery:

    $(document).ready(function () {
        $(window).hashchange(function () {
            var hash = location.hash;
            if (hash) {
                var element = $('.click-block[data-hook="' + hash.substring(1) + '"]');
                if (element) showDetail(element);
            }
        });

        $(document).ready(function () {
            $(document).hashchange();

            var $container = $('#main-grid, #news-grid, .main-grid');

            $(function () {
                $container.imagesLoaded(function () {
                    $container.isotope({
                        itemSelector: '.grid-block, .grid-break, .hidden',
                        animationEngine: 'best-available',
                        filter: '*:not(.hidden), .grid-block',
                        masonry: {
                            columnWidth: 8,
                            gutterWidth: 25
                        }
                    });
                });
            });

            $(".click-block").click(function () {
                document.location.hash = $(this).attr('data-hook');
            });
        });


        function showDetail(element) {
            var newHeight = $('#post-' + element.attr('data-hook')).height();
            $('#post-' + element.attr('data-hook')).removeClass('hidden').addClass('grid-break').delay(300).fadeIn('slow');
            newHeight = (Math.floor((newHeight + 10) / 230) + 1) * 230 - 10;
            $('#post-' + element.attr('data-hook')).css('height', newHeight);
            element.children('.up-arrow').fadeIn('slow');
            setTimeout(function () {
                $('html, body').animate({
                    scrollTop: $('#post-' + element.attr('data-hook')).offset().top - 90
                }, "slow");
            }, 1500);
            $('#main-grid').isotope();
        }
});

Is there a way that the height of the .grid-break divs can be calculated before they're added to the isotope grid and thus appearing broken? Or any other solution to this small problem? Any suggestions would be greatly appreciated!

Answer 1

I solved this problem by firing the math.Floor function on window load like so:

$(window).load(function(){
var $this = $('.grid-break');

        $this.css('height','auto');
        var newHeight = $this.height();
        newHeight = (Math.floor((newHeight+10)/230)+1)*230-10;
        $this.css('height',newHeight);
});