Browse Source

block visibility using display, do not hide blocks when loading

Jean-Baptiste (Rorist) Aubort 5 years ago
parent
commit
1896d45a8b
3 changed files with 18 additions and 12 deletions
  1. 5 9
      main.js
  2. 5 0
      style.css
  3. 8 3
      trigger.html

+ 5 - 9
main.js

@@ -11,13 +11,9 @@ var slider       =  document.getElementById("breathSlider")
 function toggleDiv(div, show) {
     "use strict";
     if (show) {
-        div.style.visibility = "visible";
-        div.style.overflow = "none";
-        div.style.height = "auto";
+        div.style.display = "block";
     } else {
-        div.style.visibility = "hidden";
-        div.style.overflow = "hidden";
-        div.style.height = "0px";
+        div.style.display = "none";
     }
 }
 
@@ -60,9 +56,9 @@ var apiUrl = "https://fixme.ch/status.json";
 var closing_time;
 function updateSpaceInformation() {
     "use strict";
-    toggleDiv(openBlock, 0);
-    toggleDiv(closeBlock, 0);
-    toggleDiv(msgBlock, 0);
+    //toggleDiv(openBlock, 0);
+    //toggleDiv(closeBlock, 0);
+    //toggleDiv(msgBlock, 0);
     toggleDiv(loadBlock, 1);
 
     var xhr = new XMLHttpRequest();

+ 5 - 0
style.css

@@ -235,3 +235,8 @@ match all the button
     100% { text-indent: -100% }
 }
 
+#open-block,
+#close-block,
+#msg-block {
+    display: none;
+}

+ 8 - 3
trigger.html

@@ -16,10 +16,10 @@
       <h1>Trigger hackerspace status</h1>
 
       <div class='central-block'>
+
           <h2>Status</h2>
-          <div id="loading-block"><p>Loading ...</p></div>
 
-          <div id="open-block" style="visibility:hidden;">
+          <div id="open-block">
             <form name="hoursform" id="hoursform">
               <div class="plusminux minux" onclick="changeHour(0)">-</div>
               <input id="hours" name="hours" size="2" class="text-input" maxlength=
@@ -29,7 +29,8 @@
               class="button" id="openbutton" disabled>
             </form>
           </div>
-          <div id="close-block" style="visibility:hidden;">
+
+          <div id="close-block">
             <form>
               <input type="button" onclick="closeSpace()" value="Close"
               class="button">
@@ -46,7 +47,11 @@
             </div>
             </form>
           </div>
+
           <div id="msg-block"></div>
+
+          <div id="loading-block"><p>Loading ...</p></div>
+
           <br/>
             <h2>Lights</h2>
             <input type="button" onclick="switchTheLightColor('red')" value="ON" class="button btn_red">