Array with random positions

Question

I have a problem with random positions. I make a script that set <li> random on the page. You can see it here: Click here

But the problem is. That the items overlap. I want make this script with a array. I would like an array with fixed positions. There are always 8 items. And these eight items, all have one fixed position.

How can I make this? How can I make a array with fix positions?

Here my code:

var images = [];

function init() {
    $('.friend-selection li > div').each(function(){

        var id = this.id;
        var img = $('#img_' + id);
        var randomTop = 400*Math.random(); //random top position
        var randomLeft = 500*Math.random()+1; //random left position

        $("#parent_" + id).css({ //apply the position to parent divs
            top     : randomTop,
            left    : randomLeft
        });
    });
};

init();

Scigrapher · Accepted Answer · 2011-10-19 07:04:02Z

0

I'm assuming you have a set of 8 fixed, non-overlapping positions that you'd like to use randomly and uniquely:

var images = [];

// Constructor for the "Position" structure
function Position(left, top) {
    this.left=left;
    this.top=top;
}

// sortFunction routine to help randomize array
function rand(ar){
    return 0.5-Math.random();
}

// Array containing the 8 positions you want to use
var positionArray = [
      new Position(0,  0) 
    , new Position(50, 50) 
    , new Position(100,100) 
    , new Position(150,150) 
    , new Position(200,200) 
    , new Position(250,250) 
    , new Position(300,300) 
    , new Position(350,350) 
];

function init() {
    $('.friend-selection li > div').each(function(){

        var id = this.id;
        var img = $('#img_' + id);
        var imageIndex = parseInt(id.substring(id.length - 1)); // This is a hack because you're using "picture*" as the id

        $("#parent_" + id).css({ //apply the position to parent divs
            top     : positionArray[imageIndex].top,
            left    : positionArray[imageIndex].left
        });
    });
};


// Randomize array - http://stackoverflow.com/questions/7802661
positionArray.sort(rand);

init();

answered Oct 19, 2011 at 7:04

Scigrapher

2,1862 gold badges13 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mike Vierwind Over a year ago

Yeah this i what i looking for. But there is a bug in the script. I dont know where it is. The last item get nog a position. See here: jsfiddle.net/5L9FN/5

Jamiec Over a year ago

The bug is because your pictures start at 1 but the array index starts at 0. Change the line that look like: var imageIndex = parseInt(id.substring(id.length - 1)) to var imageIndex = parseInt(id.substring(id.length - 1))-1;

Roger Far · Accepted Answer · 2011-10-19 06:20:05Z

0

Put the items in sequence in the array so that you cannot overwrite the already filled positions and use Shuffle to shuffle the array in a random order.

But as there is no such function in Javascript you will have write one on your own. Something like this would work.

shuffle = function(o){
    for(var j, x, i = o.length; i; j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
    return o;
};


alert(shuffle([0, 1, 2, 3, 4, 5, 6, 7, 8, 9]));

http://jsfiddle.net/uxnn7/

answered Oct 19, 2011 at 6:20

Roger Far

2,4033 gold badges41 silver badges72 bronze badges

Collectives™ on Stack Overflow

Array with random positions

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related