0

I want create a page where the the buttons of that page should place in random places:

points:

1)buttons should come within the screen

2)buttons should not collide

ketan
  • 19,129
  • 42
  • 60
  • 98
Ravindhar Konka
  • 153
  • 2
  • 13
  • 7
    Can you show what have you tried so far? – Almis Feb 09 '15 at 07:19
  • 4
    And which exact part are you having problems with: creating buttons? positioning buttons? determining the size of the screen? picking random positions? detecting collisions? something else? – Rup Feb 09 '15 at 07:39
  • 3
    You will never learn if the coding part (_which is your work_) is done by the users here. [Issued in your interest] – Mr_Green Feb 09 '15 at 08:17

2 Answers2

1

I have extended the solution available here and here is what you can do:

[Note that this solution uses jQuery and not Angular.]

var min_x = 0;
var max_x = 200;
var min_y = 0;
var max_y = 200;
var filled_areas = new Array();

$('.word').each(function() {
    var rand_x=0;
    var rand_y=0;
    var area;
    do {
        rand_x = Math.round(min_x + ((max_x - min_x)*(Math.random() % 1)));
        rand_y = Math.round(min_y + ((max_y - min_y)*(Math.random() % 1)));
        area = {x: rand_x, y: rand_y, width: $(this).width(), height: $(this).height()};
    } while(check_overlap(area));
    
    filled_areas.push(area);
    
    $(this).css({left:rand_x, top: rand_y});
});

function check_overlap(area) {
    for (var i = 0; i < filled_areas.length; i++) {
        
        check_area = filled_areas[i];
        
        var bottom1 = area.y + area.height;
        var bottom2 = check_area.y + check_area.height;
        var top1 = area.y;
        var top2 = check_area.y;
        var left1 = area.x;
        var left2 = check_area.x;
        var right1 = area.x + area.width;
        var right2 = check_area.x + check_area.width;
        if (bottom1 < top2 || top1 > bottom2 || right1 < left2 || left1 > right2) {
            continue;
        }
        return true;
    }
    return false;
}
.word {
    position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="word1" class="word"><button>hello</button></div>
<div id="word2" class="word"><button>tag</button></div>
<div id="word3" class="word"><button>cloud</button></div>
<div id="word4" class="word"><button>hello</button></div>
Community
  • 1
  • 1
Rahul Desai
  • 15,242
  • 19
  • 83
  • 138
  • @RavindharKonka I am glad that you find this useful. :) Please upvote and mark this answer as accepted if you are satisfied with it. – Rahul Desai Feb 09 '15 at 17:11
0

check this jsfiddle link....you can change the random values.. http://jsfiddle.net/abcdurga/uparw4tc/

makeRandomButtons( 10, 10, 2, 255, 2, 255, 2, 255,  'buttonId','Button');//     call this in ur for loop.

function makeRandomButtons(min_w, max_w, min_col_r, max_col_r, min_col_g, max_col_g, min_col_b, max_col_b,  buttonId,ButtonName){

    var w = Math.floor(rand(min_w/2,max_w/2))*2+80;
    var col_r = Math.floor(rand(min_col_r,max_col_r));
    var col_g = Math.floor(rand(min_col_g,max_col_g));
    var col_b = Math.floor(rand(min_col_b,max_col_b));
    var col_a = 1;
    var left = Math.floor(rand(150,40));
    var top = Math.floor(rand(110,40));

    var borderrad = 10;

    var params = buttonId;

    var divTag = '<div  onclick="buttonClick('+params+')"  style="position:relative;float:left;margin-left:'+left+'px;margin-top:'+top+'px;width:'+w+'px;height:'+w+'px;background-color:rgba('+col_r+','+col_g+','+col_b+','+col_a+');-moz-border-radius:'+borderrad+'px;-webkit-border-radius:'+borderrad+'px;border-radius:'+borderrad+'px;z-index:9999;" >'
        +'<div style="color:black;margin-top:5%;margin-left:43%;width:52%;height:10%;">'+ButtonName+'</div></div>';

    $('#contentId').append(divTag);

}

function rand(minv,maxv){
return (Math.random()*(maxv-minv))+minv;

}

Durga Sriram
  • 406
  • 3
  • 16