source: dashboard/occ2011-dashboard.html@ 326

Last change on this file since 326 was 326, checked in by Rick van der Zwet, 13 years ago

Playing around with jquery and HTML
  • Property svn:mime-type set to text/html
File size: 5.8 KB
Line 
1<html>
2<head>
3<title>Open Community Camp 2011 - Live Page</title>
4<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>
5<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js" type="text/javascript"></script>
6<script src="http://flesler-plugins.googlecode.com/files/jquery.scrollTo-1.4.2-min.js" type="text/javascript"></script>
7<script src="http://flesler-plugins.googlecode.com/files/jquery.localscroll-1.2.7-min.js" type="text/javascript"></script>
8
9<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css" type="text/css" media="all" />
10
11<script type="text/javascript">
12 $(function() {
13 $( "#tab-set" ).tabs();
14 });
15
16 $(document).ready(function(){
17 $(".tab-set").tabs();
18 if($("#tab-set") && document.location.hash){
19 $("#tab-set").scrollTo("#tab-set");
20 }
21 $("#tab-set").localScroll({
22 target:"#tab-set",
23 hash: true,
24 duration : 0,
25 });
26 });
27</script>
28
29</head>
30<body>
31
32<div class="demo">
33
34<div id="tab-set">
35 <ul>
36 <li><a href="#main">Main Page</a></li>
37 <li><a href="#telex">IRC Telex</a></li>
38 <li><a href="#noc">NOC</a></li>
39 <li><a href="#webcam">Live WebCams</a></li>
40 </ul>
41 <div id="main">
42 <table>
43 <caption><h3>Join in! Use hashtag #occ2011</h3></caption>
44 <tr><td colspan="3">
45 <!-- Start of Flickr Badge -->
46 <style type="text/css">
47 #flickr_badge_source_txt {padding:0; font: 11px Arial, Helvetica, Sans serif; color:#666666;}
48 #flickr_badge_icon {display:block !important; margin:0 !important; border: 1px solid rgb(0, 0, 0) !important;}
49 #flickr_icon_td {padding:0 5px 0 0 !important;}
50 .flickr_badge_image {text-align:center !important;}
51 .flickr_badge_image img {border: 1px solid black !important;}
52 #flickr_www {display:block; padding:0 10px 0 10px !important; font: 11px Arial, Helvetica, Sans serif !important; color:#3993ff !important;}
53 #flickr_badge_uber_wrapper a:hover,
54 #flickr_badge_uber_wrapper a:link,
55 #flickr_badge_uber_wrapper a:active,
56 #flickr_badge_uber_wrapper a:visited {text-decoration:none !important; background:inherit !important;color:#3993ff;}
57 #flickr_badge_wrapper {background-color:#ffffff;border: solid 1px #000000}
58 #flickr_badge_source {padding:0 !important; font: 11px Arial, Helvetica, Sans serif !important; color:#666666 !important;}
59</style>
60<style type="text/css">
61.titlec {
62font-size: small;
63}
64ul.videos li {
65float: left;
66width: 10em;
67margin-bottom: 1em;
68}
69ul.videos
70{
71margin-bottom: 1em;
72padding-left : 0em;
73margin-left: 0em;
74list-style: none;
75}
76</style>
77
78<table id="flickr_badge_uber_wrapper" cellpadding="0" cellspacing="10" border="0"><tr><td><a href="http://www.flickr.com" id="flickr_www">www.<strong style="color:#3993ff">flick<span style="color:#ff1c92">r</span></strong>.com</a><table cellpadding="0" cellspacing="10" border="0" id="flickr_badge_wrapper">
79<script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?count=5&display=latest&size=m&layout=h&source=all_tag&user=70375122%40N00&tag=occ2011"></script>
80</table>
81</td></tr></table>
82<!-- End of Flickr Badge -->
83</td>
84</tr><tr>
85<td>
86<script src="http://widgets.twimg.com/j/2/widget.js"></script>
87<script>
88new TWTR.Widget({
89version: 2,
90type: 'search',
91search: '#occ2011',
92interval: 6000,
93title: 'Open Community Camp 2011',
94subject: 'http://opencommunitycamp.org',
95width: 300,
96height: 300,
97theme: {
98shell: {
99 background: '#8ec1da',
100 color: '#ffffff'
101},
102tweets: {
103 background: '#ffffff',
104 color: '#444444',
105 links: '#1985b5'
106}
107},
108features: {
109scrollbar: true,
110loop: true,
111live: true,
112hashtags: true,
113timestamp: true,
114avatars: true,
115toptweets: true,
116behavior: 'all'
117}
118}).render().start();
119</script>
120</td>
121<td>
122<div style="background-color: #00FFFF;width:647px;height:400px">
123<iframe src="http://webchat.freenode.net?randomnick=1&channels=occ&uio=d4" width="647" height="400"></iframe>
124</div>
125</td>
126<td>
127<div id="playerContainer" style="width: 20em; height: 180px;float: left;">
128<object id="player"></object>
129</div>
130<div id="videos2"></div>
131<script type="text/javascript" src="http://swfobject.googlecode.com/svn/trunk/swfobject/swfobject.js"></script>
132<script type="text/javascript">
133function loadVideo(playerUrl, autoplay) {
134swfobject.embedSWF(
135 playerUrl + '&rel=1&border=0&fs=1&autoplay=' +
136 (autoplay?1:0), 'player', '290', '250', '9.0.0', false,
137 false, {allowfullscreen: 'true'});
138}
139
140function showMyVideos2(data) {
141var feed = data.feed;
142var entries = feed.entry || [];
143var html = ['<ul class="videos">'];
144for (var i = 0; i < entries.length; i++) {
145var entry = entries[i];
146var title = entry.title.$t.substr(0, 20);
147var thumbnailUrl = entries[i].media$group.media$thumbnail[0].url;
148var playerUrl = entries[i].media$group.media$content[0].url;
149html.push('<li onclick="loadVideo(\'', playerUrl, '\', true)">',
150 '<span class="titlec">', title, '...</span><br /><img src="',
151 thumbnailUrl, '" width="130" height="97"/>', '</span></li>');
152}
153html.push('</ul><br style="clear: left;"/>');
154document.getElementById('videos2').innerHTML = html.join('');
155if (entries.length > 0) {
156loadVideo(entries[0].media$group.media$content[0].url, false);
157}
158}
159</script>
160<script
161type="text/javascript"
162src="https://gdata.youtube.com/feeds/api/videos?strict=true&max-results=10&category=occ2011&alt=json-in-script&callback=showMyVideos2">
163</script>
164</td>
165</tr></table>
166
167</div>
168<div id="telex">
169<table><tr><td>
170<iframe src="http://webchat.freenode.net?randomnick=1&channels=occ&uio=d4" width="647" height="400"></iframe></td><td>
171<img src="http://live.occ2011.org:9999/cam4/video" />
172</td></tr>
173</table>
174</div>
175<div id="noc">
176<iframe src="http://noc.occ2011.org" width="100%" height="100%"></iframe>
177</div>
178<div id="webcam">
179<iframe src="http://live.occ2011.org" width="100%" height="100%"></iframe>
180</div>
181</div>
182
183</div>
184
185
186</body>
187</html>
Note: See TracBrowser for help on using the repository browser.