Team:UCLondon/Templates/Navigationv3

From 2012e.igem.org

(Difference between revisions)
 
(32 intermediate revisions not shown)
Line 2: Line 2:
<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 30: 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>
Line 54: 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 70: 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 83: 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 161: 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 174: 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 223: Line 219:
   #fb {
   #fb {
             padding: 10px;
             padding: 10px;
-
             width: 130px;
+
             width: 87px;
   }
   }
    
    
Line 231: 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 263: 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 350: 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 361: 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"});
         }
         }
     });
     });

Latest revision as of 15:48, 24 October 2012