2

I have elements which are overlapping and I would like to prevent this. Here is a picture: http://grab.by/cB7t

Also, here is the CSS for those elements:

.navigationItem {
    background: #808080;
    -webkit-border-radius: 360px;
    padding: 1.0em;
    text-decoration: none;
    color: #fff;
    position: absolute;
    -webkit-box-shadow: 0px 2px 5px #909090;
    font-weight: bold;
    text-shadow: 1px 1px 2px #707070;
    font-size: 1.0em;
}

And here they are in the HTML:

<a href="#" class="navigationItem" id="nav0">play</a>
<a href="#" class="navigationItem" id="nav1">register</a>
<a href="#" class="navigationItem" id="nav2">our blog</a>
<a href="#" class="navigationItem" id="nav4">contact us</a>
<a href="#" class="navigationItem" id="nav5">about us</a>
<a href="#" class="navigationItem" id="nav6">our rules</a>`

As you can see, I am using them as simple styled links using the HTML a tag. The reason that their positions are absolute is because I am moving them using jQuery:

function moveAll() {

    for(var i = 0; i < AMOUNT; i++) {
        var random = Math.random() * 500;
        $("#nav" + i).animate({"left": random + i + "px"}, "slow");
        $("#nav" + i).animate({"top": random + i + "px"}, "slow");
    }
}

When they move, though, they sometimes overlap which is annoying. How can I prevent them from overlapping? Thank you for your efforts.

Improve this question
4
  • @user156629 They are being positioned at random. Commented Jun 10, 2011 at 6:45
  • @Robert Koritnik Thank you for correctly formatting my snippets - I realized I used the single line symbols instead of block snippets, however it said because I am a new user I cannot post more than 2 hyperlinks. Commented Jun 10, 2011 at 6:46
  • 1
    If you're going to position them absolutely and randomly assign them positions, then you're going to need some relatively complex logic to make sure your moveAll function doesn't position them over each other. It will need to determine if any other elements bounding box will be overlapped by the next element it moves to it's determined location, choose another position if it does, and check again until it finds an unused area. Are you asking for the function logic to do this? Commented Jun 10, 2011 at 6:51
  • No worries. that's why we're here (more seasoned users). To help. Commented Jun 10, 2011 at 7:32

2 Answers 2

Reset to default
6

Removing position:absolute would render them side by side.

JSFiddle

But if the whole point is to scatter them around randomly, then you will have to keep track of positioned elements and take that into account when calculating their position. You should save each link's position and calculate every next link's position according to previous already positioned links. There's simply no other way when you want random positions and non overlapping.

Final non-overlapping solution

This is a working example of non-overlapping functionality. If you'd want your links to not even touch, you should change < to <= and > to >= in the if statement condition.

Relevant code

var positions = [];
$(".navigationItem").each(function(){
    var ctx = $(this);
    var dim = {
        width: ctx.outerWidth(),
        height: ctx.outerHeight()
    };
    var success = false;

    // repeat positioning until free space is found
    while (!success)
    {
        dim.left = parseInt(Math.random() * 300);
        dim.top = parseInt(Math.random() * 300);
        var success = true;

        // check overlapping with all previously positioned links
        $.each(positions, function(){
            if (dim.left < this.left + this.width &&
                dim.left + dim.width > this.left &&
                dim.top < this.top + this.height &&
                dim.top + dim.height > this.top)
            {
                success = false;
            }
        });
    }
    positions.push(dim);
    ctx.animate({
        left: dim.left,
        top: dim.top
    }, "slow");
});
Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

But then I can't move them using jQuery.
@Tim: I've written some code that makes your links non-overlapped. Check the second code and see how it works. You can see log as well. Every dot in it is a failed attempt. So you can see that it doesn't need so many attempts to calculate free space for your links. Number of attempts will of course become bigger when there's small space for all links.
+1, nice answer. It might be worth adding a limit to the number of attempts to position each element, say 100, just to stop the browser freezing if there is no solution.
@thirtydot: Or even less when there's definitely lots of space for the elements. The whole positioning process could as well be restarted one more time and if it failed again there could be some lifeline hardcoded calculation that deterministically positions elements (not random though). But you're right. There should be some too long loop checking. But that's on the user that will use this code.
0

You can change the position value to relative.

See my example : http://jsfiddle.net/NmmX6/2/

I changed your loop so that it isn't id dependent : 

function moveAll() {
    $('.navigationItem').each(function(i,e){
        var rdm = Math.random() * 500;
        $(e).animate({"left":rdm + "px"}, "slow");
        $(e).animate({"top": rdm + "px"}, "slow");
    });
}

I tested it and did not find one case where it actually overlaps, but check it out.

Improve this answer

2 Comments

It was overlapping for me about 20% of the time.
Overlapped for me as well. Change 500 to 200 and it will be more likely that they will overlap.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.