Friday, 26 June 2015

Dynamically PHP Maps with Rectangle, Parallelogram, and Rhomb Shapes 

<?php
// http://coursesweb.net/php-mysql

$nr = 20;                   // HERE add the number of cells (php will auto complete the last row wih the remaining cells)
$cols = array(4, 5);        // HERE add the number of alternate cols to each row
$css_class = 'map_cell';        // css class added in each cell
$addtxt = 1;                // when is 1 add text in cell (cell number)
$map_html = '';             // stores the returned html code

// variables used to alternate the number of cells to each row
$x = 1;
$b = $cols[$x];

// creates the html code
for($i=1; $i<=$nr; $i++) {
  if($b == $cols[$x % 2]) {
    $blk1 = '<blockquote class="rw'. ($x % 2) .'">';
    $blk2 = '</blockquote>';
    $use = $x % 2;
    $b = 1;
    $x++;
  }
  else {
    $b++;
    $blk1 = '';  $blk2 = '';
  }
  $map_html .= $blk1 .'<div class="'. $css_class .'">'. ($addtxt == 1 ? $i : '') .'</div>'. $blk2;

  // adds the remaining cells to complete the row
  if($addtxt == 1 && $i == $nr) {
    $addtxt = 0;
    $nr += $cols[($use + 1) % 2] - $b;
  }
}
?>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>PHP Map - Rectangles</title>
<style type="text/css">
div.map_cell{
 float: left;
 margin:1px 1px 0 0;
 width: 100px;
 height: 75px;
 background: #abcdef;
 border: 1px solid #000;
 font-weight: bold;
 text-align: center;
 line-height:400%;
 font-size: 20px;
}
blockquote.rw1 {
 margin: 0 0 0 99px;
}
blockquote {
 clear: both;
}
</style>
</head>
<body>
<?php echo $map_html; ?>
</body>
</html>
- Result a map like in this image:
            PHP Map - Rectangles

PHP Map with Parallelogram shapes

<?php
// http://coursesweb.net/

$nr = 20;                   // HERE add the number of cells (php will auto complete the last row wih the remaining cells)
$cols = array(4, 5);        // HERE add the number of alternate cols to each row
$css_class = 'map_cell';        // css class added in each cell
$addtxt = 1;                // when is 1 add text in cell (cell number)
$map_html = '';             // stores the returned html code

// variables used to alternate the number of cells to each row
$x = 1;
$b = $cols[$x];

// creates the html code
for($i=1; $i<=$nr; $i++) {
  if($b == $cols[$x % 2]) {
    $blk1 = '<blockquote class="rw'. ($x % 2) .'">';
    $blk2 = '</blockquote>';
    $use = $x % 2;
    $b = 1;
    $x++;
  }
  else {
    $b++;
    $blk1 = '';  $blk2 = '';
  }
  $map_html .= $blk1 .'<div class="'. $css_class .'">'. ($addtxt == 1 ? $i : '') .'</div>'. $blk2;

  // adds the remaining cells to complete the row
  if($addtxt == 1 && $i == $nr) {
    $addtxt = 0;
    $nr += $cols[($use + 1) % 2] - $b;
  }
}
?>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>PHP Map - Parallelograms</title>
<style type="text/css">
div.map_cell{
 float: left;
 margin:1px 1px 0 0;
 width: 100px;
 height: 75px;
 background: #abefcd;
 -webkit-transform: skew(30deg);
 -moz-transform: skew(30deg);
 -o-transform: skew(30deg);
 font-weight: bold;
 font-size: 20px;
 text-align: center;
 line-height: 350%;
}
blockquote.rw1 {
 margin: 0 0 0 99px;
}
blockquote:first-child {
 margin: 0 0 0 45px;
}
blockquote {
 clear: both;
}
</style>
</head>
<body>
<?php echo $map_html; ?>
</body>
</html>
- Result a map like this:
            PHP Map - Parallelograms

Map with Rhomb cells

<?php
// http://coursesweb.net/php-mysql/

$nr = 20;                   // HERE add the number of cells (php will auto complete the last row wih the remaining cells)
$cols = array(4, 5);        // HERE add the number of alternate cols to each row
$css_class = 'map_cell';        // css class added in each cell
$addtxt = 1;                // when is 1 add text in cell (cell number)
$map_html = '';             // stores the returned html code

// variables used to alternate the number of cells to each row
$x = 1;
$b = $cols[$x];

// creates the html code
for($i=1; $i<=$nr; $i++) {
  if($b == $cols[$x % 2]) {
    $blk1 = '<blockquote class="rw'. ($x % 2) .'">';
    $blk2 = '</blockquote>';
    $use = $x % 2;
    $b = 1;
    $x++;
  }
  else {
    $b++;
    $blk1 = '';  $blk2 = '';
  }
  $map_html .= $blk1 .'<div class="'. $css_class .'"><div>'. ($addtxt == 1 ? $i : '') .'</div></div>'. $blk2;

  // adds the remaining cells to complete the row
  if($addtxt == 1 && $i == $nr) {
    $addtxt = 0;
    $nr += $cols[($use + 1) % 2] - $b;
  }
}
?>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>PHP Map - Rhombs</title>
<style type="text/css">
div.map_cell {
 position: relative;
 float: left;
 width: 0;
 height: 0;
 margin-top: -49px;
 border: 50px solid transparent;
 border-bottom: 55px solid #05ed08;
}

div.map_cell:after {
 position: absolute;
 left: -50px;
 top: 55px;
 width: 0;
 height: 0;
 border: 50px solid transparent;
 border-top: 55px solid #05ed08;
 content: '';
}

div.map_cell div {
 position: relative;
 margin: 45px auto 0 -10px;
 font-weight: bold;
 font-size: 20px;
 z-index: 888;
 text-align: center;
}
blockquote.rw1 {
 margin: 0 0 0 90px;
}
blockquote {
 clear: both;
}
</style>
</head>
<body>
<?php echo $map_html; ?>
</body>
</html>
- Result a map like this:
            PHP Map - Rhombs

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)