Team:UCLondon/Templates/Navigationv3

From 2012e.igem.org

(Difference between revisions)
 
(47 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>
         <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>  
+
                <!-- <ul class="hidden-menu" id="yt"><li><a href="#">item</a></li></ul> -->
         </li>
         </li>
Line 52: 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 68: 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 81: 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 159: Line 153:
             width:235px;
             width:235px;
       }
       }
-
 
+
 
-
 
+
      #twitter * {
 +
          text-shadow: none !important;
 +
      }
 +
     
     #twitter li  a:first-child {
     #twitter li  a:first-child {
-
             height: 47px;
+
             height: 77px;
             width: 205px;
             width: 205px;
             color: black;
             color: black;
Line 172: Line 169:
             height: 10px;
             height: 10px;
             width: auto;
             width: auto;
 +
            display: inline;
       }
       }
   
   
     #twitter li {
     #twitter li {
-
           height: 50px;
+
           height: 80px;
           width: 205px;
           width: 205px;
       }
       }
Line 221: Line 219:
   #fb {
   #fb {
             padding: 10px;
             padding: 10px;
-
             width: 130px;
+
             width: 87px;
   }
   }
    
    
Line 229: 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 261: 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 276: 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 349: 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 360: Line 359:
             $("#twitter").append('<li><a class="what" href="https://twitter.com/#!/MBioinformatics/status/'+data[i].id_str+'"></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").append(tweet);
-
             $("#twitter li").last().children("a").children("a").css("color", "blue");
+
             $("#twitter li").last().children("a").children("a").css({"color": "blue", "display":"inline"});
         }
         }
     });
     });
Line 402: Line 401:
     loadPlaylist();
     loadPlaylist();
-
     loadLatestTweet();
+
     loadLatestTweet();      
-
   
+
-
     
+
});
});
Line 421: Line 418:
                 success:    function(data){
                 success:    function(data){
                     var list_data="";
                     var list_data="";
-
         
+
                     //alert(data.feed);
-
                     $.each(data.feed.entry, function(i, item) {
+
                   
-
                              var feedTitle = item.title.$t;
+
                    for(var i = 0; i< data.feed.entry.length; i++){
-
                              var feedURL = item.link[1].href;
+
                        var item = data.feed.entry[i];
-
                              var fragments = feedURL.split("/");
+
                        //alert(item);
-
                              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");
+
                 }
                 }
     });
     });

Latest revision as of 15:48, 24 October 2012

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