ByRei - dynDiv

Simple dynamic Divs by Markus Bordihn

• Home
• Documentation
• Examples
• Download
• Issues
• More Scripts
• Impressum
• Disclaimer

This is a simple Puzzle Example

Over the new API it is very easy to check if all Parts of the Puzzle are on the right place.
This Example is a simple Puzzle, which will display a alert box when 16 piece are on the right place.
The pieces are generate from one Image over CSS so you don't need to cut the image in additional pieces manual.

When you take a look at the additional JavaScript you see, you don't need a lot of additional code to realize such easy thing.

-

HTML Code

<script type="text/javascript" src="byrei-dyndiv_1.0rc1.js"></script>
[Custom CSS Code]

<p id="score"> - </p>
<div style="width: 400px; height: 400px; border: 1px solid #000; margin: 150px;">
 <div class="block1 dynDiv_dropArea-1"></div>
 <div class="block2 dynDiv_dropArea-2"></div>
 <div class="block1 dynDiv_dropArea-3"></div>
 <div class="block2 dynDiv_dropArea-4"></div>

 <div class="block2 dynDiv_dropArea-5"></div>
 <div class="block1 dynDiv_dropArea-6"></div>
 <div class="block2 dynDiv_dropArea-7"></div>
 <div class="block1 dynDiv_dropArea-8"></div>

 <div class="block1 dynDiv_dropArea-9"></div>
 <div class="block2 dynDiv_dropArea-10"></div>
 <div class="block1 dynDiv_dropArea-11"></div>
 <div class="block2 dynDiv_dropArea-12"></div>

 <div class="block2 dynDiv_dropArea-13"></div>
 <div class="block1 dynDiv_dropArea-14"></div>
 <div class="block2 dynDiv_dropArea-15"></div>
 <div class="block1 dynDiv_dropArea-16"></div>
</div>

<div class="puzzle p1 dynDiv_moveDiv dynDiv_dropLimit-1 dynDiv_dropMode-fit"></div>
<div class="puzzle p2 dynDiv_moveDiv dynDiv_dropLimit-2 dynDiv_dropMode-fit"></div>
<div class="puzzle p3 dynDiv_moveDiv dynDiv_dropLimit-3 dynDiv_dropMode-fit"></div>
<div class="puzzle p4 dynDiv_moveDiv dynDiv_dropLimit-4 dynDiv_dropMode-fit"></div>
<div class="puzzle p5 dynDiv_moveDiv dynDiv_dropLimit-5 dynDiv_dropMode-fit"></div>
<div class="puzzle p6 dynDiv_moveDiv dynDiv_dropLimit-6 dynDiv_dropMode-fit"></div>
<div class="puzzle p7 dynDiv_moveDiv dynDiv_dropLimit-7 dynDiv_dropMode-fit"></div>
<div class="puzzle p8 dynDiv_moveDiv dynDiv_dropLimit-8 dynDiv_dropMode-fit"></div>
<div class="puzzle p9 dynDiv_moveDiv dynDiv_dropLimit-9 dynDiv_dropMode-fit"></div>
<div class="puzzle p10 dynDiv_moveDiv dynDiv_dropLimit-10 dynDiv_dropMode-fit"></div>
<div class="puzzle p11 dynDiv_moveDiv dynDiv_dropLimit-11 dynDiv_dropMode-fit"></div>
<div class="puzzle p12 dynDiv_moveDiv dynDiv_dropLimit-12 dynDiv_dropMode-fit"></div>
<div class="puzzle p13 dynDiv_moveDiv dynDiv_dropLimit-13 dynDiv_dropMode-fit"></div>
<div class="puzzle p14 dynDiv_moveDiv dynDiv_dropLimit-14 dynDiv_dropMode-fit"></div>
<div class="puzzle p15 dynDiv_moveDiv dynDiv_dropLimit-15 dynDiv_dropMode-fit"></div>
<div class="puzzle p16 dynDiv_moveDiv dynDiv_dropLimit-16 dynDiv_dropMode-fit"></div>

     

JavaScript Code

<script type="text/javascript">
if (typeof ByRei_dynDiv !== 'undefined') {
 ByRei_dynDiv.api.drop = function () {
  if (ByRei_dynDiv.api.obj) {
   var check=0;
   for (var i=0;i<ByRei_dynDiv.divList.length;i++) {
        if (ByRei_dynDiv.divList[i][8]) {
            check++;
        }
   }
   document.getElementById('score').innerHTML = 'Score: ' + check ;
   if (check == 16) {
    alert('Gratulation: You solve the Puzzle ;)');
    ByRei_dynDiv.api.obj = null;
   }
  }
 };
}
</script>
     

Custom CSS Code

.block1, .block2 {
 width: 100px;
 height: 100px;
 float: left;
}

.block1 {
 background: #ccc;
}

.block2 {
 background: #aaa;
}

.puzzle {
 width: 100px;
 height: 100px;
 position: absolute;
}

.p1, .p2, .p3, .p4, .p5, .p6, .p7, .p8, .p9, .p10, .p11, .p12, .p13, .p14, .p15, .p16 {
 background-image: url(puzzle.jpg);
 background-repeat: repeat;
}

.p1 {
 background-position: 400px 400px;
 top: 0;
 left: 10px;
}

.p2 {
 background-position: 300px 400px;
 top: 0;
 left: 150px;
}

.p3 {
 background-position: 200px 400px;
 top: 200px;
 left: 10px;
}

.p4 {
 background-position: 100px 400px;
 top: 50px;
 left: 750px;
}

.p5 {
 background-position: 400px 300px;
 top: 0;
 left: 300px;
}

.p6 {
 background-position: 300px 300px;
 top: 200px;
 left: 600px;
}

.p7 {
 background-position: 200px 300px;
 top: 350px;
 left: 10px;
}

.p8 {
 background-position: 100px 300px;
 top: 600px;
 left: 150px;
}

.p9 {
 background-position: 400px 200px;
 top: 50px;
 left: 600px;
}

.p10 {
 background-position: 300px 200px;
 top: 200px;
 left: 750px;
}

.p11 {
 background-position: 200px 200px;
 top: 500px;
 left: 10px;
}

.p12 {
 background-position: 100px 200px;
 top: 600px;
 left: 450px;
}

.p13 {
 background-position: 400px 100px;
 top: 0;
 left: 450px;
}

.p14 {
 background-position: 300px 100px;
 top: 350px;
 left: 600px;
}

.p15 {
 background-position: 200px 100px;
 top: 600px;
 left: 300px;
}

.p16 {
 background-position: 100px 100px;
 top: 500px;
 left: 600px;
}