added about / questions buttons and about text

vurbanism/static/js/vurbanism.js

@@ -144,6 +144,7 @@ function mouseOverImage(id) {
 $(function() {
   $('td').click(function() {
     $('td').removeClass('selected');
+    $('.navButton').removeClass('navSelected');
     var catName = $(this).text();
     var type = $(this).attr("class").replace("Category", "");
     $(this).addClass('selected');
@@ -187,6 +188,19 @@ $(function() {
   });
 });
 
+$(function() {
+  $('.navButton').click(function() {
+    $('.selected').removeClass('selected');
+    $('.navSelected').removeClass('navSelected');
+    $(this).addClass('navSelected');
+    var html = $('#' + $(this).attr("data-target")).html();
+    $('#media').html(html);    
+  });
+
+  //trigger click on "About" on page load:
+  $('#aboutBtn').click();
+});
+
 function getFlyoverById(id) {
   var features = jsonLayer.features;
   for (var i=0; i < features.length; i++) {
@@ -208,3 +222,4 @@ $('.flyoverImage').live("mouseover", function() {
 $('.flyoverImage').live("mouseout", function() {
   mapControl.unselect(currentlySelectedFeature);  
 });
+

vurbanism/templates/flyovers.html

@@ -58,8 +58,8 @@ a img {
 
 .imageWrapper {
   float: left;
-  width: 100px;
+  width: 120px;
-  height: 100px;
+  height: 120px;
   text-align: center;
 }
 
@@ -92,6 +92,29 @@ a img {
 
 }
 
+#buttons {
+  position: absolute;
+  right: 2%;
+  top: 1%;
+  height: 3%;
+  width: 20%;
+}
+
+#buttons .navButton {
+  width: 8%;
+  padding: 2px;
+  text-align: center;
+  border: 1px solid #fff;
+  background: #6BDCE1;
+  text-decoration: none;
+}
+
+.navSelected {
+  background: #fff !important;
+  border: 1px solid #68dce1 !important;
+}
+
+
 #media {
   background: #fff;
   position: absolute;
@@ -109,6 +132,20 @@ a img {
   width: 100px;
   height: 100px;
 }
+
+.navContent {
+  display: none;
+}
+
+.contentWrapper {
+  height: 96%;
+  margin-top: 2%;
+  margin-bottom: 2%;
+  overflow: auto;
+  width: 94%;
+  margin-left: auto;
+  margin-right: auto;
+}
   </style>
   <title>Vertical Urbanism: Flyovers in Mumbai</title>
   <link rel="stylesheet" type="text/css" href="/static/css/colorbox.css" />
@@ -192,11 +229,46 @@ a img {
     </div>
     <div id="map">
 
+    </div>
+    <div id="buttons">
+      <a class="navButton" href="Javascript:$.noop()" data-target="about" id="aboutBtn">About</a>
+      <a class="navButton" href="Javascript:$.noop()" data-target="questions" id="questionsBtn">Questions</a>
     </div>
     <div id="media">
       
     </div>
-  </div>  
+  </div>
+
+  <div class="navContent" id="about">
+    <div class="contentWrapper about">
+
+<p>This site maps the landscapes of elevated road highways – flyovers – and
+elevated pedestrian walkways – skywalks – across the Mumbai Metropolitan
+Region in Western India.
+
+<p>Both flyovers and skywalks have become a highly visible feature of Mumbai’s
+recent rapid urbanisation. The number of flyovers increased from 13 in 1997
+to over 60 by 2009, while the first skywalks were constructed in 2008. Many
+more projects are ongoing and proposed.
+
+<p>By assembling and categorising photographs, videos, audio-clips and text,
+this site allows users to explore some of the new and diverse urban worlds
+created through flyover and skywalk construction.
+
+<p>All material was collected between April 2009 and January 2010 by Andrew
+Harris with the assistance of Savitri Medhatul. The website was devised by
+Andrew Harris and created by Sanjay Bhangar.The research was funded by
+the UK’s Economic and Social Research Council and the Urban Laboratory of
+University College London.</p>
+      <img src="/static/images/urbanlablogo.jpg" alt="Urban Lab Logo" title="Urban Lab" />
+      <img src="/static/images/esrclogo.jpg" alt="ESRC Logo" title="Economic and Social Research Council" />
+    </div>
+  </div>
+  <div class="navContent" id="questions">
+    <div class="contentWrapper questions">
+      Soon.
+    </div>
+  </div> 
 </body>
 
 </html>