Superposer l'image et les infos. Avec une checkbox

index.php

@@ -22,6 +22,7 @@
 
   <script>
     $(document).ready(function(){
+
       $('#myNavbar').on('show.bs.collapse', function () {
         $('#logo_topisto').css({'height' : '30px','width' : '30px'});
         $('#titre_topisto').css({'font-size' : '30px'});
@@ -41,7 +42,18 @@
           }
         });
       });
+
+      blockchainExplorer.init(1);
+
     });
+
+    function showInfos(element)
+    {
+      $('#blockchain').html('');
+      flag = 1;
+      if (!element.checked) flag = 0;
+      blockchainExplorer.init(flag);
+    }
   </script>
 
 </head>
@@ -74,6 +86,7 @@
   <div class="row">
     <div class="col-sm-12 text-right">
       <br>A BTC blockchain explorer<br>Scroll down to see the previous blocks<br>
+      <label>show infos&nbsp;</label><input type="checkbox" onchange="showInfos(this)" checked>
     </div>
   </div>
 </div>

js/blockexplorer.js

@@ -8,6 +8,7 @@ blockchainExplorer = function(){
   var cur_height     = [];
   var cur_methode    = 'hasard';
   var isInitSelector = false;
+  var _mode          = 1;
 
   function _precisionRound(number) {
       var precision = 4;
@@ -35,7 +36,6 @@ blockchainExplorer = function(){
 
   function _addInfoForBlock(block)
   {
-    var height = '300px';
     var contenu = '';
     var downloadingImage = new Image();
 
@@ -46,25 +46,59 @@ blockchainExplorer = function(){
     blockName = _getblockNameFromHash(block.hash);
     if (blockName != '') blockName = ' ( '+blockName+' )';
       
-    contenu += '      <h2> <span style="font-size:12px">block</span> '+block.height+blockName+'</h2>';
-    contenu += '      <table width="100%">';
-    //contenu += '       <tr><td>hash</td><td align="right"><b>'+block.hash+'</b></td></tr>';
-    //contenu += '       <tr><td>index</td><td align="right"><b>'+block.block_index+'</b></td></tr>';
-    contenu += '        <tr><td>timestamp</td><td align="right"><b>'+block.time+'</b></td></tr>';
-    contenu += '        <tr><td>nonce</td><td align="right"><b>'+block.nonce+'</b></td></tr>';
-    contenu += '        <tr><td>nb tx</td><td align="right"><b>'+block.n_tx+'</b></td></tr>';
-    contenu += '        <tr><td>outputs</td><td align="right"><b>'+_precisionRound(block.topisto_outputs).toFixed(4)+'</b></td></tr>';
-    contenu += '        <tr><td>inputs</td><td align="right"><b>'+_precisionRound(block.topisto_inputs).toFixed(4)+'</b></td></tr>';
-    contenu += '        <tr><td>fees</td><td align="right"><b>'+_precisionRound(block.topisto_fees).toFixed(4)+'</b></td></tr>';
-    contenu += '        <tr><td>reward</td><td align="right"><b>'+_precisionRound(block.topisto_reward).toFixed(4)+'</b></td></tr>';
-    contenu += '      </table>';
+    contenu += '      <div style="height:220px;width:100%;display:block;position:absolute">';
+    if (_mode != 0)
+    {
+      contenu += '<div style="color:black;opacity:1.0;margin-right:30px">';
+      // contenu += '      <h2> <span style="font-size:12px">block</span> '+block.height+blockName+'</h2>';
+      //contenu += '<span style="font-size:4px">&nbsp;</span>';
+      contenu += '      <table width="100%" style="margin-top:12px">';
+      //contenu += '       <tr><td>hash</td><td align="right"><b>'+block.hash+'</b></td></tr>';
+      //contenu += '       <tr><td>index</td><td align="right"><b>'+block.block_index+'</b></td></tr>';
+      contenu += '        <tr><td>timestamp</td><td align="right"><b>'+block.time+'</b></td></tr>';
+      contenu += '        <tr><td>nonce</td><td align="right"><b>'+block.nonce+'</b></td></tr>';
+      contenu += '        <tr><td>nb tx</td><td align="right"><b>'+block.n_tx+'</b></td></tr>';
+      contenu += '        <tr><td>outputs</td><td align="right"><b>'+_precisionRound(block.topisto_outputs).toFixed(4)+'</b></td></tr>';
+      contenu += '        <tr><td>inputs</td><td align="right"><b>'+_precisionRound(block.topisto_inputs).toFixed(4)+'</b></td></tr>';
+      contenu += '        <tr><td>fees</td><td align="right"><b>'+_precisionRound(block.topisto_fees).toFixed(4)+'</b></td></tr>';
+      contenu += '        <tr><td>reward</td><td align="right"><b>'+_precisionRound(block.topisto_reward).toFixed(4)+'</b></td></tr>';
+      contenu += '      </table>';
+      contenu += '</div>';
+    }
+    contenu += '      </div>';
 
     $('#info_'+block.height).html(contenu);
 
+    contenu = '';
+    contenu += '<div id="img_'+block.height+'" style="';
+    contenu += 'height:220px;';
+    contenu += 'content: "";';
+    contenu += 'top: 0;';
+    contenu += 'left: 0;';
+    contenu += 'bottom: 0;';
+    contenu += 'right: 0;';
+    contenu += 'position: relative;';
+    contenu += 'z-index: -1;   ';
+    contenu += '"></div>'
+
+    $('#info_'+block.height).append(contenu);
+
     downloadingImage.onload = function(){
-      $('#img_'+block.height).attr('src', this.src);   
-      //$('#img_'+block.height).attr('height', height);
-      //$('#img_'+block.height).attr('width','auto');
+
+      // $('#img_'+block.height).attr('src', this.src);   
+/*
+      $('#img_'+block.height).attr('height', _height);
+      $('#img_'+block.height).attr('width','auto');
+*/
+
+      var div0 = document.getElementById('img_'+block.height);
+
+      div0.style.backgroundImage = "url(" + this.src + ")";
+      div0.style.backgroundRepeat = "no-repeat";
+      div0.style.backgroundPosition = "center";
+      div0.style.backgroundSize = "auto 100%";
+      if (_mode==1) div0.style.opacity=0.3;
+
       flag_nav = true;
     };
     downloadingImage.src = 'images/block_image.php?methode='+cur_methode+'&hash='+block.hash;
@@ -72,50 +106,38 @@ blockchainExplorer = function(){
     return true;
   }
 
-  function _addDiv
ForBlock
(block_height)
+  function _addDiv
(block_height)
   {
     var contenu = '';
 
     contenu += '<div id="block_'+block_height+'" class="container-fluid '+classes[cur_class]+'">';
     contenu += '  <div class="row">';
-    contenu += '    <div class="col-sm-8" id="info_'+block_height+'">';
-    contenu += '      <h2>COMPUTING ...</h2>';
-    contenu += '    </div>';
-    contenu += '    <div class="col-sm-4 text-right">';
-    contenu += '      <div width="100%" class="text-center">';
-    contenu += '        <img id="img_'+block_height+'" src="images/loading.gif" class="img-responsive"></img>';
-    contenu += '      </div>';
-    contenu += '    </div>';
+    contenu += '###BLOCK_DESC###';
     contenu += '  </div>';
     contenu += '</div>';
 
-    $('#blockchain').append(contenu);
-
-    return true;
+    return contenu;
   }
 
-  function _addDivFor
Void(
)
+  function _addDivForBlock(block_height)
   {
-    var contenu = '';
+    var contenu = _addDiv(block_height);
+    var block_desc = '';
 
-    contenu += '<div id="the_void" class="container-fluid '+classes[cur_class]+'">';
-    contenu += '  <div class="row">';
-    contenu += '    <div class="col-sm-8">';
-    contenu += '      <h2>the VOID ... </h2>';
-    contenu += '    </div>';
-    contenu += '    <div class="col-sm-4 text-right">';
-    contenu += '      <div width="100%" class="text-center">';
-    contenu += '        <img src="images/loading.gif" class="img-responsive"></img>';
-    contenu += '      </div>';
-    contenu += '    </div>';
-    contenu += '  </div>';
-    contenu += '</div>';
+    block_desc += '    <div class="col-sm-12" id="info_'+block_height+'">';
+    block_desc += '      <h2>BLOCK '+block_height+' ...</h2>';
+    block_desc += '    </div>';
 
-    $('#blockchain').append(contenu
);
+    $('#blockchain').append(contenu.replace('###BLOCK_DESC###',block_desc));
 
     return true;
   }
 
+  function _addDivForVoid()
+  {
+    return _addDivForBlock('void');
+  }
+
   function _toggleForwardBtn()
   {
     if (cur_height.length < 3)
@@ -250,8 +272,11 @@ blockchainExplorer = function(){
     }
   }
 
-  function _init(
)
+  function _init(
mode = 1
)
   {
+    _mode = mode;
+    cur_height     = [];
+
     $.getJSON('data/getKnownBlocksList.php', function( data ) {
       liste_blocks =  data;
       _initBlockSelector();
@@ -267,8 +292,4 @@ blockchainExplorer = function(){
 
     init: _init
   };
-}();
-
-$(document).ready(function(){
-  blockchainExplorer.init();
-});
+}();