Fixes scroll jump when clicking buttons in demo site. Clicking demo b…

…uttons toggles icon version.
spacecraftinc · Apr 28, 2019 · ec2df0c · ec2df0c
1 parent 6e468e0
commit ec2df0c
Show file tree

Hide file tree

Showing 9 changed files with 20 additions and 5 deletions.
diff --git a/.fontcustom-manifest.json b/.fontcustom-manifest.json
@@ -1,7 +1,7 @@
 {
   "checksum": {
-    "previous": "e917b0d2afe7f0e6263faf9c8a168855584a121161c902c816fb7b4701405b14",
-    "current": "e917b0d2afe7f0e6263faf9c8a168855584a121161c902c816fb7b4701405b14"
+    "previous": "e29477d791915347e3972b017c4157b6cb80af31d0f648e5cc2b1089d92e8dfc",
+    "current": "e29477d791915347e3972b017c4157b6cb80af31d0f648e5cc2b1089d92e8dfc"
   },
   "fonts": [
     "./css/zocial.ttf",

diff --git a/css/zocial.css b/css/zocial.css
diff --git a/css/zocial.eot b/css/zocial.eot
diff --git a/css/zocial.svg b/css/zocial.svg
diff --git a/css/zocial.ttf b/css/zocial.ttf
diff --git a/css/zocial.woff b/css/zocial.woff
diff --git a/css/zocial.woff2 b/css/zocial.woff2
diff --git a/index.html b/index.html
@@ -335,6 +335,7 @@ <h2 id="icons">Icon versions</h2>
 <p>Under MIT License. <a href="https://github.com/smcllns/css-social-buttons">Zocial on Github.</a></p>
 
 <script type="text/javascript">
+  // interactive demo button
   var sizeInput = document.getElementById('font-size-range');
   var sizeDisplay = document.getElementById('font-size-display');
   var labelInput = document.getElementById('label-input');
@@ -360,6 +361,18 @@ <h2 id="icons">Icon versions</h2>
       showcaseButton.classList.toggle('icon');
     })
   }
+
+  // interactive button list
+  var buttons = document.getElementById('samples').querySelectorAll('.zocial');
+  for (var i = 0; i < buttons.length; i++) {
+    buttons[i].addEventListener('click', function(e) {
+      e.preventDefault();
+      this.classList.toggle('icon');
+    })
+  }
+
+
+
 </script>
 
 </body>

diff --git a/templates/zocial.css b/templates/zocial.css
@@ -32,6 +32,7 @@ a.zocial {
 	text-decoration: none;
 	text-shadow: 0 1px 0 rgba(0,0,0,0.5);
 	white-space: nowrap;
+	vertical-align: middle;
 
 	-moz-user-select: none;
 	-webkit-user-select: none;