Team:Hong Kong-CUHK/home.html
From 2014.igem.org
(Difference between revisions)
m |
|||
Line 1: | Line 1: | ||
+ | <html> | ||
+ | |||
+ | <head> | ||
+ | <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> | ||
+ | <link href="https://2014.igem.org/Team:Hong_Kong-CUHK/css/bootstrap.min.css?action=raw&ctype=text/css" rel="stylesheet"> | ||
+ | <link href="https://2014.igem.org/Team:Hong_Kong-CUHK/css/common.css?action=raw&ctype=text/css" rel="stylesheet"> | ||
+ | <script src="https://2014.igem.org/Team:Hong_Kong-CUHK/js/jquery-1.11.1.min.js?action=raw&ctype=text/javascript"></script> | ||
+ | <script src="https://2014.igem.org/Team:Hong_Kong-CUHK/js/bootstrap.min.js?action=raw&ctype=text/javascript"></script> | ||
+ | <script src="https://2014.igem.org/Team:Hong_Kong-CUHK/js/common.js?action=raw&ctype=text/javascript"></script> | ||
+ | </head> | ||
+ | |||
<style type="text/css"> | <style type="text/css"> | ||
- | + | /* Traffic Light */ | |
+ | |||
+ | #traffic-light { | ||
position: fixed; | position: fixed; | ||
+ | left: 10px; | ||
+ | bottom: 50px; | ||
+ | z-index: 999; | ||
} | } | ||
- | / | + | #traffic-light a { |
- | + | background-image: url('https://static.igem.org/mediawiki/2014/thumb/c/c3/Trafficlightred.png/293px-Trafficlightred.png'); | |
- | . | + | background-size: contain; |
- | + | background-repeat: no-repeat; | |
- | margin- | + | width: 119px; |
- | margin-bottom: | + | height: 200px; |
+ | display: block; | ||
+ | margin-left: 5px; | ||
+ | margin-bottom: -50px; | ||
} | } | ||
- | + | #traffic-light a:hover { | |
- | + | background-image: url('https://static.igem.org/mediawiki/2014/thumb/a/af/Trafficlightgreen.png/293px-Trafficlightgreen.png'); | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | /* | + | /* nav bar */ |
- | . | + | .navbar-nav > li > a { |
- | padding | + | padding: 0px; |
- | + | background-repeat: no-repeat !important; | |
- | + | background-size: 100% 100%; | |
- | + | background-attachment: fixed; | |
} | } | ||
- | + | #navbar-separator { | |
- | + | height: 30px; | |
- | + | background-image: url('https://static.igem.org/mediawiki/2014/thumb/b/b8/Rail-line.png/800px-Rail-line.png'); | |
- | + | background-repeat: repeat-x; | |
- | + | background-size: auto 100%; | |
- | + | ||
- | + | ||
- | background- | + | |
- | + | ||
} | } | ||
- | + | #train { | |
- | + | width: 1000px; | |
- | + | height: 220px; | |
- | + | border: 0; | |
- | . | + | padding: 0; |
- | + | margin-top: -30px; | |
+ | background-image: url('https://static.igem.org/mediawiki/2014/thumb/f/ff/Train.png/800px-Train.png'); | ||
+ | background-size: contain; | ||
+ | background-repeat: no-repeat; | ||
} | } | ||
- | + | #train a { | |
- | + | display: inline-block; | |
- | + | position: absolute; | |
- | + | /*border: 1px solid red;*/ | |
- | + | ||
- | + | ||
} | } | ||
- | + | body { | |
- | + | background-color: #FFFFFF; | |
- | + | background-image: url('https://static.igem.org/mediawiki/2014/e/ea/Cuhk-bg.png'); | |
- | + | ||
} | } | ||
- | + | #widthWrapper { | |
- | + | min-width: 1200px; | |
- | + | ||
- | + | ||
} | } | ||
- | . | + | .container-fluid, |
- | + | .container { | |
+ | padding: 0; | ||
} | } | ||
- | . | + | .row { |
- | + | margin: 0; | |
+ | } | ||
+ | .navbar-header { | ||
+ | margin-left: 0 !important; | ||
+ | margin-right: 0 !important; | ||
+ | float: left !important; | ||
+ | } | ||
+ | .navbar-brand { | ||
+ | margin-left: 0px !important; | ||
+ | } | ||
+ | .navbar { | ||
+ | min-width: 1200px; | ||
+ | overflow: hidden; | ||
+ | } | ||
+ | .navbar .container { | ||
+ | margin-left: 20px; | ||
+ | min-width: 1170px; | ||
+ | } | ||
+ | .content-wrapper { | ||
+ | top: 0px; | ||
+ | left: 0px; | ||
+ | position: relative; | ||
+ | width: 100%; | ||
+ | } | ||
+ | #footer-box { | ||
+ | opacity: 0.3; | ||
+ | filter: alpha(opacity=30); | ||
+ | /* For IE8 and earlier */ | ||
+ | |||
+ | bottom: -580px; | ||
+ | } | ||
+ | #footer-box:hover { | ||
+ | opacity: 1; | ||
+ | filter: alpha(opacity=100); | ||
+ | /* For IE8 and earlier */ | ||
+ | } | ||
+ | #globalWrapper { | ||
+ | font-size: 100%; | ||
+ | } | ||
+ | h1, | ||
+ | h2, | ||
+ | h3, | ||
+ | h4, | ||
+ | h5, | ||
+ | h6, | ||
+ | .h1, | ||
+ | .h2, | ||
+ | .h3, | ||
+ | .h4, | ||
+ | .h5, | ||
+ | .h6 { | ||
+ | font-family: inherit; | ||
+ | font-weight: 500; | ||
+ | line-height: 1.1; | ||
+ | color: inherit; | ||
+ | border-bottom: 0px solid #aaa; | ||
} | } | ||
</style> | </style> | ||
- | < | + | <script type="text/javascript"> |
- | + | var teamSubTopic = [{ | |
- | + | "id": "link-offical", | |
- | + | "content": "team1.html", | |
- | + | "background": "url('https://static.igem.org/mediawiki/2014/5/5f/Cloud1.png')", | |
- | + | "width": 50, | |
- | + | "height": 45, | |
- | + | "offset": { | |
- | + | "left": 50, | |
- | + | "top": 50, | |
- | + | } | |
- | + | }, { | |
- | + | "id": "link-ours", | |
- | + | "content": "acknowledgement.html", | |
- | + | "background": "url('https://static.igem.org/mediawiki/2014/5/5f/Cloud1.png')", | |
- | + | "width": 0, | |
- | + | "height": 0, | |
- | + | "offset": { | |
- | + | "left": 100, | |
- | + | "top": 20, | |
- | + | } | |
- | + | }]; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | var safetySubTopic = [{ | |
- | + | "id": "link-offical", | |
- | + | "content": "safety.html", | |
- | + | "link": "#group-training", | |
- | + | "background": "url('https://static.igem.org/mediawiki/2014/5/5f/Cloud1.png')", | |
- | + | "width": 100, | |
- | + | "height": 45, | |
- | + | "offset": { | |
- | + | "left": 150, | |
- | + | "top": 10, | |
- | + | } | |
- | + | }, { | |
- | + | "id": "link-ours", | |
- | + | "content": "safety.html", | |
- | + | "link": "#group-local-rules", | |
- | + | "background": "url('https://static.igem.org/mediawiki/2014/5/5f/Cloud1.png')", | |
- | + | "width": 100, | |
- | + | "height": 45, | |
- | + | "offset": { | |
- | + | "left": 400, | |
- | + | "top": 10, | |
- | + | } | |
+ | }]; | ||
- | + | var wikiContent = [{ | |
- | + | "id": "link-home", | |
- | + | "content": "home-1.html?action=raw&ctype=text/html", | |
- | + | "width": 135, | |
- | + | "height": 130, | |
- | + | "offset": { | |
- | + | "left": 0, | |
- | + | "top": 60, | |
- | + | } | |
- | + | }, { | |
+ | "id": "link-team", | ||
+ | "content": "team.html?action=raw&ctype=text/html", | ||
+ | "subtopic": teamSubTopic, | ||
+ | "width": 90, | ||
+ | "height": 75, | ||
+ | "offset": { | ||
+ | "left": 135, | ||
+ | "top": 115, | ||
+ | } | ||
+ | }, { | ||
+ | "id": "link-project", | ||
+ | "content": "project.html?action=raw&ctype=text/html", | ||
+ | "width": 90, | ||
+ | "height": 75, | ||
+ | "offset": { | ||
+ | "left": 233, | ||
+ | "top": 115, | ||
+ | } | ||
+ | }, { | ||
+ | "id": "link-biobricks", | ||
+ | "content": "biobricks.html?action=raw&ctype=text/html", | ||
+ | "width": 90, | ||
+ | "height": 75, | ||
+ | "offset": { | ||
+ | "left": 332, | ||
+ | "top": 115, | ||
+ | } | ||
+ | }, { | ||
+ | "id": "link-modelling", | ||
+ | "content": "modelling.html?action=raw&ctype=text/html", | ||
+ | "width": 90, | ||
+ | "height": 75, | ||
+ | "offset": { | ||
+ | "left": 431, | ||
+ | "top": 115, | ||
+ | } | ||
+ | }, { | ||
+ | "id": "link-human-practice", | ||
+ | "content": "humanpractice.html?action=raw&ctype=text/html", | ||
+ | "width": 90, | ||
+ | "height": 75, | ||
+ | "offset": { | ||
+ | "left": 530, | ||
+ | "top": 115, | ||
+ | } | ||
+ | }, { | ||
+ | "id": "link-safety", | ||
+ | "content": "safety.html?action=raw&ctype=text/html", | ||
+ | "subtopic": safetySubTopic, | ||
+ | "width": 90, | ||
+ | "height": 75, | ||
+ | "offset": { | ||
+ | "left": 628, | ||
+ | "top": 115, | ||
+ | } | ||
+ | }, { | ||
+ | "id": "link-documentation", | ||
+ | "content": "documentation.html?action=raw&ctype=text/html", | ||
+ | "width": 102, | ||
+ | "height": 75, | ||
+ | "offset": { | ||
+ | "left": 731, | ||
+ | "top": 115, | ||
+ | } | ||
+ | }, { | ||
+ | "id": "link-acknowledgement", | ||
+ | "content": "acknowledgement.html?action=raw&ctype=text/html", | ||
+ | "width": 121, | ||
+ | "height": 75, | ||
+ | "offset": { | ||
+ | "left": 843, | ||
+ | "top": 115, | ||
+ | } | ||
+ | }]; | ||
- | + | var offsetChimney = { | |
- | + | "left": 30, | |
- | + | "top": 30 | |
+ | }; | ||
- | + | function makelink(picset, wrapper, defaultPage, isAnimated, callbackClick, callbackHover) { | |
- | + | var deferreds = []; | |
+ | $.each(picset, function(index, value) { | ||
+ | if (value['content'] != null) { | ||
+ | deferreds.push( | ||
+ | $.get(value['content'], function(data) { | ||
+ | value['loadedContent'] = data; | ||
+ | }) | ||
+ | ); | ||
+ | } | ||
+ | }); | ||
- | + | wrapper.empty(); | |
- | + | ||
- | + | $.when.apply(null, deferreds).done(function() { | |
- | + | $.each(picset, function(index, value) { | |
- | + | var link = $('<a></a>'); | |
- | + | link = link.width(value['width']).height(value['height']) | |
- | + | .css('-webkit-transform', 'translateZ(0)'); | |
- | + | link.click(function() { | |
- | + | callbackClick(value); | |
- | + | }); | |
- | + | link.mouseenter(function() { | |
- | + | callbackHover(value); | |
- | + | }); | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | if (value['id'] != null) { | |
- | + | link = link.attr('id', value['id']); | |
- | + | } | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | if (value['background'] != null) { | |
- | + | link = link.css('background', value['background']); | |
- | + | } | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | if (value['link'] != null) { | |
- | + | link = link.attr('href', value['link']); | |
- | + | } else { | |
- | + | link = link.attr('href', '#'); | |
- | + | } | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | if (isAnimated) { | |
- | + | link = link.offset(offsetChimney); | |
- | + | link.stop() | |
- | + | .animate({ | |
- | + | top: value['offset']['top'] | |
- | + | }, 1000, 'linear') | |
- | + | .animate({ | |
- | + | left: value['offset']['left'] | |
- | + | }, 1000, 'linear'); | |
- | + | } else { | |
- | + | link = link.offset(value['offset']); | |
- | + | } | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | wrapper.append(link); | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | if (value['id'] == defaultPage) { | |
- | + | callbackHover(value); | |
- | + | callbackClick(value); | |
- | + | } | |
- | + | }); | |
- | + | }); | |
- | + | } | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | function getQueryString(key) { | |
- | + | var query = window.location.search.substring(1); | |
- | + | var vars = query.split("&"); | |
- | + | for (var i = 0; i < vars.length; i++) { | |
- | + | var pair = vars[i].split("="); | |
- | + | if (pair[0] == key) { | |
- | + | return pair[1]; | |
- | + | } | |
- | + | } | |
- | + | return null; | |
- | + | } | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
+ | function getWindowWidth() { | ||
+ | if (document.documentElement) { | ||
+ | if (document.documentElement.clientWidth) { | ||
+ | return document.documentElement.clientWidth; | ||
+ | } | ||
+ | } | ||
+ | if (document.body) { | ||
+ | if(document.body.clientWidth) { | ||
+ | return document.body.clientWidth; | ||
+ | } | ||
+ | } | ||
+ | return 0; | ||
+ | } | ||
- | + | $(document).ready(function() { | |
- | + | var page = getQueryString('page'); | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
+ | makelink(wikiContent, $('#train-link'), page, false, function(value) { | ||
+ | if (value['loadedContent'] != null) | ||
+ | $('#wiki-content').html(value['loadedContent']); | ||
+ | }, function(value) { | ||
+ | if (value['subtopic'] != null) { | ||
+ | makelink(value['subtopic'], $('#train-sublink'), true, function(subValue) { | ||
+ | if (value['loadedContent'] != null) { | ||
+ | $('#wiki-content').html(value['loadedContent']); | ||
+ | location.hash = subValue['link']; | ||
+ | } | ||
+ | }, function(value) { | ||
- | + | }); | |
- | + | } | |
- | + | }); | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
+ | $("#traffic-light").hide(); | ||
+ | $(window).scroll(function(e) { | ||
+ | var scrollTop = $(window).scrollTop(); | ||
+ | if (scrollTop > 0) { | ||
+ | $("#traffic-light").show(); | ||
+ | } else { | ||
+ | $("#traffic-light").hide(); | ||
+ | } | ||
- | < | + | $('.content-wrapper').css({ |
- | </ | + | 'left': Math.min($(this).scrollLeft(), $('.navbar').width() - getWindowWidth()) |
- | + | }); | |
- | + | e.preventDefault(); | |
+ | }); | ||
+ | }); | ||
+ | </script> | ||
+ | |||
+ | <body> | ||
+ | <div id="widthWrapper"> | ||
+ | <div class="container-fluid"> | ||
+ | <div class="navbar" style="background-image: url('https://static.igem.org/mediawiki/2014/f/f0/Menu-bg.jpg') "> | ||
+ | <div class="container"> | ||
+ | <div class="navbar-header"> | ||
+ | <a class="navbar-brand" herf="https://2014.igem.org/"> | ||
+ | <img src="https://static.igem.org/mediawiki/2014/3/30/Igemlogocuhk.png" height="50px" align="right"> | ||
+ | </a> | ||
+ | <br> | ||
+ | <a class="navbar-brand" href="https://2014.igem.org/Team:Hong_Kong-CUHK"> | ||
+ | <img src="https://static.igem.org/mediawiki/2014/thumb/4/49/CUHKwikiLogo.png/600px-CUHKwikiLogo.png" height="130"> | ||
+ | </a> | ||
+ | |||
+ | </div> | ||
+ | <div class="col-xs-10"> | ||
+ | <div class="row"> | ||
+ | <div id="train"> | ||
+ | <div id="train-link"></div> | ||
+ | <div id="train-sublink"></div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div id="navbar-separator" style="background-color: #ffffff;"></div> | ||
+ | </div> | ||
</div> | </div> | ||
+ | </div> | ||
+ | <div id="traffic-light"> | ||
+ | <a href="#"> </a> | ||
+ | </div> | ||
+ | <div class="container-fluid content-wrapper"> | ||
+ | <div class="row"> | ||
+ | <div id="wiki-content"></div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </body> | ||
- | + | </html> | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + |
Revision as of 23:59, 17 October 2014