Merge pull request #5 from NeoRaider/master

HTML validity fixes

html/force-big.css

@@ -49,6 +49,6 @@
   fill: #C83771;
 }
 
-sidebar {
+#sidebar {
   color: #ddd;
 }

html/force-light.css

@@ -55,6 +55,6 @@
   fill: #C83771;
 }
 
-sidebar {
+#sidebar {
   color: #777;
 }

html/force.css

@@ -131,7 +131,7 @@
     text-shadow: none;
 }
 
-sidebar {
+#sidebar {
   position: absolute;
   top: 1em;
   right: 1.5em;
@@ -153,7 +153,7 @@ sidebar {
   vertical-align: center;
 }
 
-sidebar h2 {
+#sidebar h2 {
   margin-top: 0;
   font-size: 9pt;
 }

html/force.js

@@ -5,13 +5,15 @@ function switch_style(s) {
   for (var i = 0; i < el.length; i++ ) {
     if (el[i].getAttribute("rel").indexOf("style") != -1
         && el[i].getAttribute("title")) {
-          if (el[i].getAttribute("title") == s) {
-            style_btn.text(s)
+          /* always set to true first to workaround Chrome bug */
+          el[i].disabled = true
+
+          if (el[i].getAttribute("title") == s)
             el[i].disabled = false
-          } else
-            el[i].disabled = true
         }
   }
+
+  style_btn.text(s)
 }
 
 function getOffset( el ) {
@@ -109,7 +111,7 @@ btns.append("button")
     .text("VPN")
     .on("click", update_graph)
 
-var meshinfo = d3.select("sidebar")
+var meshinfo = d3.select("#sidebar")
                  .insert("div", ":first-child")
 
 meshinfo.append("h2").text("Mesh")

html/nodes.html

@@ -5,7 +5,7 @@
     <title>Freifunk Lübeck - Knotengraph</title>
     <link href='style.css' rel='stylesheet' type='text/css' />
     <link href='force.css' rel='stylesheet' type='text/css' />
-    <link href='force-big.css' rel='alternate stylesheet' type='text/css' title='big' disabled/>
+    <link href='force-big.css' rel='alternate stylesheet' type='text/css' title='big'/>
     <link href='force-light.css' rel='stylesheet' type='text/css' title='light'/>
     <script type="text/javascript" src="jquery.min.js"></script>
     <script type="text/javascript" src="d3.v2.js"></script>
@@ -22,7 +22,7 @@
       </ul>
     </header>
     <div id="chart">
-      <sidebar>
+      <div id="sidebar">
         <div id="legend">
           <h2>Legende</h2>
           <ul>
@@ -66,7 +66,7 @@
             </li>
           </ul>
         </div>
-      </sidebar>
+      </div>
     </div>
     <script src='force.js' type='text/javascript'></script>
   </body>