Changeset 541

Timestamp:

Apr 30, 2007, 2:34:52 PM (14 years ago)

Author:

Nick Burch

Message:

Scale the front page map to fit

File:

• trunk/london.npemap.org.uk/index.html (modified) (3 diffs)

trunk/london.npemap.org.uk/index.html

@@ -23 +23 @@
 </div>
 
-<div class="mid-col">
+<div class="mid-col" id="map-col">
         <noscript>
          This site requires javascript
@@ -31 +31 @@
    <img src="/thumbnail.jpg" alt="Map of London" id="link" />
    <br />
-   <i>These maps are reproduced by kind permission of the Geographers' A-Z Map
-    Company, and are still in <a href="/FAQ.html#licence">copyright</a>.</i>
+   <i>These maps are reproduced by kind permission of 
+        the Geographers' A-Z Map Company, and are still in 
+        <a href="/FAQ.html#licence">copyright</a>.</i>
  </div>
 </div>
@@ -56 +57 @@
 // Attach an onclick action to the thumbnail image
 YAHOO.util.Event.addListener("link", "click", click);
+
+// Attach a resize helper
+YAHOO.util.Event.addListener(window,'resize',doResize);
+
+screenWidth = -1;
+screenHeight = -1;
+function doResize() {
+  var newWidth = YAHOO.util.Dom.getViewportWidth();
+  var newHeight = YAHOO.util.Dom.getViewportHeight();
+  if (screenHeight != newHeight || screenWidth != newWidth) {
+        screenWidth = YAHOO.util.Dom.getViewportWidth();
+        screenHeight = YAHOO.util.Dom.getViewportHeight();
+
+                // Tweak the map size if required
+                var img_width = 624;
+                var img = $('link');
+                var text = $('map-col');
+                if(screenWidth >= 1175) {
+                        img.style.width = img_width + "px";
+                        text.style.width = '55%';
+                } else if(screenWidth >= 1000) {
+                        img.style.width = (screenWidth - 530) + "px";
+                        text.style.width = (screenWidth - 520) + "px";
+                } else if(screenWidth >= 700) {
+                        img.style.width = (screenWidth - 500) + "px";
+                        text.style.width = (screenWidth - 490) + "px";
+                } else {
+                        img.style.width = (screenWidth - 370) + "px";
+                        text.style.width = (screenWidth - 360) + "px";
+                }
+  }
+}
+doResize();
 </script>