Styling Divs with Javascript Vars

Question

Hi, I'm doing a little experiment trying to randomly place images inside a div using a javascript loop. I've been having some trouble with it.

Here's what I have (simplified):

for(var i = 0; i < 10; i++)
{
var top = random(-20, 20);
var left = random(-20, 20);

document.write(
  <div class="one" style="\"left:" + left + ";\"">
    <img src="hein.png"/>
  </div>
);
}

The goal being to generate some top and left values, and every itteration display a new image with these generated values. I know it's a syntax error with the style="". But nothing I've tried has worked

How can I get this working.

Answer 1

You forgot the quotes in document.write and you are escaping wrong characters inside of it

document.write(
  "<div class=\"one\" style=\"left:" + left + ";\">
    <img src=\"hein.png\"/>
  </div>"
);

Answer 2

You meed to wrap the whole of the document.write output in quotes, like this:

document.write('<div class="one" style="left:"' + left + ';"><img src="hein.png"/></div>');

Answer 3

You should first consider using a JavaScript library like jQuery. This will simplify your work.

Let's say you have this markup

<div id="image-container">

</div>

Include jQuery in you markup

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"&gt;&lt;/script&gt;

From JavaScript you would do this, after you've included jQuery in your markup

for(var i = 0; i < 10; i++) {
    var top = random(-20, 20);
    var left = random(-20, 20);

    $('#image-container').append('<img src="hein.png" style="position: absolute; top: '+top+'; left : '+left +';" />');
}

Answer 4

You have forgotten to quote the string in the document.write call. Also you forgot the unit on the measurement.

for(var i = 0; i < 10; i++) {
   var top = random(-20, 20);
   var left = random(-20, 20);

   document.write(
      '<div class="one" style="left:' + left + 'px;top:' + top + 'px">' +
         '<img src="hein.png"/>' +
      '</div>'
   );
}

Answer 5

Using PHP Instead:

<?php
// Middle coords of my div
    $top = 200;
    $left = 350;

    for($i = 0; $i < 20; $i += 1)
    {
     $tran = rand(-130,170);
     $lran = rand(-300,270);
        // Fix line breaks 
     $top = $top - 49;
     echo '<div style="position:relative;
         display: block;
         height: 49px;
         width:49px;
         left:' . ($left + $lran) . 'px;
         top:' . ($top + $tran) . 'px;
            ">' . '<img src="img.png"/>' . '</div>';
    }

?>

Awesome! Thanks for the help with the string syntax!