added about / questions buttons and about text

This commit is contained in:
sanj 2010-09-20 02:50:49 +05:30
parent 2387db5b12
commit 52ca10a126
4 changed files with 90 additions and 3 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 35 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

View File

@ -144,6 +144,7 @@ function mouseOverImage(id) {
$(function() { $(function() {
$('td').click(function() { $('td').click(function() {
$('td').removeClass('selected'); $('td').removeClass('selected');
$('.navButton').removeClass('navSelected');
var catName = $(this).text(); var catName = $(this).text();
var type = $(this).attr("class").replace("Category", ""); var type = $(this).attr("class").replace("Category", "");
$(this).addClass('selected'); $(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) { function getFlyoverById(id) {
var features = jsonLayer.features; var features = jsonLayer.features;
for (var i=0; i < features.length; i++) { for (var i=0; i < features.length; i++) {
@ -208,3 +222,4 @@ $('.flyoverImage').live("mouseover", function() {
$('.flyoverImage').live("mouseout", function() { $('.flyoverImage').live("mouseout", function() {
mapControl.unselect(currentlySelectedFeature); mapControl.unselect(currentlySelectedFeature);
}); });

View File

@ -58,8 +58,8 @@ a img {
.imageWrapper { .imageWrapper {
float: left; float: left;
width: 100px; width: 120px;
height: 100px; height: 120px;
text-align: center; 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 { #media {
background: #fff; background: #fff;
position: absolute; position: absolute;
@ -109,6 +132,20 @@ a img {
width: 100px; width: 100px;
height: 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> </style>
<title>Vertical Urbanism: Flyovers in Mumbai</title> <title>Vertical Urbanism: Flyovers in Mumbai</title>
<link rel="stylesheet" type="text/css" href="/static/css/colorbox.css" /> <link rel="stylesheet" type="text/css" href="/static/css/colorbox.css" />
@ -192,11 +229,46 @@ a img {
</div> </div>
<div id="map"> <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>
<div id="media"> <div id="media">
</div> </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 Mumbais
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 UKs 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> </body>
</html> </html>