Create randomly generated divs that fill a box jQuery and Javascript

Question

I have a section on my website that is 100% wide and 450 pixels tall.

My html looks like so...

<section class="interactive-banner">
    <figure></figure>
</section>

I want each 'figure' element to be 150 pixels wide and 150 pixels tall, I want to generate the 'figure' html automatically and randomly with jQuery, and to consist of some inner html.

I have the following...

$(function(){

    var people = [
        { id: 1 },
        { id: 2 }
    ];

    var figure = $('figure');
    w = 1500;
    h = 450;

    var counter = 0;
    var data = people[Math.floor(Math.random()*people.length)];

    (function nextFade() {
        counter++;
        figure.clone().html(data.name).appendTo('.interactive-banner').hide().fadeIn(150, function() {
            if(counter < 30) nextFade();
        });
    })();

});

I want each figure element to fade in 1 after the other, in total I will only have 7 original figures, only these 7 will be randomly cloned until i have 30 iterations in total, I want the figure html to contain the data inside each object in my people array, so each figure is an object so to speak, output as so...

<figure>
    <img src="[image src from object inside array]" />
    <div class="information">
        <h5>[name from object inside of array ]</h5>
        <p>[job title from object inside of array ]</p>
    </div>
</figure>

only at the minute its being output as so...

<figure style="display: block;">
    Chris
</figure>

Ive created an example here, as you see however each figure contains the same information...

http://jsfiddle.net/pGmeE/

You are trying to hard with your closure attempts. You need to call a function that returns the data instead of hoping data is in scope: function getData() { return people[Math.floor(Math.random()*people.length)];} — mplungjan
– mplungjan, Commented Aug 11, 2013 at 21:04
Sorry @mplungjan I'm unsure I understand, can you elaborate? what do you mean my closure attempts? — Liam
– Liam, Commented Aug 11, 2013 at 21:10
As it stands... You're trying to populate one after the other on the flight your DIVs with images. For every image, that's a new request to the server, it'll take some time to load your images and you'll end up with a pretty ugly effect — Roko C. Buljan
– Roko C. Buljan, Commented Aug 11, 2013 at 21:11
Ahh I see @RokoC.Buljan, I didn't pre-empt that, so theoretically it'd be wiser I ping the server before hand and preload each image? Essentially theres only 7 images that are about 100kb each though? — Liam
– Liam, Commented Aug 11, 2013 at 21:13
Exactly. Don't ever relay that your images are only "YxX" cause if I'm on mobile, with an Edge connection... I'll ask you than :) hehe, yes, preload every image beforehand. — Roko C. Buljan
– Roko C. Buljan, Commented Aug 11, 2013 at 21:15

Roko C. Buljan · Accepted Answer · 2013-08-11 21:21:16Z

http://jsbin.com/isopin/1/edit

Don't populate your section initially and don't clone your figure element with jQ. Rather create a new one at every loop iteration.

<section class="interactive-banner"></section>

jQ:

$(function(){

    var people = [
        { id: 1, name: 'Justin', title: 'Head Designer', bio: 'This is Justin\'s Biography.', image: 'justin.jpg'   },
        { id: 2, name: 'Chris', title: 'Head Developer', bio: 'This is Chris\' Biography.', image: 'chris.jpg'      },
        { id: 3, name: 'Sam', title: 'Developer', bio: 'This is Sam\'s Biography.', image: 'sam.jpg'                },
        { id: 4, name: 'Haythem', title: 'Developer', bio: 'This is Haythem\'s Biography.', image: 'haythem.jpg'    },
        { id: 5, name: 'Geoff', title: 'Designer', bio: 'This is Geoff\'s Biography.', image: 'geoff.jpg'           },
        { id: 6, name: 'Liam', title: 'Designer', bio: 'This is Liam\'s Biography.', image: 'liam.jpg'              }
    ];

    w = 1500;
    h = 450;

    var counter = 0;


    (function nextFade() {
        counter++;
        // Give "random" a chance to get random again
        var data = people[Math.floor(Math.random()*people.length)];
        // Now create a new Figure element:
        var figure = $('<figure />');
        figure.html(data.name).appendTo('.interactive-banner').hide().fadeIn(150, function() {
            if(counter < 30) nextFade();
        });
    })();

});

Collectives™ on Stack Overflow

Create randomly generated divs that fill a box jQuery and Javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related