-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
88 lines (86 loc) · 4.75 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<!DOCTYPE html>
<html>
<head>
<title></title>
<link type="text/css" rel="stylesheet" href="css/global.css"/>
<link type="text/css" rel="stylesheet" href="css/tip-twitter/tip-twitter.css"/>
<script language="javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script language="javascript" src="js/moustache.js"></script>
<script language="javascript" src="js/jquery.poshytip.min.js"></script>
<script language="javascript" src="js/vote.js"></script>
</head>
<body>
<div id="wrapborder">
<div id="header">
<h1>Zimbabwe Election 2013</h1>
<ol id='nav'>
<li><a href='http://sokwanele.com' target='_blank'>home</a></li>
<!-- <li><a href='http://sokwanele.com/zimbabwe-elections/2013' target='_blank'>election hub</a></li> -->
</ol>
<ol id="Tabs" class="clearfix container">
<li id='tabpresident'><a href="#president">President</a></li>
<li id='tabhouse'><a class="active" href="#house">House</a></li>
<li id='tabsenate'><a href="#senate">Senate</a></li>
<li id='tabhouselist'><a href="#houselist">House List</a></li>
<li id='tabbattleground'><a href="#battleground">Battleground</a></li>
</ol>
</div>
<div class="clearfix container content_frame">
<a href='#' id='helpbutton'><img src="css/img/help.jpeg" alt='Help' border='none' /></a>
<div id="helpoverlay">
<h2>How to use the map</h2>
<p>
These maps are fully interactive and we invite you to use your mouse to hover and click on components to browse the information provided. We have provided election data for the 2008 elections and we will be updating data for 2013 as we receive it.
</p>
<p>
Use the two side-tabs to toggle between a map view and table view. In the map view: HOVER over constituencies on the map to read summarised information quickly. CLICK on the constituencies to call-up more details, displayed under the map. In the table view: you can expose more details for each constituency listed by CLICKING on each row. This information will appear underneath the table.
</p>
<p>
Use your mouse to hover over the bar-charts at the top of each map to receive number counts of totaled results which update automatically as the map is populated with data.
</p>
<p>
The 'Battleground' map is based on margin of victory in 2008. The lighter the colour the safer the constituency seat for the party that won it. The darker the colour, the more competition there will be for the seat. These are the constituencies to pay close attention to as the 2013 results start to come in.
</p>
<a href='#' id='closebutton'>Close</a>
</div>
<div id="ResultsChart" class="clearfix container">
<!-- populated from AJAX call -->
</div>
<div class="clearfix">
<ol id="StagePicker">
<li><a class="active" href="#map">Map</a></li>
<li><a href="#table">Table</a></li>
</ol>
<div id="stage" class="content">
<div id="loading"><img src="css/img/loading.gif"/></div>
<div id="map" class="tab clearfix">
<div id="map-canvas"></div>
</div>
<div id="table" class="tab clearfix">
<div id="tablecolumn1" class="column"></div>
<div id="tablecolumn2" class="column"></div>
<div id="tablecolumn3" class="column"></div>
</div>
</div>
<div id="marginkey">
<h3>Margin</h3>
<ol>
<li style='border-color: #CEEBEE'>more than 40%</li>
<li style='border-color: #9DB3E0'>between 40% and 25%</li>
<li style='border-color: #6C7BD3'>between 25% and 10%</li>
<li style='border-color: #3B43C5'>between 10% and 5%</li>
<li style='border-color: #0A0BB8'>less than 5%</li>
</ol>
</div>
</div>
<div id="detail" class="clearfix">
<!-- populated from AJAX call -->
</div>
</div>
<br/>
</div>
<div id="tooltip"></div>
</body>
</html>