added two more cases for max change

toorshia · Sep 3, 2013 · a6999b5 · a6999b5
1 parent 1a9f6da
commit a6999b5
Show file tree

Hide file tree

Showing 4 changed files with 116 additions and 3 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/R&D/.DS_Store b/R&D/.DS_Store
diff --git a/R&D/refreshmax/index.html b/R&D/refreshmax/index.html
@@ -42,7 +42,10 @@
   <div class="container">
     <div id="g1" class="gauge"></div>
     <a href="#" id="g1_refresh" class="button grey">Random Refresh</a>
-    <a href="#" id="g1_refreshmax" class="button grey">Refresh Maximum</a>
+    <br />
+    <a href="#" id="g1_setmax100" class="button grey">Set Max 100</a>
+    <a href="#" id="g1_setmax200" class="button grey">Set Max 200</a>
+    <a href="#" id="g1_setmax400" class="button grey">Set Max 400</a>
   </div>
 
   <script>
@@ -60,10 +63,21 @@
       return false;
     });
 
-    $('#g1_refreshmax').bind('click', function() {
-      g1.refresh(50, 200);
+    $('#g1_setmax100').bind('click', function() {
+      g1.refresh(g1.originalValue, 100);
       return false;
     });
+
+    $('#g1_setmax200').bind('click', function() {
+      g1.refresh(g1.originalValue, 200);
+      return false;
+    });
+
+    $('#g1_setmax400').bind('click', function() {
+      g1.refresh(g1.originalValue, 400);
+      return false;
+    });
+
   });
   </script>
 </body>

diff --git a/R&D/responsive-gauges/index.html b/R&D/responsive-gauges/index.html
@@ -0,0 +1,99 @@
+<!doctype html>
+<html>
+
+<head>
+  <meta charset="utf-8"/>
+  <title>Responsive Gauges</title>
+  <meta name="viewport" content="width=device-width">
+
+  <script src="../lib/jquery-1.7.2.min.js"></script>
+  <script type="text/javascript" src="../lib/raphael.2.1.0.min.js"></script>
+  <script type="text/javascript" src="../../justgage.js"></script>
+
+  <style>
+    body {
+      text-align: center;
+      padding: 0px;
+      margin: 0px;
+    }
+
+    /* clearfix */
+    .clear:before, 
+    .clear:after {content:""; display:table;} 
+    .clear:after {clear:both;} 
+    .clear { *zoom:1;}
+
+    .wrapper {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      margin: 30px;
+      border: 1px solid #cccccc;
+    }
+
+    .gauge {
+      display: block;
+      float: left;
+    }
+
+    #g1 {      
+      width: 20%;
+    }
+
+    #g2 {      
+      width: 60%;
+    }
+
+    #g3 {      
+      width: 20%;
+    }
+  </style>
+
+  <script>
+    var g1, g2, g3;
+
+    window.onload = function(){
+      var g1 = new JustGage({
+        id: "g1", 
+        value: getRandomInt(0, 1000), 
+        min: 0,
+        max: 1000,
+        relativeGaugeSize: true,
+        donut: true
+      });
+
+      var g2 = new JustGage({
+        id: "g2", 
+        value: getRandomInt(0, 100), 
+        min: 0,
+        max: 100,
+        title: "Very long title",
+        relativeGaugeSize: true,
+        donut: true
+      });
+
+      var g3 = new JustGage({
+        id: "g3", 
+        value: getRandomInt(0, 100), 
+        min: 0,
+        max: 100,
+        title: "Very long title",
+        label: "label",
+        relativeGaugeSize: true,
+        donut: true
+      });
+    };
+  </script>
+
+</head>
+
+<body>
+  <div class="wrapper clear">   
+    <div id="g1" class="gauge"></div>
+    <div id="g2" class="gauge"></div>
+    <div id="g3" class="gauge"></div>
+  </div> 
+</body>
+</html>