-
Notifications
You must be signed in to change notification settings - Fork 0
/
webby1.html
executable file
·140 lines (137 loc) · 6.05 KB
/
webby1.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
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
<!DOCTYPE html>
<html lang="en">
<style>
div.footer, div.header {
background: none repeat scroll 0 0 #000000;
color: #000000;
padding: 3;
}
</style>
<head>
<div class="header">
<!--<img src="http://s15.postimg.org/n5xrewscb/dcr.jpg" style="width:7%;height:7%;"></center>-->
<!--<img src="http://s3.postimg.org/wpg2bz85v/dcrje_RKc2.jpg" style="width:12%;height:12%;"></center>-->
<br/>
</div>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script type="text/javascript">
var delay = (function(){
var timer = 0;
return function(callback, ms){
clearTimeout (timer);
timer = setTimeout(callback, ms);
};
})();
function processInput()
{
$("#results").html("");
$.post("data.php", {query: $("#search").val()}, function(data)
{
$.each(data, function(i, item)
{
$("#results").append(item.title + '<br/>');
});
}, "json");
}
$(document).ready(function()
{
$("#search").keyup(function(){ delay(processInput, 400); });
});
</script>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<br/>
<img src="http://s1.postimg.org/c6gfcsinz/dcrr.jpg" style="width:90px;height:90px;margin-left:50px;">
<br/>
</div>
<br/>
<br/>
<div class="collapse navbar-collapse" id="myNavbar" style="float:left">
<ul class="nav navbar-nav">
<li class="active"><a>Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contacts</a></li>
</ul>
</div>
<div>
<ul class="nav navbar-nav navbar-right">
<br/>
<input type="text" id="search" style="width:550px;margin-right:50px;float:right"/>
<!--<li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>-->
</ul>
</div>
</div>
<br/>
</nav>
<!-- <nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Udadisi</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-icon-twitter-t"></span> Sign Up</a></li>
<li><a href="#"><span class="glyphicon glyphicon-icon-facebook"></span> Login</a></li>
</ul>
</div>
</div>
</nav>
<h2 class="logo">
<img src="http://s1.postimg.org/c6gfcsinz/dcrr.jpg" style="width:150px;height:150px;margin-left:50px;">
</h2>-->
<div class="container">
<center><img src="http://flowingdata.com/wp-content/uploads/2012/09/His-and-Hers-Colors-by-Stephen-Von-Worley-620x454.png" style="width:90%;height:90%;"></center>
</div>
<div>
<input style="margin-left:30px;margin-right:30px;" type="text" id="search" />
</div>
<div id="results"></div>
<br/>
<div class="row">
<div class="col-md-4">
<p style="margin-left:30px;margin-right:30px;"> As part of SmartDataHack 2015, we have formed a team to respond to Practical Action's Challenge: how can data from social media and news media sources build a picture of innovation in and around Nairobi, Kenya? </p>
</div>
<div class="col-md-4">
<p>Udadisi, meaning "curiosity" in the Swahili language, is a diverse team of innovators, tackling technology justice issues in East Africa.</p>
</div>
<div class="col-md-4">
<p style="margin-left:30px;margin-right:30px;" >Our goal: to visualize the data in a way that is informative and tells a story about various types of emerging technology trends in this dynamic and vibrant city.</p>
</div>
</div>
</div>
<iframe src='http://cdn.knightlab.com/libs/timeline/latest/embed/index.html?source=0Agl_Dv6iEbDadHdKcHlHcTB5bzhvbF9iTWwyMmJHdkE&font=Bevan-PotanoSans&maptype=toner&lang=en&height=550' width='95%' height='550' frameborder='0' style="margin-right:30px;margin-left:30px"></iframe>
</div>
<div class="wrapper">
<div class="push"></div>
</div>
<div class="footer">
<br/>
<p class="text-center"> <font size="2" color="white">© Udadisi 2015</font></p>
<br/>
</div>
</body>
</html>