CODEWITHSUNDEEP
javascriptjqueryhtmlcsspositioning
Wil Wells
Wil Wells

Reputation: 205

Randomly creating and positioning elements exceeds browser window

Using JQuery I am creating elements and adding them to the body (I've also tried using a DIV and get the same results), the new DIVs that JQuery is creating are being positioned well beyond the window (randomized limits).

I pretty much have a blank HTML page, that pulls in JQuery and the script.js for the page.

My screen resolution is 1920x1080, so in my JQuery I used those limits to randomize the top and left values to position the blocks; I also use a rotation which I'm not haveing any issues with. But when it places all the blocks, the X-axis blocks are WAY off my screen (almost double my screen width) and the Y-axis blocks have a handful that exceed the bottom of the screen too (I expect to have those on the edge cut off, but not all the way off the view; in fact I have -20 at the end of the calculations to create cutt offs on the top and left sides)

Here's the HTML page (very empty (but I put some CSS in here):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script type="text/javascript" src="jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="script.js"></script>

<title>Tickets</title>
<style>

.ticket{
    position: relative !important;
     background: #F90;
     float: left;
     padding: 7px 3px;
     margin: 0 5px 5px 0;
 }

</style>
</head>

<body>
</body>
</html>

Then in JQuery I have this code that creates the blocks:

// JavaScript Document
$(function(){
    var ticket="<div class='ticket'><p>Random<br />Box</p></div>";
    var numTickets=100;
    for(var x=1;x<=numTickets;x++){
        $(ticket).appendTo("body");
    }
    $(".ticket").each(function(i){
        var posx = Math.round(Math.random() * 1920)-20;
        var posy = Math.round(Math.random() * 1080)-20;
        var rotationNum=Math.round((Math.random()*360)+1);
        var rotation="rotate("+rotationNum+"deg)";
        $(this).css("top", posy + "px").css("left", posx + "px").css("transform",rotation).css("-ms-transform",rotation).css("-webkit-transform",rotation);
    });
});

Upvotes: 2

Views: 4614

Answers (2)

kraysak
kraysak

Reputation: 1756

I use this css style for the same problem:

$(this).css({
  "position":"absolute",
  "left":"'+posx +'px",
  "top":"'+posy +'px",
  "padding":"5px",
  "transform":"'+ rotation +'",
  "-ms-transform":"'+ rotation +'",
  "-webkit-transform":"'+ rotation +'"
});

Also, you coul use something like this:

$(function(){

var numTickets=100;
    for(var x=1;x<=numTickets;x++){
    var posx = Math.round(Math.random() * 1920)-20;
    var posy = Math.round(Math.random() * 1080)-20;
    var ticket="<div class='ticket' style='position:absolute;left:'+posy+';top:'+posx+';'><p>Random<br />Box</p></div>";
    $(ticket).appendTo("body");
    }

});

Upvotes: 0

2pha
2pha

Reputation: 10165

Why are you setting position to relative?

Here is one I did.

http://jsfiddle.net/29M54/

.ticket{
    position: absolute;
     background: #F90;
     padding: 7px 3px;
 }

$(document).ready(function(){
    var ticket="<div class='ticket'><p>Random<br />Box</p></div>";
    var numTickets=100;
    for(var x=1;x<=numTickets;x++){
        $(ticket).appendTo("body");
    }
    // get window dimentions
    var ww = $(window).width();
    var wh = $(window).height();
    $(".ticket").each(function(i){
        var rotationNum=Math.round((Math.random()*360)+1);
        var rotation="rotate("+rotationNum+"deg)";
        var posx = Math.round(Math.random() * ww)-20;
        var posy = Math.round(Math.random() * wh)-20;
        $(this).css("top", posy + "px").css("left", posx + "px").css("transform",rotation).css("-ms-transform",rotation).css("-webkit-transform",rotation);
    });
});

Upvotes: 1

Related Questions