javascript - Overlapping elements - HTML, CSS, and jQuery -
i have elements overlapping , prevent this. here picture: http://grab.by/cb7t
also, here css 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 in 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 can see, using them simple styled links using html a
tag. reason positions absolute because moving them using jquery:
function moveall() { for(var = 0; < amount; i++) { var random = math.random() * 500; $("#nav" + i).animate({"left": random + + "px"}, "slow"); $("#nav" + i).animate({"top": random + + "px"}, "slow"); } }
when move, though, overlap annoying. how can prevent them overlapping? thank efforts.
removing position:absolute
render them side side.
but if whole point scatter them around randomly, have keep track of positioned elements , take account when calculating position. should save each link's position , calculate every next link's position according previous positioned links. there's no other way when want random positions , non overlapping.
final non-overlapping solution
this working example of non-overlapping functionality. if you'd want links not touch, should change <
<=
, >
>=
in 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 found while (!success) { dim.left = parseint(math.random() * 300); dim.top = parseint(math.random() * 300); var success = true; // check overlapping 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"); });
Comments
Post a Comment