Fixed collapsing "Jump to..." menu

canvas/css/canvas.css

@@ -891,8 +891,38 @@ div.dialog {
     }
     /* Jump to */
     .jump-to {
-        display: block;
+        position: fixed;
+        top: 0;
+        z-index: 1;
+        width: 100%;
+        overflow: hidden;
+        min-height: 64px;
+        margin-left: -15px;
+        border-radius: 0;
+        padding-top: 2em;
+        display: none;
+    }
+    .jump-to ul {
+        width: 100%;
+        display: none;
+    }
+    /*
+    .jump-to .jump-to-arrow {
+        display: inline-block;
     }
+     */
+    .jump-to label {
+        cursor: pointer;
+    }
+    .rotate1 {
+        transform: rotate(90deg);
+        transition: .3s;
+    }
+    .rotate2 {
+        transform: rotate(0deg);
+        transition: .3s;
+    }
+    
     /* Saved tags */
     .saved-tags {
         padding: 1em 1em 0.3em 1em;

canvas/index.php

@@ -89,44 +89,45 @@
                 <!-- Jump to -->
                 <div class="jump-to row">
                     <div class="col-s-12">
-                        <label class="jump_to">Jump to...</label>
+                        <a href="#"><label class="jump_to"><img class="arrow-img rotate2" style="height: 20px; width: 20px;" src="icons/glyphicon-chevron-right.gif" />&nbsp;Jump to...</label></a>
+                        <!-- <a href="#"><label class="jump_to"><span class="jump-to-arrow glyphicon glyphicon-chevron-right"></span> Jump to...</label></a> -->
                         <ul>
                             <li>
-                                <a href="#bookmark_saved_tags">Saved tags</a>
+                                <a href="#row_saved_tags">Saved tags</a>
                             </li>
                             <li>
-                                <a href="#bookmark_01">1.&nbsp;&nbsp;Individuals Affected</a>
+                                <a href="#panel_01">1.&nbsp;&nbsp;Individuals Affected</a>
                             </li>
                             <li>
-                                <a href="#bookmark_02">2.&nbsp;&nbsp;Groups Affected</a>
+                                <a href="#panel_02">2.&nbsp;&nbsp;Groups Affected</a>
                             </li>
                             <li>
-                                <a href="#bookmark_03">3.&nbsp;&nbsp;Behaviour</a>
+                                <a href="#panel_03">3.&nbsp;&nbsp;Behaviour</a>
                             </li>
                             <li>
-                                <a href="#bookmark_04">4.&nbsp;&nbsp;Relations</a>
+                                <a href="#panel_04">4.&nbsp;&nbsp;Relations</a>
                             </li>
                             <li>
-                                <a href="#bookmark_05">5.&nbsp;&nbsp;Worldviews</a>
+                                <a href="#panel_05">5.&nbsp;&nbsp;Worldviews</a>
                             </li>
                             <li>
-                                <a href="#bookmark_06">6.&nbsp;&nbsp;Group Conflicts</a>
+                                <a href="#panel_06">6.&nbsp;&nbsp;Group Conflicts</a>
                             </li>
                             <li>
-                                <a href="#bookmark_07">7.&nbsp;&nbsp;Product or Service Failure</a>
+                                <a href="#panel_07">7.&nbsp;&nbsp;Product or Service Failure</a>
                             </li>
                             <li>
-                                <a href="#bookmark_08">8.&nbsp;&nbsp;Problematic Use of Resources</a>
+                                <a href="#panel_08">8.&nbsp;&nbsp;Problematic Use of Resources</a>
                             </li>
                             <li>
-                                <a href="#bookmark_09">9.&nbsp;&nbsp;What can we do?</a>
+                                <a href="#panel_09">9.&nbsp;&nbsp;What can we do?</a>
                             </li>
                         </ul>
                     </div>
                 </div>
                 
                 <!-- Saved tags -->
-                <div class="saved-tags row" id="bookmark_saved_tags">
+                <div class="saved-tags row" id="row_saved_tags">
                     <div class="col-s-12">
                         <label>Saved Tags</label>
                         <p>You haven't added any tags yet.</p>
@@ -137,7 +138,7 @@
                 <!-- ================ 7/5 col ================ -->
                 <div class="canvas-box">
                     <div class="masonry-layout7-5" id="7-5-col-layout">
-                        <div class="masonry-layout__panel" id="bookmark_01">
+                        <div class="masonry-layout__panel" id="panel_01">
                             <div class="card field_01 masonry-layout__panel-content bg--purple">
                                 <h2 class="field-title">
                                     <!-- FIELD -->
@@ -196,7 +197,7 @@
                             </div>
                             <!-- End of .card -->
                         </div>
-                        <div class="masonry-layout__panel" id="bookmark_03">
+                        <div class="masonry-layout__panel" id="panel_03">
                             <div class="card field_03 masonry-layout__panel-content bg--blue">
                                 <h2 class="field-title">
                                     <!-- FIELD -->
@@ -255,7 +256,7 @@
                             </div>
                             <!-- End of .card -->
                         </div>
-                        <div class="masonry-layout__panel" id="bookmark_04">
+                        <div class="masonry-layout__panel" id="panel_04">
                             <div class="card field_04 masonry-layout__panel-content bg--green">
                                 <h2 class="field-title">
                                     <!-- Field -->
@@ -314,7 +315,7 @@
                             </div>
                             <!-- End of .card -->
                         </div>
-                        <div class="masonry-layout__panel" id="bookmark_09">
+                        <div class="masonry-layout__panel" id="panel_09">
                             <div class="card field_09 masonry-layout__panel-content bg--darkblue">
                                 <h2 class="field-title">
                                     <!-- Field -->
@@ -373,7 +374,7 @@
                             </div>
                             <!-- End of .card -->
                         </div>
-                        <div class="masonry-layout__panel" id="bookmark_05">
+                        <div class="masonry-layout__panel" id="panel_05">
                             <div class="card field_05 masonry-layout__panel-content bg--seagreen">
                                 <h2 class="field-title">
                                     <!-- Field -->
@@ -432,7 +433,7 @@
                             </div>
                             <!-- End of .card -->
                         </div>
-                        <div class="masonry-layout__panel" id="bookmark_06">
+                        <div class="masonry-layout__panel" id="panel_06">
                             <div class="card field_06 masonry-layout__panel-content bg--green1">
                                 <h2 class="field-title">
                                     <!-- Field -->
@@ -491,7 +492,7 @@
                             </div>
                             <!-- End of .card -->
                         </div>
-                        <div class="masonry-layout__panel" id="bookmark_02">
+                        <div class="masonry-layout__panel" id="panel_02">
                             <div class="card field_02 masonry-layout__panel-content bg--purple">
                                 <h2 class="field-title">
                                     <!-- Field -->
@@ -555,7 +556,7 @@
 
                     <!-- ================ 4 col ================ -->
                     <div class="masonry-layout2" id="4-col-layout">
-                        <div class="masonry-layout__panel" id="bookmark_07">
+                        <div class="masonry-layout__panel" id="panel_07">
                             <div class="card field_07 masonry-layout__panel-content bg--blue">
                                 <h2 class="field-title">
                                     <!-- Field -->
@@ -615,7 +616,7 @@
                             </div>
                             <!-- End of .card -->
                         </div>
-                        <div class="masonry-layout__panel" id="bookmark_08">
+                        <div class="masonry-layout__panel" id="panel_08">
                             <div class="card field_08 masonry-layout__panel-content bg--green">
                                 <h2 class="field-title">
                                     <!-- Field -->

canvas/js/canvas.js

@@ -32,15 +32,15 @@ $(document).ready(function() {
     var groupOneLayout = $("#7-5-col-layout");
     var groupTwoLayout = $("#4-col-layout");
     
-    var field01 = $("#bookmark_01");
-    var field03 = $("#bookmark_03");
-    var field04 = $("#bookmark_04");
-    var field09 = $("#bookmark_09");
-    var field05 = $("#bookmark_05");
-    var field06 = $("#bookmark_06");
-    var field02 = $("#bookmark_02");
-    var field07 = $("#bookmark_07");
-    var field08 = $("#bookmark_08");
+    var field01 = $("#panel_01");
+    var field03 = $("#panel_03");
+    var field04 = $("#panel_04");
+    var field09 = $("#panel_09");
+    var field05 = $("#panel_05");
+    var field06 = $("#panel_06");
+    var field02 = $("#panel_02");
+    var field07 = $("#panel_07");
+    var field08 = $("#panel_08");
     
     var isRearranged = false;
     
@@ -108,7 +108,83 @@ $(document).ready(function() {
             isRearranged = false;
         }
     });
+    
+    /* ================================================
+    "Jump to" functions
+    ================================================= */
+    
+    // When the user scrolls down, change "position" to "fixed"
+    $(window).scroll(function() {
+        var scrollPosition = $(window).scrollTop();
+        // var firstFieldPosition = $("div.field_01").offset().top;
+        var firstFieldPosition = $("div.saved-tags").offset().top;
+        
+        // If the user has scrolled down to the first field
+        if(scrollPosition >= firstFieldPosition) {
+            $("div.jump-to").css("display", "block");
+        }
+        else {
+            $("div.jump-to").css("display", "none");
+        }
+    });
+        
+    // When the user clicks on "Jump to", show menu
+    $("div.jump-to > div > a").on("click", function() {
+        // Toggle the menu
+        $("div.jump-to ul").slideToggle(300);
+        
+        // Rotate arrow
+        // $("div.jump-to span.jump-to-arrow").toggleClass("rotate-arrow-180");
+        // $("div.jump-to span.jump-to-arrow").toggleClass("rotate-arrow-0");        
+        $(".arrow-img").toggleClass("rotate1");
+        $(".arrow-img").toggleClass("rotate2");
+        
+        return false;
+    });
+    
+    // When the user clicks on a menu item
+    $("div.jump-to ul a").on("click", function() {
+        // Declarations
+        var chosenLiIndex = $(this).parent().index();
+        var chosenFieldPosition;
+        var scrollPositionNew;
+        
+        // Toggle the menu
+        $("div.jump-to ul").slideToggle(300);
+        
+        // Rotate arrow
+        // $("div.jump-to span.jump-to-arrow").toggleClass("rotate-arrow-180");
+        // $("div.jump-to span.jump-to-arrow").toggleClass("rotate-arrow-0");        
+        $(".arrow-img").toggleClass("rotate1");
+        $(".arrow-img").toggleClass("rotate2");
+        
+        // If the user has chosen the list item 0
+        if(chosenLiIndex === 0) {
+            chosenFieldPosition = $("div.saved-tags").offset().top;
+        }
+        // If the user has chosen the list item 1-9
+        else if(chosenLiIndex >= 1 && chosenLiIndex <= 9) {
+            chosenFieldPosition = $("div.field_0" + chosenLiIndex).offset().top;
+        }
+        // If the user has chosen the list item 10 or higher
+        else {
+            chosenFieldPosition = $("div.field_" + chosenLiIndex).offset().top;
+        }
+        
+        // If the user has chosen to jump to "Saved Tags"
+        if(chosenLiIndex === 0) {
+            scrollPositionNew = chosenFieldPosition - 14; // 14 // - $("div.jump-to").height() + 38;
+        }
+        // If the user has chosen to jump to a category
+        else {
+            scrollPositionNew = chosenFieldPosition - 57; // 77 // - $("div.jump-to").height() - 20;
+        }
+        
+        $(window).scrollTop(scrollPositionNew);
         
+        return false;
+    });
+    
     /* ================================================
     Remove all tags from all fields
     ================================================= */