Merge pull request #53 from 47deg/fix-marker-position

Fix marker position

Author: dominv

_layouts/frontpage.html

@@ -34,17 +34,17 @@
         </nav>
         <!-- Inner Text -->
         <div class="inner-text">
-          <div class="marker">
-            <div class="info-marker">
+          <h1>{{page.headerTitle}}</h1>
+          <p>{{page.headerSubtitle}}</p>
+          <a href="{{page.headerButtonUrl}}" class="button">{{page.headerButtonTitle | upcase}}</a>
+        </div>
+        <div id="position-marker" class="marker">
+          <div class="info-marker">
               <span class="arrow">
               <img src="/resources/img/frontpage/arrow.png" alt="pushpin">
               </span>
-              {{site.data.common.texts.frontpageMarker}}
-            </div>
+            {{site.data.common.texts.frontpageMarker}}
           </div>
-          <h1>{{page.headerTitle}}</h1>
-          <p>{{page.headerSubtitle}}</p>
-          <a href="{{page.headerButtonUrl}}" class="button">{{page.headerButtonTitle | upcase}}</a>
         </div>
       </div>
     </div>

resources/css/style.css

@@ -283,4 +283,24 @@ $(document).ready(function() {
         $("#download-sbt-link").attr("href", sbtLink);
         $("#download-step-one").html(stepOneContent);
     }
-});
+});
+
+var image = { width: 1680, height: 1100 };
+var target = { x: 1028, y: 290 };
+
+var pointer = $('#position-marker');
+
+$(document).ready(updatePointer);
+$(window).resize(updatePointer);
+
+function updatePointer() {
+
+    var windowWidth = $(window).width();
+    var windowHeight = $(window).height();
+
+    var xScale = windowWidth / image.width;
+    var yScale = windowHeight / image.height;
+
+    pointer.css('top', (target.y));
+    pointer.css('left', (target.x) * xScale);
+}