"
Team:UCLondon/Templates/Navigationv3
From 2012e.igem.org
(Difference between revisions)
| (158 intermediate revisions not shown) | |||
| Line 1: | Line 1: | ||
<html> | <html> | ||
| - | + | <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> | |
<div id="navigation"> | <div id="navigation"> | ||
| Line 8: | Line 8: | ||
<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/Opportunity">The Opportunity</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/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/Team">Team</a></li> | ||
<li><a href="https://2012e.igem.org/wiki/index.php/Team:UCLondon/Source_Data">Source Data</a></li> | <li><a href="https://2012e.igem.org/wiki/index.php/Team:UCLondon/Source_Data">Source Data</a></li> | ||
| - | |||
</ul> | </ul> | ||
<ul class="menu icons"> | <ul class="menu icons"> | ||
| - | <li><a href="https://www.facebook.com/pages/Morph-Bioinformatics/492347404117952"><img class="soc" src="http://db.tt/ | + | <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=" | + | |
| - | <li><a href=" | + | </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&send=false&layout=button_count&width=140&show_faces=false&action=like&colorscheme=light&font=arial&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> | ||
<ul class="menu links"> | <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="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> | <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> | ||
| Line 31: | 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 47: | 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 60: | 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: | + | //min-width:970px; |
} | } | ||
#navigation a{ | #navigation a{ | ||
display: block; | display: block; | ||
| - | padding-left: | + | padding-left: 12px; |
| - | padding-right: | + | padding-right: 12px; |
padding-top: 2px | padding-top: 2px | ||
padding-bottom:2px; | padding-bottom:2px; | ||
| Line 106: | Line 121: | ||
.icons li { padding-left:15px;} | .icons li { padding-left:15px;} | ||
| - | .soc { top: | + | .soc { top: 8px; position:absolute; } |
.hidden-menu { | .hidden-menu { | ||
| Line 117: | Line 132: | ||
z-index: 2147483647; | z-index: 2147483647; | ||
width: 140px; | width: 140px; | ||
| - | top: | + | top: 28px; |
//left: 10px; | //left: 10px; | ||
border: solid 1px #b4b4b4; | border: solid 1px #b4b4b4; | ||
| Line 133: | Line 148: | ||
} | } | ||
| + | |||
| + | |||
| + | #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 158: | 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-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) ); | background-image: -webkit-linear-gradient(top,rgb(153, 153, 153), rgb(179, 179, 179) ); | ||
| Line 166: | Line 210: | ||
background-image: linear-gradient(top, rgb(153, 153, 153), rgb(179, 179, 179) ); | background-image: linear-gradient(top, rgb(153, 153, 153), rgb(179, 179, 179) ); | ||
| - | color: | + | color: white; |
border-top: solid 1px #f8f8f8; | border-top: solid 1px #f8f8f8; | ||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); | box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); | ||
| - | + | 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: | + | .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 206: | Line 261: | ||
.tooltip:hover:before{ | .tooltip:hover:before{ | ||
border:solid; | border:solid; | ||
| - | border-color: | + | 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 221: | Line 276: | ||
</style> | </style> | ||
| - | + | <script type="text/javascript"> | |
| - | + | ||
//$("#action").html( $(".left-menu > ul").children().has('a') ); | //$("#action").html( $(".left-menu > ul").children().has('a') ); | ||
| Line 287: | Line 341: | ||
}); | }); | ||
} | } | ||
| + | |||
| + | |||
| + | |||
| + | /* TWITTER CRAP */ | ||
function loadLatestTweet(){ | function loadLatestTweet(){ | ||
| - | var _url = 'https://api.twitter.com/1/statuses/user_timeline/MBioinformatics.json?callback=?&count=1'; | + | $('#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){ | $.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 307: | Line 400: | ||
$('body').on('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); | ||
| + | } | ||
| + | |||
| + | } | ||
| + | }); | ||
| + | } | ||
| + | |||
| + | |||
Latest revision as of 15:48, 24 October 2012
