@@ Line 1: / Line 1: @@
 <html>
+<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
     <div id="navigation">
         <ul class="menu">
                <li><a href="https://2012e.igem.org/wiki/index.php/Team:UCLondon">Home</a></li>
                <li><a href="https://2012e.igem.org/wiki/index.php/Team:UCLondon/Opportunity">The Opportunity</a></li>
-              <li><a href="https://2012e.igem.org/wiki/index.php/Team:UCLondon/Mission">The Mission</a></li>
                <li><a href="https://2012e.igem.org/wiki/index.php/Team:UCLondon/Summary">Executive Summary</a></li>
+              <li><a href="https://2012e.igem.org/wiki/index.php/Team:UCLondon/Human_Practices">Human Practices</a></li>
                <li><a href="https://2012e.igem.org/wiki/index.php/Team:UCLondon/Team">Team</a></li>
                <li><a href="https://2012e.igem.org/wiki/index.php/Team:UCLondon/Source_Data">Source Data</a></li>
@@ Line 12: / Line 15: @@
        <ul class="menu icons">
-              <li><a href="#"><img src="http://db.tt/KQemyPjm" height="15"/></a><ul class="hidden-menu" id="facebook"><li><a href="#">item</a></li></ul> </li>
+          <li><a href="#"><img src="http://db.tt/KQemyPjm" height="15"/></a><ul class="hidden-menu" id="action"><li><a href="#">item</a></li></ul></li>
-              <li><a href="#"><img src="http://db.tt/KQemyPjm" height="15"/></a><ul class="hidden-menu" id="twitter"><li><a href="#">item</a></li></ul> </li>
-              <li><a href="#"><img src="http://db.tt/KQemyPjm" height="15"/></a><ul class="hidden-menu" id="action"><li><a href="#">item</a></li></ul> </li>
+      </ul>
+      <ul class="menu icons idk">
+         <li><a href="https://www.facebook.com/pages/Morph-Bioinformatics/492347404117952"><img class="soc" src="http://db.tt/vIPbjfJA" width="28"/></a>
+               <ul class="hidden-menu" id="fb"><li><div class="fb-like" data-href="https://www.facebook.com/pages/Morph-Bioinformatics/492347404117952" data-send="true" data-layout="button_count" data-show-faces="true" data-font="arial"><iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fpages%2FMorph-Bioinformatics%2F492347404117952&amp;send=false&amp;layout=button_count&amp;width=140&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font=arial&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:140px; height:21px;" allowTransparency="true"></iframe></div></li></ul></li>
+         <li><a href="https://twitter.com/MBioinformatics/"><img class="soc" src="http://db.tt/oKzcUb4i" width="28"/></a><ul class="hidden-menu" id="twitter"><li><a href="#">item</a></li></ul> </li>
+         <li><a href="http://www.youtube.com/channel/UCbm54Pc1_CRQQtHKiB7q-9A"><img class="soc" src="http://db.tt/n8gy1Mao" width="28"/></a>
+                <!-- <ul class="hidden-menu" id="yt"><li><a href="#">item</a></li></ul> -->
+         </li>
        </ul>
       <ul class="menu links">
          <li class="hov"><a class="nothing tooltip" href="#" udit="Contact Us"><img src="http://db.tt/Zw3GxxwW" height="30" /></a></li>
                <li class="hov"><a class="tooltip" href="https://igem.org/Main_Page" udit="iGEM"><img src="https://static.igem.org/mediawiki/2011/d/de/IGEM_basic_Logo_stylized.png" height="30"  /></a></li>
       </ul>
     </div><!-- end navigation div-->
+   <div id="twitter-feed"></div>
    <style type="text/css">
-       //body { background-color: white;  }
+       //body { background-color: white; overflow-x:hidden;  }
        #globalWrapper { background-color: transparent; border: none; margin: 0; padding: 0; width: 100%; height:100%;}
        #content { background-color: transparent; border: none; padding: 0; margin: 0; width: 100%; height:100%;}
@@ Line 43: / Line 60: @@
           position: absolute;
           top: 0;
-          left: 0;
+          //left: 0;
           width: 100%;
+         margin-left:auto;
+         margin-right:auto;
           color: rgb(199, 214, 217);
           height: 26px;
@@ Line 56: / Line 75: @@
           background-image: url(http://db.tt/73dOABGc);
           color: rgb(199, 214, 217);
+         //min-width:970px;
           }
        #navigation a{
           display: block;
-          padding-left: 15px;
+          padding-left: 12px;
-          padding-right: 15px;
+          padding-right: 12px;
           padding-top: 2px
           padding-bottom:2px;
@@ Line 86: / Line 106: @@
              margin: 0;
              padding:0;
-             margin-left: 100px;
+             margin-left: 20px;
              list-style-type: none;
              list-style-image: none;
@@ Line 94: / Line 114: @@
       .icons{
-             position: absolute;
+             //position: absolute;
              right:300px;
              margin-left: 100px;
        }
+      .icons li { padding-left:15px;}
+      .soc { top: 8px; position:absolute; }
       .hidden-menu {
@@ Line 108: / Line 132: @@
               z-index: 2147483647;
               width: 140px;
-              top: 18px;
+              top: 28px;
               //left: 10px;
               border: solid 1px #b4b4b4;
@@ Line 125: / Line 149: @@
        }
-      .hidden-menu:before {
-           border:solid;
-           border-color:rgba(255, 255, 255, 0.8);
-           border-width:0 8px 8px 8px;
-           top:-2px;
-           content:"";
-           display:block;
-           left:12%;
-           position:absolute;
-           z-index:2147483647;
+      #twitter {
+            width:235px;
         }
