freewall.js Jquery plugin : not working on first page load

Question

i'm using the freewall jquery plugin (http://vnjs.net/www/project/freewall/) for a page having a grid style layout...

on IE and firefox everything works fine. the plugin is called when the page loads (or when the browser is resized) and the content arranges itself to a grid.

except in Chrome, where it doesn't. only on resizing the browser window, or refreshing does the plugin work.

here is the script i use to call the plugin :

<script type="text/javascript">
        var wall = new freewall("#press_holder ul");
        wall.reset({
            selector: '.brick',
            animate: true,
            cellW: 245,
            cellH: '280',
            rightToLeft: true,
            onResize: function() {
                wall.fitWidth();
            }
        });
        var images = wall.container.find('.brick');
        images.find('img').load(function() {
            wall.fitWidth();
        });

</script>

this problem sounds very similar to one posted on the plugin's github page (https://github.com/kombai/freewall/issues/90), and the solution given is very similar to my code, except wrapped in a function.

i tried this myself, and calling the function onLoad but this didn't seem to make any difference... also the reply on github refers to a variable (allhtml) which is specific to that particular question, so i'm not sure how it can be applied to my code.

any suggestions?

Did you get a working answer to this? I'm experiencing the same thing. — George Harnwell, Feb 09 '17 at 18:19
sorry, no, i didn't... gave up and switched to using the masonry plugin... — Dog, Mar 20 '17 at 15:24

score 1 · Answer 1 · edited Jul 31 '16 at 11:09

1

Just try to add following code in your HTML.

$(document).ready(function() 
     {
        $(document).resize();
     });

edited Jul 31 '16 at 11:09

Muhammad Abdul Arif Sarker

1,211
4
15
25

answered Jul 31 '16 at 10:27

zenovicharis

76
1
4

score -1 · Answer 2 · edited Apr 13 '16 at 16:40

There is nothing wrong with your code. Just add wall.fitWidth(); to the code:

<script type="text/javascript">
    var wall = new freewall("#press_holder ul");
    wall.reset({
        selector: '.brick',
        animate: true,
        cellW: 245,
        cellH: '280',
        rightToLeft: true,
        onResize: function() {
            wall.fitWidth();
        }
    });

     wall.fitWidth(); //add this line of code

    var images = wall.container.find('.brick');
    images.find('img').load(function() {
        wall.fitWidth();
    });

</script>

freewall.js Jquery plugin : not working on first page load

2 Answers2