Fix sort for numbers and rework options

css/dropdown.css

@@ -1,56 +0,0 @@
-/* 
-Source: https://stackoverflow.com/questions/19206919/how-to-create-checkbox-inside-dropdown 
-*/
-
-.dropdown-check-list {
-    display: inline-block;
-    padding: 5px;
-}
-
-.dropdown-check-list .anchor {
-    position: relative;
-    cursor: pointer;
-    display: inline-block;
-    padding: 5px 50px 5px 10px;
-    border: 1px solid #ccc;
-}
-
-.dropdown-check-list .anchor:after {
-    position: absolute;
-    content: "";
-    border-left: 2px solid black;
-    border-top: 2px solid black;
-    padding: 5px;
-    right: 10px;
-    top: 20%;
-    -moz-transform: rotate(-135deg);
-    -ms-transform: rotate(-135deg);
-    -o-transform: rotate(-135deg);
-    -webkit-transform: rotate(-135deg);
-    transform: rotate(-135deg);
-}
-
-.dropdown-check-list .anchor:active:after {
-    right: 8px;
-    top: 21%;
-}
-
-.dropdown-check-list ul.items {
-    padding: 2px;
-    display: none;
-    margin: 0;
-    border: 1px solid #ccc;
-    border-top: none;
-}
-
-.dropdown-check-list ul.items li {
-    list-style: none;
-}
-
-.dropdown-check-list.visible .anchor {
-    color: #0094ff;
-}
-
-.dropdown-check-list.visible .items {
-    display: block;
-}

css/main.css

