0

I'm creating multiple, smaller copies of an element whenever it is clicked. These clones are sent a random distance and direction. I'm having trouble keeping them within the document boundaries. Here's the Fiddle.

I know that I need to check the position of each new element and compare it to the document boundaries so that any new element it spawns itself will conform, but then I'm worried about users resizing their browsers, and also if the user has a very small window how it will affect the functionality... so I guess I'd also like to set a floor or minimum size that the boundaries can be relegated to.

This all seems somewhat resource-intensive and I don't want it to be too taxing. Is there an efficient way to accomplish what I'm wanting? You can see my pathetic attempts in the Fiddle or below:

var contW = $(document).width();
var contH = $(document).height();

var source = $(this).position();
var posNeg = Math.random() < 0.5 ? -1 : 1;
var newTop = Math.floor(Math.random() * (contH / 2 + (posNeg * $(this).height()))) * posNeg;
var posNeg = Math.random() < 0.5 ? -1 : 1;
var newLeft = Math.floor(Math.random() * (contW / 2 + (posNeg * $(this).width()))) * posNeg;
daveycroqet
  • 2,667
  • 7
  • 35
  • 61

2 Answers2

1

Is this what you are after? 

// constrain newTop and newLeft
    if  (newTop < 0){
        newTop = 0;
    }
    if  (newTop > contH){
        newTop = contH;
    }
    if  (newLeft < 0){
        newLeft = 0;
    }
    if  (newLeft > contW){
        newLeft = contW;
    }

http://jsfiddle.net/eadyv/5/

timo
  • 2,119
  • 1
  • 24
  • 40
  • Yes, and wow, such a simple solution. But everything seems to be congealing in the northwestern quadrant now. I think that's a problem with the way you're restricting the top and left, but I'm unsure. I'd like for them to spread in every direction equally, if possible. Whoa... a more comprehensive answer by abhitalks, sorry! – daveycroqet Jan 14 '14 at 13:08
1

Demo: http://jsfiddle.net/abhitalks/eadyv/6/

Problem (which I could figure out): Negative margins: causing the cloned images to get beyond the edges

Solution: Remove the negative margins. Try experimenting with the container to contain the clones. The widths are reducing by half each time, so have to account for the width as well (to avoid going out from bottom and right edges).

Changes I did to test the fiddle:

html, body { width:100%; height: 100%; }
div#container {
    position: relative;
    width: 350px;
    height: 350px;
    border: 1px solid gray;
}
img.cat {
    position: absolute;
    top: 10%;
    left: 10%;
    width: 250px;
    height: 250px;
    cursor: pointer;
}

Footnote: The example fiddle is just a test to demonstrate that containment problem was perhaps with negative margins. You would need to change the containment from container to document and then tweak it.

Abhitalks
  • 27,721
  • 5
  • 58
  • 81
  • Your solution predictably suffers from the reverse of what user3008011's did. By eliminating negative margins, yours now almost exclusively favors the bottom right (as opposed to the top left). I feel like this is much closer to where it needs to be, however. – daveycroqet Jan 14 '14 at 13:29
  • ok. check this fiddle in fullscreen: **http://jsfiddle.net/abhitalks/eadyv/8/embedded/result/** (1) I deliberately used the container to contain the clones so that you can see what is actually happening. The clones will never get out of container. However, because of the changing width, the images may end after the container border, but will never cross it. (2) check the `getRandomInt` function and cross ref with the `newTop` and `newLeft` which is being generated. You will see that it never exceeds 450 (the size of the container. And the values are not favouring any side, they are random mix. – Abhitalks Jan 14 '14 at 13:37
  • Also, if you use the document/body as the container, then you will not be able to see why the images are crossing the boundaries. – Abhitalks Jan 14 '14 at 13:38
  • I see. That was very helpful and instructional, thank you! A question: Is it truly random? Because by sheer observation (which I know is flawed and bias), this method seems to provide the clones a much greater likelihood to spread to wherever the most available space is. Initially, this might be the bottom right, but then they all begin spawning in the upper left. Is my assessment correct? – daveycroqet Jan 14 '14 at 13:43
  • the randomization is being done by a separate function and is producing randoms between a min and max. it does not know where is space available and where not. the randomization in js (and many other languages) is achieved by seeding system time. more info here: http://stackoverflow.com/questions/2344312/how-is-randomness-achieved-with-math-random-in-javascript – Abhitalks Jan 14 '14 at 13:47