CODEWITHSUNDEEP
phphtml
rory-h
rory-h

Reputation: 680

php - to draw multiple divs in HTML

Below is my html code. It's basically a grid of squares - here:

<div class='square-container'>
  <div class='trigger'>
            <div class="hover panel">
          <div class="front">
            <div class="box1">
              <p>Front</p>
            </div>
          </div>
          <div class="back">
            <div class="box2">
              <p>Back</p>
            </div>
          </div>
        </div>

  </div>
  <div class='trigger'>
            <div class="hover panel">
          <div class="front">
            <div class="box1">
              <p>Front</p>
            </div>
          </div>
          <div class="back">
            <div class="box2">
              <p>Back</p>
            </div>
          </div>
        </div>

  </div>    
  <div class='trigger'>
            <div class="hover panel">
          <div class="front">
            <div class="box1">
              <p>Front</p>
            </div>
          </div>
          <div class="back">
            <div class="box2">
              <p>Back</p>
            </div>
          </div>
        </div>

  </div>

</div>

As you can see in the above code, I have multiple divs (class trigger) Ideally I'd like to draw a set of squares of 30x10 - 300 squares. It would be tedious to manually put the class trigger one by one. Is there a way I can draw this div square dynamically?

Upvotes: 1

Views: 376

Answers (2)

rescobar
rescobar

Reputation: 1305

Try this:

<div class='square-container'></div>

Using Jquery, change the value of the variable: 'number_square' according to squares that you need draw.

<script>
$(document).ready(function () {
    var number_square = 3;
    var drawdiv = "<div class='trigger'><div class='hover panel'><div class='front'><div class='box1'><p>Front</p></div></div><div class='back'><div class='box2'><p>Back</p></div></div></div></div>";
    for (i = 0; i < number_square; i++) {
        $('.square-container').append(drawdiv);
    }
    $('.trigger').click(function () {
        $('.modal-wrapper').toggleClass('open');
        $('.square-container').toggleClass('blur');
        return false;
    });
    $('.hover').hover(function () {
        $(this).addClass('flip');
    }, function () {
        $(this).removeClass('flip');
    });
  });
</script>

Upvotes: 1

Louis Loudog Trottier
Louis Loudog Trottier

Reputation: 1377

IF you take the forst example on php.net and make it run 30 times for row,

for ($row = 1; $row <= 30; $row++) {

}

and take another one to make 10 columns : 

for ($col = 1; $col <= 10; $col++) {

}

and put them one inside the other:

 for ($row = 1; $row <= 30; $row++) {
   //echo new row (ei: <div>)
   for ($col = 1; $col <= 10; $col++) {
     //echo cell <div>...</div>
   }
   //echo end row (ei: </div>)
 }

Upvotes: 0

Related Questions