@@ -144,6 +144,8 @@ th {
 
 .Div {
     display: none;
+    border: 2px solid lightgreen;
+    min-width: 50px;
 }
 
 .footer{

index.html

@@ -10,7 +10,6 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" type="text/css" media="screen" href="css/reset.css" />
     <link rel="stylesheet" type="text/css" media="screen" href="css/main.css" />
-    <link rel="stylesheet" type="text/css" media="screen" href="css/dropdown.css" />
     <script src="js/table.js"></script>
     <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.2/css/all.css" integrity="sha384-/rXc/GQVaYpyDdyxK+ecHPVYJSN9bmVFBvjA/9eOB+pb3F2w2N6fc5qB9Ew5yIns"
@@ -65,11 +64,6 @@
             At solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles. <a href="index.html">jony_ipsum</a>
         </p>
         <p class="hideOptions">Show/Hide: </p>
-        <a> birth rate</a>
-        <a> cellphones</a>
-        <a> children / woman</a>
-        <a> electrical usage</a>
-        <a> internet usage</a>
         <button href="javascript:/" onClick="div_change('options')">Show Options</button>
         <div id="options" class=Div></div>
 
@@ -85,11 +79,11 @@
     </div>
     <footer class="footer">
         <div class="foo-left">
-        <p>Copyright © 2018 world_data</p>
+            <p>Copyright © 2018 world_data</p>
-        <p>First course exercise HTML, CSS and JS of the lecture Web and Multimedia Engineering</p>
+            <p>First course exercise HTML, CSS and JS of the lecture Web and Multimedia Engineering</p>
         </div>
         <div class="foo-right">
-        <p>This solution has been created by: <br> Team 26</p>
+            <p>This solution has been created by: <br> Team 26</p>
         </div>
     </footer>
 </body>

js/table.js

@@ -39,12 +39,14 @@ function rerequestFile(path, columns) {
 
 function processData(csv, path) {
     var table = "";
+    var checkbox = "";
 
     // split rows
     var allTextLines = csv.split(/\r\n|\n/);
 
     // create table header
     table += "<tr>";
+    checkbox += "<ul>";
 
     var data = allTextLines[0].split(",");
 
@@ -54,19 +56,17 @@ function processData(csv, path) {
         table += data[j];
         table += "</th>";
 
-        /*
         // create dropdown elements
         checkbox += "<li>";
         checkbox += "<input id='" + data[j] + "' type='checkbox' checked='checked' onclick=\"toggleColumn('" + path + "')\"/>";
         checkbox += data[j];
         checkbox += "</li>";
-        */
     }
 
+    checkbox += "</ul>";
     table += "</tr>";
 
-    var checkbox = "";
+    /*
-
     for (var j = 0; j < data.length; j++) {
         var test = j % 3;
 
@@ -83,6 +83,7 @@ function processData(csv, path) {
             checkbox += "</ul></div>";
         }
     }
+    */
 
     // create table content
     for (var i = 1; i < allTextLines.length; i++) {
@@ -104,9 +105,11 @@ function processData(csv, path) {
 }
 
 function toggleColumn(file) {
-    var inner_div = document.getElementById('options').childNodes;
     var activated_columns = [];
 
+    /*
+    var inner_div = document.getElementById('options').childNodes;
+
     for (i = 0; i < inner_div.length; i++) {
         var list = inner_div[i].children[0].childNodes;
 
@@ -118,6 +121,18 @@ function toggleColumn(file) {
             }
         }
     }
+    */
+
+    var list_elements = document.getElementById('options').children[0].childNodes;
+
+    for (i = 0; i < list_elements.length; i++) {
+        var element = list_elements[i];
+        var checkbox = element.children[0];
+
+        if (checkbox.checked) {
+            activated_columns.push(checkbox.id);
+        }
+    }
 
     rerequestFile(file, activated_columns);
 }
@@ -195,19 +210,42 @@ function sortTable(n) {
             x = rows[i].getElementsByTagName("td")[n];
             y = rows[i + 1].getElementsByTagName("td")[n];
 
+            var first_element = x.innerHTML.toLowerCase();
+            var second_element = y.innerHTML.toLowerCase();
+
             /* Check if the two rows should switch place,
             based on the direction, asc or desc: */
             if (dir == "asc") {
-                if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
+                // check if the first element is a number, then assume the 
-                    // If so, mark as a switch and break the loop:
+                // second element is also a number
-                    shouldSwitch = true;
+                if (isNaN(first_element)) {
-                    break;
+                    if (first_element > second_element) {
+                        // If so, mark as a switch and break the loop:
+                        shouldSwitch = true;
+                        break;
+                    }
+                } else {
+                    if (parseFloat(first_element) > parseFloat(second_element)) {
+                        // If so, mark as a switch and break the loop:
+                        shouldSwitch = true;
+                        break;
+                    }
                 }
             } else if (dir == "desc") {
-                if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
+                // check if the first element is a number, then assume the 
-                    // If so, mark as a switch and break the loop:
+                // second element is also a number
-                    shouldSwitch = true;
+                if (isNaN(first_element)) {
-                    break;
+                    if (first_element < second_element) {
+                        // If so, mark as a switch and break the loop:
+                        shouldSwitch = true;
+                        break;
+                    }
+                } else {
+                    if (parseFloat(first_element) < parseFloat(second_element)) {
+                        // If so, mark as a switch and break the loop:
+                        shouldSwitch = true;
+                        break;
+                    }
                 }
             }
         }
@@ -232,7 +270,7 @@ function sortTable(n) {
 }
 
 function div_change(strID) {
-    document.getElementById(strID).style.display = (document.getElementById(strID).style.display == 'none') ? 'block' : 'none';
+    document.getElementById(strID).style.display = (document.getElementById(strID).style.display == 'none') ? 'inline-block' : 'none';
-    document.getElementById(strID + "_shown").style.display = (document.getElementById(strID + "_shown").style.display == 'none') ? 'block' : 'none';
+    document.getElementById(strID + "_shown").style.display = (document.getElementById(strID + "_shown").style.display == 'none') ? 'inline-block' : 'none';
-    document.getElementById(strID + "_hidden").style.display = (document.getElementById(strID + "_hidden").style.display == 'none') ? 'block' : 'none';
+    document.getElementById(strID + "_hidden").style.display = (document.getElementById(strID + "_hidden").style.display == 'none') ? 'inline-block' : 'none';
 }