+       #twitter * {
+           text-shadow: none !important;
+       }
+    #twitter li  a:first-child {
+            height: 77px;
+            width: 205px;
+            color: black;
+            text-shadow: none;
+       }
+    #twitter li a a {
+            color: blue;
+            height: 10px;
+            width: auto;
+            display: inline;
+       }
+    #twitter li {
+           height: 80px;
+           width: 205px;
+       }
@@ Line 162: / Line 202: @@
        }
-     .hidden-menu li:hover > a {
+     .hidden-menu li:hover > a, #twitter li:hover > a {
               background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(153, 153, 153)), to(rgb(179, 179, 179) ) );
               background-image: -webkit-linear-gradient(top,rgb(153, 153, 153), rgb(179, 179, 179) );
@@ Line 170: / Line 210: @@
               background-image: linear-gradient(top, rgb(153, 153, 153), rgb(179, 179, 179) );
-              color: #444;
+              color: white;
               border-top: solid 1px #f8f8f8;
               box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
-              text-shadow: rgb(0, 0, 0) 1px 1px 2px;
+             text-shadow: rgb(0, 0, 0) 1px 1px 2px;
     }
+   #fb {
+            padding: 10px;
+            width: 87px;
+   }
+   .fb-like {
+            width: 90%;
+            margin:auto;
+   }
-   .links  { position: absolute ; top: 5px; right:20px; background-color: rgba(249, 249, 249, 0.2); border-radius: 3px; height:33px; width:145px; }
+   .links  { position: absolute ; top: 5px; right:20px; background-color: rgba(249, 249, 249, 0.2); border-radius: 3px; height:33px; width:135px; }
    .links li { padding-left: 1px; padding-right:1px; }
+  //.idk { position:absolute; right: 300px; }
@@ Line 210: / Line 261: @@
    .tooltip:hover:before{
      border:solid;
-     border-color:#111 transparent;
+     border-color:rgba(0,0,0,.8) transparent;
      border-width:0 6px 6px 6px;
      bottom:-2px;
@@ Line 225: / Line 276: @@
     </style>
+ <script type="text/javascript">
-  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
-  <script type="text/javascript">
         //$("#action").html( $(".left-menu > ul").children().has('a') );
@@ Line 251: / Line 300: @@
                }, 100 );
   });
@@ Line 292: / Line 342: @@
 }
+/* TWITTER CRAP */
+function loadLatestTweet(){
+    $('#twitter').html('');
+    var numTweets = 3;
+    var _url = 'https://api.twitter.com/1/statuses/user_timeline/MBioinformatics.json?callback=?&count='+numTweets+'&include_rts=1';
+    $.getJSON(_url,function(data){
+    for(var i = 0; i< data.length; i++){
+            var tweet = data[i].text;
+            var created = parseDate(data[i].created_at);
+            var createdDate = created.getDate()+'-'+(created.getMonth()+1)+'-'+created.getFullYear()+' at '+created.getHours()+':'+created.getMinutes();
+            tweet =  tweet.parseURL().parseUsername().parseHashtag();
+            //alert(tweet);
+            $("#twitter").append('<li><a class="what" href="https://twitter.com/#!/MBioinformatics/status/'+data[i].id_str+'"></a></li>');
+            $("#twitter li").last().children("a").append(tweet);
+            $("#twitter li").last().children("a").children("a").css({"color": "blue", "display":"inline"});
+        }
+    });
+}
+//twitter loading
+//Twitter Parsers
+String.prototype.parseURL = function() {
+    return this.replace(/[A-Za-z]+:\/\/[A-Za-z0-9-_]+\.[A-Za-z0-9-_:%&~\?\/.=]+/g, function(url) {
+        return url.link(url);
+    });
+};
+String.prototype.parseUsername = function() {
+    return this.replace(/[@]+[A-Za-z0-9-_]+/g, function(u) {
+        var username = u.replace("@","")
+        return u.link("http://twitter.com/"+username);
+    });
+};
+String.prototype.parseHashtag = function() {
+    return this.replace(/[#]+[A-Za-z0-9-_]+/g, function(t) {
+        var tag = t.replace("#","%23")
+        return t.link("http://search.twitter.com/search?q="+tag);
+    });
+};
+function parseDate(str) {
+    var v=str.split(' ');
+    return new Date(Date.parse(v[1]+" "+v[2]+", "+v[5]+" "+v[3]+" UTC"));
+}
@@ Line 303: / Line 399: @@
     $('body').off('click', '#close-box', closeContactBox);
     $('body').on('click', '#close-box', closeContactBox);
+    loadPlaylist();
+    loadLatestTweet();
 });
+/* YOUTUBE CRAP */
+function loadPlaylist(){
+        $('#yt').html('');
+       var _pURL = 'https://gdata.youtube.com/feeds/api/playlists/PLtGCURRfxampHgpkl-tUkzSeZhItvY3_u?v=2&alt=json';
+       $.ajax({
+                url:        _pURL,
+                dataType:   "jsonp", // <== JSON-P request
+                success:    function(data){
+                     var list_data="";
+                     //alert(data.feed);
+                    for(var i = 0; i< data.feed.entry.length; i++){
+                         var item = data.feed.entry[i];
+                         //alert(item);
+                    }
+                }
+     });
+}

Team:UCLondon/Templates/Navigationv3

From 2012e.igem.org

Latest revision as of 15:48, 24 October 2012