Question

as the title says: this won’t work. The script does move the articles which I want to move, it also animates it if I put the option to the selector, but it won’t randomize the height and width of the elements. All elements get a random width of 127px and I can’t understand that. The mentioned php file in which the script is fetched, is below:

Updated:

    <script type="text/javascript" src="<? bloginfo('stylesheet_directory'); ?>/js/jquery.freetile.min.js"></script>
    <script>
    jQuery(document).ready(function() {

    for (i=0;i<40;i++) {
        var w = 128 * (parseInt(Math.random() * 3) + 1) - 1,h = 128 * (parseInt(Math.random() * 3) + 1) - 1;
    jQuery('article').width(w).height(h);
    }

        jQuery('#content').freetile();
         selector: 'article';
         animate: true;
         elementDelay: 10
        });
    </script>

Is there something wrong with this part? That would be odd, because I literally copied and pasted it from the github repository.

    for (i=0;i<40;i++) {
        var w = 128 * (parseInt(Math.random() * 3) + 1) - 1,h = 128 * (parseInt(Math.random() * 3) + 1) - 1;
    jQuery('article').width(w).height(h);
    }

Here is the link to the files:
https://github.com/yconst/Freetile/blob/master/js/init.js

Thanks ComputerArts, I have accepted your answer 🙂

Answer 1

Let’s explain your code

for (i=0;i<40;i++) {
    var w = 64 * (parseInt(Math.random() * 3) + 1) - 1,
    h = 48 * (parseInt(Math.random() * 3) + 1) - 1;

    //this part here is where the error happens.
    //you're asking to set the width and height to every element <content> on each iteration.
    //so on the last iteration, all the elements have the same width/height
    jQuery('content').width(w).height(h).appendTo('article');
}

I believe this is what you want.

jQuery(document).ready(function() {
    for (i=0;i<40;i++) {
        var w = 64 * (parseInt(Math.random() * 3) + 1) - 1,
            h = 48 * (parseInt(Math.random() * 3) + 1) - 1;
        $('<div class="content" />').width(w).height(h).appendTo('body');
    }
});