Team:UCLondon/Templates/Navigationv3

From 2012e.igem.org

(Difference between revisions)
 
(80 intermediate revisions not shown)
Line 1: Line 1:
<html>
<html>
-
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
+
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
-
<div id="fb-root"></div>
+
-
<script>(function(d, s, id) {
+
-
  var js, fjs = d.getElementsByTagName(s)[0];
+
-
  if (d.getElementById(id)) return;
+
-
  js = d.createElement(s); js.id = id;
+
-
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
+
-
  fjs.parentNode.insertBefore(js, fjs);
+
-
}(document, 'script', 'facebook-jssdk'));</script>
+
   <div id="navigation">
   <div id="navigation">
Line 28: Line 20:
      
      
-
       <ul class="menu idk icons">
+
       <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>
         <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"></div></li></ul></li>
+
               <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="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>
+
         <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>
Line 50: Line 44:
   <style type="text/css">
   <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%;}
       #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%;}
       #content { background-color: transparent; border: none; padding: 0; margin: 0; width: 100%; height:100%;}
Line 66: Line 60:
         position: absolute;
         position: absolute;
         top: 0;
         top: 0;
-
         left: 0;
+
         //left: 0;
         width: 100%;
         width: 100%;
 +
        margin-left:auto;
 +
        margin-right:auto;
         color: rgb(199, 214, 217);  
         color: rgb(199, 214, 217);  
         height: 26px;
         height: 26px;
Line 79: Line 75:
         background-image: url(http://db.tt/73dOABGc);
         background-image: url(http://db.tt/73dOABGc);
         color: rgb(199, 214, 217);
         color: rgb(199, 214, 217);
-
         min-width:970px;
+
         //min-width:970px;
         }
         }
Line 157: Line 153:
             width:235px;
             width:235px;
       }
       }
-
 
+
 
-
 
+
      #twitter * {
-
     #twitter a:first-child {
+
          text-shadow: none !important;
-
             height: 47px;
+
      }
 +
     
 +
     #twitter li  a:first-child {
 +
             height: 77px;
             width: 205px;
             width: 205px;
             color: black;
             color: black;
Line 166: Line 165:
       }
       }
-
     #twitter a a {
+
     #twitter li a a {
-
             height: auto;
+
            color: blue;
 +
             height: 10px;
             width: auto;
             width: auto;
 +
            display: inline;
       }
       }
   
   
     #twitter li {
     #twitter li {
-
           height: 50px;
+
           height: 80px;
           width: 205px;
           width: 205px;
       }
       }
Line 218: Line 219:
   #fb {
   #fb {
             padding: 10px;
             padding: 10px;
-
             width: 130px;
+
             width: 87px;
   }
   }
    
    
Line 226: Line 227:
   }
   }
-
   .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; }
   .links li { padding-left: 1px; padding-right:1px; }
 +
 +
  //.idk { position:absolute; right: 300px; }
Line 258: Line 261:
   .tooltip:hover:before{
   .tooltip:hover:before{
     border:solid;
     border:solid;
-
     border-color:#111 transparent;
+
     border-color:rgba(0,0,0,.8) transparent;
     border-width:0 6px 6px 6px;
     border-width:0 6px 6px 6px;
     bottom:-2px;
     bottom:-2px;
Line 273: Line 276:
   </style>
   </style>
-
 
+
<script type="text/javascript">
-
  <script type="text/javascript">
+
       //$("#action").html( $(".left-menu > ul").children().has('a') );
       //$("#action").html( $(".left-menu > ul").children().has('a') );
Line 340: Line 342:
}
}
-
 
-
/* YOUTUBE CRAP */
 
-
 
-
 
-
function loadPlaylist(){
 
-
        $('#yt').html('');
 
-
 
-
      var _url = 'feed://gdata.youtube.com/feeds/api/playlists/PLtGCURRfxampHgpkl-tUkzSeZhItvY3_u?v=2&alt=json&callback=?';
 
-
      var videoURL= 'http://www.youtube.com/watch?v=';
 
-
 
-
        $.getJSON(_url,function(data){
 
-
                alert(data);
 
-
                var list_data="";
 
-
 
-
                $.each(data.feed.entry, function(i, item) {
 
-
                     
 
-
                      var feedTitle = item.title.$t;
 
-
                      var feedURL = item.link[1].href;
 
-
                      var fragments = feedURL.split("/");
 
-
                      var videoID = fragments[fragments.length - 2];
 
-
 
-
                      var url = videoURL + videoID;
 
-
                      var thumb = "http://img.youtube.com/vi/"+ videoID +"/default.jpg";
 
-
                      list_data += '<li><a href="'+ url +'" title="'+ feedTitle +'"><img alt="'+ feedTitle+'" src="'+ thumb +'"</a></li>';
 
-
               
 
-
              });
 
-
           
 
-
              $(list_data).appendTo("#yt");
 
-
      });
 
-
 
-
}
 
Line 377: Line 348:
function loadLatestTweet(){
function loadLatestTweet(){
     $('#twitter').html('');
     $('#twitter').html('');
-
     var numTweets = 2;
+
     var numTweets = 3;
     var _url = 'https://api.twitter.com/1/statuses/user_timeline/MBioinformatics.json?callback=?&count='+numTweets+'&include_rts=1';
     var _url = 'https://api.twitter.com/1/statuses/user_timeline/MBioinformatics.json?callback=?&count='+numTweets+'&include_rts=1';
     $.getJSON(_url,function(data){
     $.getJSON(_url,function(data){
Line 386: Line 357:
             tweet =  tweet.parseURL().parseUsername().parseHashtag();
             tweet =  tweet.parseURL().parseUsername().parseHashtag();
             //alert(tweet);
             //alert(tweet);
-
             $("#twitter").append('<li><a href="https://twitter.com/#!/MBioinformatics/status/'+data[i].id_str+'">'+tweet+'</a></li>');
+
             $("#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"});
         }
         }
     });
     });
Line 428: Line 401:
     loadPlaylist();
     loadPlaylist();
-
     loadLatestTweet();
+
     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);
 +
                    }
 +
                   
 +
                }
 +
    });
 +
}
 +
 +

Latest revision as of 15:48, 24 October 2012

Retrieved from "http://2012e.igem.org/wiki/index.php/Team:UCLondon/Templates/Navigationv3"