Fixed "Jump to..." menu flickering bug

canvas/css/canvas.css

@@ -906,6 +906,11 @@ div.dialog {
         width: 100%;
         display: none;
     }
+    .jump-to img {
+        margin-right: 1px;
+        height: 18px;
+        width: 18px;
+    }
     /*
     .jump-to .jump-to-arrow {
         display: inline-block;
@@ -914,11 +919,11 @@ div.dialog {
     .jump-to label {
         cursor: pointer;
     }
-    .rotate1 {
+    .jump-to-arrow-90 {
         transform: rotate(90deg);
         transition: .3s;
     }
-    .rotate2 {
+    .jump-to-arrow-0 {
         transform: rotate(0deg);
         transition: .3s;
     }

canvas/index.php

@@ -89,7 +89,7 @@
                 <!-- Jump to -->
                 <div class="jump-to row">
                     <div class="col-s-12">
-                        <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"><img class="jump-to-arrow-0" 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>

canvas/js/canvas.js

@@ -90,7 +90,7 @@ $(document).ready(function() {
         groupTwoLayout.append(field08);
     }
     
-    // If the webpage is opened on a mobile
+    // If the web page is opened on a mobile
     if ($(window).width() <= 499) {
         rearrangeFields();
     }
@@ -115,19 +115,23 @@ $(document).ready(function() {
     
     // 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");
+        // If the web page is opened on a mobile
+        if($(window).width() <= 499) {
+            // Declarations
+            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
@@ -135,9 +139,9 @@ $(document).ready(function() {
         
         // 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");
+        // $("div.jump-to span.jump-to-arrow").toggleClass("rotate-arrow-0");
+        $(".jump-to img").toggleClass("jump-to-arrow-90");
+        $(".jump-to img").toggleClass("jump-to-arrow-0");
         
         return false;
     });
@@ -154,9 +158,9 @@ $(document).ready(function() {
         
         // 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");
+        // $("div.jump-to span.jump-to-arrow").toggleClass("rotate-arrow-0");
+        $(".jump-to img").toggleClass("jump-to-arrow-90");
+        $(".jump-to img").toggleClass("jump-to-arrow-0");
         
         // If the user has chosen the list item 0
         if(chosenLiIndex === 0) {