Ignore:
Timestamp:
Jul 21, 2011, 12:25:48 AM (13 years ago)
Author:
Rick van der Zwet
Message:

Tweak dashboard, make nicer display.

File:
1 edited

Legend:

Unmodified
Added
Removed

  • dashboard/occ2011-dashboard.html

    r326 r334  
    22<head>
    33<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" />
     4<script src="js/jquery.min.js" type="text/javascript"></script>
     5<script src="js/jquery-ui.min.js" type="text/javascript"></script>
     6<script src="js/jquery.scrollTo-1.4.2-min.js" type="text/javascript"></script>
     7<script src="js/jquery.localscroll-1.2.7-min.js" type="text/javascript"></script>
     8<script src="js/jquery.jcarousel.min.js" type="text/javascript"></script>
     9
     10<link rel="stylesheet" href="css/jquery-ui.css" type="text/css" media="all" />
     11<link rel="stylesheet" href="css/skin.css" type="text/css" media="all" />
    1012 
    1113<script type="text/javascript">
    … …  
    1315    $( "#tab-set" ).tabs();
    1416  });
     17
     18  function mycarousel_initCallback(carousel)
     19  {
     20      // Disable autoscrolling if the user clicks the prev or next button.
     21      carousel.buttonNext.bind('click', function() {
     22          carousel.startAuto(0);
     23      });
     24 
     25      carousel.buttonPrev.bind('click', function() {
     26          carousel.startAuto(0);
     27      });
     28 
     29      // Pause autoscrolling if the user moves with the cursor over the clip.
     30      carousel.clip.hover(function() {
     31          carousel.stopAuto();
     32      }, function() {
     33          carousel.startAuto();
     34      });
     35  };
    1536
    1637  $(document).ready(function(){
    … …  
    2445      duration : 0,
    2546    });
     47    $('#mycarousel').jcarousel({
     48        auto: 1,
     49        wrap: 'last',
     50        initCallback: mycarousel_initCallback
     51    });
    2652  });
    2753</script>
    28 
    2954</head>
    3055<body>
    31 
    32 <div class="demo">
    3356
    3457<div id="tab-set">
    … …  
    3861    <li><a href="#noc">NOC</a></li>
    3962    <li><a href="#webcam">Live WebCams</a></li>
     63    <li><a href="#room1">Live Room1</a></li>
     64    <li><a href="#about">Join in! Use hashtag #occ2011</a></li>
    4065  </ul>
    4166  <div id="main">
    4267    <table>
    43     <caption><h3>Join in! Use hashtag #occ2011</h3></caption>
    4468    <tr><td colspan="3">
    4569    <!-- Start of Flickr Badge -->
    … …  
    5983</style>
    6084<style type="text/css">
    61 .titlec {
    62 font-size: small;
    63 }
    64 ul.videos li {
    65 float: left;
    66 width: 10em;
    67 margin-bottom: 1em;
    68 }
    69 ul.videos
    70 {
    71 margin-bottom: 1em;
    72 padding-left : 0em;
    73 margin-left: 0em;
    74 list-style: none;
    75 }
     85  .titlec {
     86  font-size: small;
     87  }
     88  ul.videos li {
     89  float: left;
     90  width: 10em;
     91  margin-bottom: 1em;
     92  }
     93  ul.videos
     94  {
     95  margin-bottom: 1em;
     96  padding-left : 0em;
     97  margin-left: 0em;
     98  list-style: none;
     99  }
    76100</style>
    77101
    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>
     102<table id="flickr_badge_uber_wrapper" cellpadding="0" cellspacing="10" border="0"><tr>
     103  <td>
     104    <a href="http://www.flickr.com" id="flickr_www">www.<strong style="color:#3993ff">flick<span style="color:#ff1c92">r</span></strong>.com</a>
     105    <table cellpadding="0" cellspacing="10" border="0" id="flickr_badge_wrapper">
     106      <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>
     107    </table>
     108  </td>
     109</tr></table>
    82110<!-- End of Flickr Badge -->
     111
    83112</td>
    84113</tr><tr>
    85114<td>
    86 <script src="http://widgets.twimg.com/j/2/widget.js"></script>
    87 <script>
    88 new TWTR.Widget({
    89 version: 2,
    90 type: 'search',
    91 search: '#occ2011',
    92 interval: 6000,
    93 title: 'Open Community Camp 2011',
    94 subject: 'http://opencommunitycamp.org',
    95 width: 300,
    96 height: 300,
    97 theme: {
    98 shell: {
    99   background: '#8ec1da',
    100   color: '#ffffff'
    101 },
    102 tweets: {
    103   background: '#ffffff',
    104   color: '#444444',
    105   links: '#1985b5'
    106 }
    107 },
    108 features: {
    109 scrollbar: true,
    110 loop: true,
    111 live: true,
    112 hashtags: true,
    113 timestamp: true,
    114 avatars: true,
    115 toptweets: true,
    116 behavior: 'all'
    117 }
    118 }).render().start();
    119 </script>
     115  <script src="http://widgets.twimg.com/j/2/widget.js"></script>
     116  <script type="text/javascript">
     117    new TWTR.Widget({
     118    version: 2,
     119    type: 'search',
     120    search: '#occ2011',
     121    interval: 6000,
     122    title: 'Open Community Camp 2011',
     123    subject: 'http://opencommunitycamp.org',
     124    width: 300,
     125    height: 300,
     126    theme: {
     127    shell: {
     128      background: '#8ec1da',
     129      color: '#ffffff'
     130    },
     131    tweets: {
     132      background: '#ffffff',
     133      color: '#444444',
     134      links: '#1985b5'
     135    }
     136    },
     137    features: {
     138    scrollbar: true,
     139    loop: true,
     140    live: true,
     141    hashtags: true,
     142    timestamp: true,
     143    avatars: true,
     144    toptweets: true,
     145    behavior: 'all'
     146    }
     147    }).render().start();
     148  </script>
    120149</td>
    121150<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>
     151  <div style="background-color: #00FFFF;width:647px;height:400px">
     152  <iframe src="http://webchat.freenode.net?channels=occ&uio=d4" width="647px" height="400px"></iframe>
     153  </div>
    125154</td>
    126155<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">
    133 function loadVideo(playerUrl, autoplay) {
    134 swfobject.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 
    140 function showMyVideos2(data) {
    141 var feed = data.feed;
    142 var entries = feed.entry || [];
    143 var html = ['<ul class="videos">'];
    144 for (var i = 0; i < entries.length; i++) {
    145 var entry = entries[i];
    146 var title = entry.title.$t.substr(0, 20);
    147 var thumbnailUrl = entries[i].media$group.media$thumbnail[0].url;
    148 var playerUrl = entries[i].media$group.media$content[0].url;
    149 html.push('<li onclick="loadVideo(\'', playerUrl, '\', true)">',
    150           '<span class="titlec">', title, '...</span><br /><img src="',
    151           thumbnailUrl, '" width="130" height="97"/>', '</span></li>');
    152 }
    153 html.push('</ul><br style="clear: left;"/>');
    154 document.getElementById('videos2').innerHTML = html.join('');
    155 if (entries.length > 0) {
    156 loadVideo(entries[0].media$group.media$content[0].url, false);
    157 }
    158 }
    159 </script>
    160 <script
    161 type="text/javascript"
    162 src="https://gdata.youtube.com/feeds/api/videos?strict=true&max-results=10&category=occ2011&alt=json-in-script&callback=showMyVideos2">
    163 </script>
     156  <div id="playerContainer" style="width: 320px; height: 260px;">
     157    <object id="player"></object>
     158  </div>
     159  <div id="videos2"></div>
     160  <script type="text/javascript" src="http://swfobject.googlecode.com/svn/trunk/swfobject/swfobject.js"></script>
     161  <script type="text/javascript">
     162    function loadVideo(playerUrl, autoplay) {
     163      swfobject.embedSWF(
     164        playerUrl + '&rel=1&border=0&fs=1&autoplay=' +
     165        (autoplay?1:0), 'player', '320', '260', '9.0.0', false,
     166        false, {allowfullscreen: 'true'});
     167      }
     168     
     169    function showMyVideos2(data) {
     170      var feed = data.feed;
     171      var entries = feed.entry || [];
     172      var html = ['<ul id="mycarousel" class="jcarousel-skin-tango videos">'];
     173      for (var i = 0; i < entries.length; i++) {
     174        var entry = entries[i];
     175        var title = entry.title.$t.substr(0, 20);
     176        var thumbnailUrl = entries[i].media$group.media$thumbnail[0].url;
     177        var playerUrl = entries[i].media$group.media$content[0].url;
     178        html.push('<li onclick="loadVideo(\'', playerUrl, '\', true)">',
     179                  '<img src="', thumbnailUrl, '" width="75" height="75" alt="',title ,'..."/>', '</li>');
     180      }
     181      html.push('</ul><br style="clear: left;"/>');
     182      document.getElementById('videos2').innerHTML = html.join('');
     183      if (entries.length > 0) {
     184        loadVideo(entries[0].media$group.media$content[0].url, false);
     185      }
     186    }
     187  </script>
     188  <script type="text/javascript" src="https://gdata.youtube.com/feeds/api/videos?strict=true&max-results=10&category=occ2011&alt=json-in-script&callback=showMyVideos2">
     189  </script>
    164190</td>
    165191</tr></table>
    … …  
    167193</div>
    168194<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>
     195  <table><tr><td>
     196    <iframe src="http://webchat.freenode.net?channels=occ&uio=d4" width="647" height="400"></iframe></td><td>
     197    <img src="http://live.occ2011.org:9999/cam4/video" />
     198  </td></tr></table>
    174199</div>
    175200<div id="noc">
    176 <iframe src="http://noc.occ2011.org" width="100%" height="100%"></iframe>
     201  <iframe src="http://noc.occ2011.org" width="100%" height="100%"></iframe>
    177202</div>
    178203<div id="webcam">
    179 <iframe src="http://live.occ2011.org" width="100%" height="100%"></iframe>
    180 </div>
    181 </div>
    182 
    183 </div>
     204  <iframe src="http://live.occ2011.org:9999/browser.html" width="100%" height="100%"></iframe>
     205</div>
     206<div id="room1">
     207  <iframe src="http://live.occ2011.org:9999/room1.html" width="100%" height="100%"></iframe>
     208</div>
     209</div>
     210
    184211
    185212
Note: See TracChangeset for help on using the changeset viewer.