CODEWITHSUNDEEP
jqueryfreewalljs
Dog
Dog

Reputation: 663

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

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?

Upvotes: 1

Views: 1748

Answers (2)

zenovicharis
zenovicharis

Reputation: 76

Just try to add following code in your HTML.

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

Upvotes: 1

JimKristo
JimKristo

Reputation: 1

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>

Upvotes: -1

Related Questions