"
Team:Hong Kong-CUHK/home.html
From 2014.igem.org
(Difference between revisions)
m (cloud) |
m |
||
| (14 intermediate revisions not shown) | |||
| Line 27: | Line 27: | ||
display: block; | display: block; | ||
margin-left: 5px; | margin-left: 5px; | ||
| - | + | margin-bottom: -50px; | |
} | } | ||
#traffic-light a:hover { | #traffic-light a:hover { | ||
| Line 44: | Line 44: | ||
background-image: url('https://static.igem.org/mediawiki/2014/thumb/b/b8/Rail-line.png/800px-Rail-line.png'); | background-image: url('https://static.igem.org/mediawiki/2014/thumb/b/b8/Rail-line.png/800px-Rail-line.png'); | ||
background-repeat: repeat-x; | background-repeat: repeat-x; | ||
| - | background-size: | + | background-size: auto 100%; |
} | } | ||
#train { | #train { | ||
| Line 54: | Line 54: | ||
background-image: url('https://static.igem.org/mediawiki/2014/thumb/f/ff/Train.png/800px-Train.png'); | background-image: url('https://static.igem.org/mediawiki/2014/thumb/f/ff/Train.png/800px-Train.png'); | ||
background-size: contain; | background-size: contain; | ||
| + | background-position-y: 85px; | ||
background-repeat: no-repeat; | background-repeat: no-repeat; | ||
} | } | ||
| Line 59: | Line 60: | ||
display: inline-block; | display: inline-block; | ||
position: absolute; | position: absolute; | ||
| - | border: 1px solid red; | + | /*border: 1px solid red;*/ |
} | } | ||
body { | body { | ||
background-color: #FFFFFF; | background-color: #FFFFFF; | ||
| - | background-image: url('https://static.igem.org/mediawiki/2014/ | + | background-image: url('https://static.igem.org/mediawiki/2014/f/f0/Menu-bg.jpg'); |
} | } | ||
| + | #widthWrapper { | ||
| + | min-width: 1200px; | ||
| + | } | ||
| + | .container-fluid, | ||
.container { | .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; | margin-left: 20px; | ||
| + | min-width: 1170px; | ||
| + | } | ||
| + | .content-wrapper { | ||
| + | top: 0px; | ||
| + | left: 0px; | ||
| + | position: relative; | ||
| + | width: 100%; | ||
} | } | ||
#footer-box { | #footer-box { | ||
| - | + | opacity: 0.3; | |
| - | + | filter: alpha(opacity=30); | |
| - | + | /* For IE8 and earlier */ | |
| + | |||
| + | bottom: -580px; | ||
} | } | ||
#footer-box:hover { | #footer-box:hover { | ||
| - | + | opacity: 1; | |
| - | + | filter: alpha(opacity=100); | |
| + | /* For IE8 and earlier */ | ||
} | } | ||
| - | #globalWrapper{ | + | #globalWrapper { |
| - | + | font-size: 100%; | |
} | } | ||
| - | h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { | + | h1, |
| - | font-family: inherit; | + | h2, |
| - | font-weight: 500; | + | h3, |
| - | line-height: 1.1; | + | h4, |
| - | color: inherit; | + | h5, |
| - | border-bottom: 0px solid #aaa; | + | 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"> | <script type="text/javascript"> | ||
| + | var generalSubTopic = [{ | ||
| + | "id": "link-offical", | ||
| + | "background": "url('https://static.igem.org/mediawiki/2014/5/5f/Cloud1.png')", | ||
| + | "width": 100, | ||
| + | "height": 45, | ||
| + | "offset": { | ||
| + | "left": 150, | ||
| + | "top": 10, | ||
| + | } | ||
| + | }, { | ||
| + | "id": "link-ours", | ||
| + | "background": "url('https://static.igem.org/mediawiki/2014/5/5f/Cloud1.png')", | ||
| + | "width": 100, | ||
| + | "height": 45, | ||
| + | "offset": { | ||
| + | "left": 400, | ||
| + | "top": 10, | ||
| + | } | ||
| + | }]; | ||
| + | |||
var teamSubTopic = [{ | var teamSubTopic = [{ | ||
"id": "link-offical", | "id": "link-offical", | ||
"content": "team1.html", | "content": "team1.html", | ||
| - | + | "background": "url('https://static.igem.org/mediawiki/2014/5/5f/Cloud1.png')", | |
"width": 50, | "width": 50, | ||
"height": 45, | "height": 45, | ||
| Line 103: | Line 167: | ||
"id": "link-ours", | "id": "link-ours", | ||
"content": "acknowledgement.html", | "content": "acknowledgement.html", | ||
| - | + | "background": "url('https://static.igem.org/mediawiki/2014/5/5f/Cloud1.png')", | |
"width": 0, | "width": 0, | ||
"height": 0, | "height": 0, | ||
| Line 116: | Line 180: | ||
"content": "safety.html", | "content": "safety.html", | ||
"link": "#group-training", | "link": "#group-training", | ||
| - | "background": "url('https://static.igem.org/mediawiki/2014 | + | "background": "url('https://static.igem.org/mediawiki/2014/5/5f/Cloud1.png')", |
"width": 100, | "width": 100, | ||
"height": 45, | "height": 45, | ||
| Line 125: | Line 189: | ||
}, { | }, { | ||
"id": "link-ours", | "id": "link-ours", | ||
| - | + | "content": "safety.html", | |
"link": "#group-local-rules", | "link": "#group-local-rules", | ||
| - | "background": "url('https://static.igem.org/mediawiki/2014 | + | "background": "url('https://static.igem.org/mediawiki/2014/5/5f/Cloud1.png')", |
"width": 100, | "width": 100, | ||
"height": 45, | "height": 45, | ||
| Line 139: | Line 203: | ||
"id": "link-home", | "id": "link-home", | ||
"content": "home-1.html?action=raw&ctype=text/html", | "content": "home-1.html?action=raw&ctype=text/html", | ||
| + | "subtopic": generalSubTopic, | ||
"width": 135, | "width": 135, | ||
"height": 130, | "height": 130, | ||
| Line 148: | Line 213: | ||
"id": "link-team", | "id": "link-team", | ||
"content": "team.html?action=raw&ctype=text/html", | "content": "team.html?action=raw&ctype=text/html", | ||
| - | "subtopic": | + | "subtopic": generalSubTopic, |
"width": 90, | "width": 90, | ||
"height": 75, | "height": 75, | ||
| Line 158: | Line 223: | ||
"id": "link-project", | "id": "link-project", | ||
"content": "project.html?action=raw&ctype=text/html", | "content": "project.html?action=raw&ctype=text/html", | ||
| + | "subtopic": generalSubTopic, | ||
"width": 90, | "width": 90, | ||
"height": 75, | "height": 75, | ||
| Line 167: | Line 233: | ||
"id": "link-biobricks", | "id": "link-biobricks", | ||
"content": "biobricks.html?action=raw&ctype=text/html", | "content": "biobricks.html?action=raw&ctype=text/html", | ||
| + | "subtopic": generalSubTopic, | ||
"width": 90, | "width": 90, | ||
"height": 75, | "height": 75, | ||
| Line 176: | Line 243: | ||
"id": "link-modelling", | "id": "link-modelling", | ||
"content": "modelling.html?action=raw&ctype=text/html", | "content": "modelling.html?action=raw&ctype=text/html", | ||
| + | "subtopic": generalSubTopic, | ||
"width": 90, | "width": 90, | ||
"height": 75, | "height": 75, | ||
| Line 185: | Line 253: | ||
"id": "link-human-practice", | "id": "link-human-practice", | ||
"content": "humanpractice.html?action=raw&ctype=text/html", | "content": "humanpractice.html?action=raw&ctype=text/html", | ||
| + | "subtopic": generalSubTopic, | ||
"width": 90, | "width": 90, | ||
"height": 75, | "height": 75, | ||
| Line 204: | Line 273: | ||
"id": "link-documentation", | "id": "link-documentation", | ||
"content": "documentation.html?action=raw&ctype=text/html", | "content": "documentation.html?action=raw&ctype=text/html", | ||
| + | "subtopic": generalSubTopic, | ||
"width": 102, | "width": 102, | ||
"height": 75, | "height": 75, | ||
| Line 213: | Line 283: | ||
"id": "link-acknowledgement", | "id": "link-acknowledgement", | ||
"content": "acknowledgement.html?action=raw&ctype=text/html", | "content": "acknowledgement.html?action=raw&ctype=text/html", | ||
| + | "subtopic": generalSubTopic, | ||
"width": 121, | "width": 121, | ||
"height": 75, | "height": 75, | ||
| Line 226: | Line 297: | ||
}; | }; | ||
| - | function makelink(picset, wrapper, isAnimated, callbackClick, callbackHover) { | + | function makelink(picset, wrapper, defaultPage, isAnimated, callbackClick, callbackHover) { |
| - | + | ||
var deferreds = []; | var deferreds = []; | ||
$.each(picset, function(index, value) { | $.each(picset, function(index, value) { | ||
| Line 259: | Line 329: | ||
if (value['background'] != null) { | if (value['background'] != null) { | ||
link = link.css('background', value['background']); | link = link.css('background', value['background']); | ||
| + | link = link.css('background-repeat', 'no-repeat'); | ||
} | } | ||
| Line 272: | Line 343: | ||
.animate({ | .animate({ | ||
top: value['offset']['top'] | top: value['offset']['top'] | ||
| - | }, | + | }, 250, 'linear') |
.animate({ | .animate({ | ||
left: value['offset']['left'] | left: value['offset']['left'] | ||
| Line 281: | Line 352: | ||
wrapper.append(link); | 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() { | $(document).ready(function() { | ||
| + | var page = getQueryString('page'); | ||
| - | makelink(wikiContent, $('#train-link'), false, function(value) { | + | makelink(wikiContent, $('#train-link'), page, false, function(value) { |
if (value['loadedContent'] != null) | if (value['loadedContent'] != null) | ||
$('#wiki-content').html(value['loadedContent']); | $('#wiki-content').html(value['loadedContent']); | ||
| Line 311: | Line 415: | ||
$("#traffic-light").hide(); | $("#traffic-light").hide(); | ||
} | } | ||
| + | |||
| + | $('.content-wrapper').css({ | ||
| + | 'left': Math.min($(this).scrollLeft(), $('.navbar').width() - getWindowWidth()) | ||
| + | }); | ||
| + | e.preventDefault(); | ||
}); | }); | ||
}); | }); | ||
| Line 316: | Line 425: | ||
<body> | <body> | ||
| - | <div class="navbar" style="background-image: url('https://static.igem.org/mediawiki/2014/ | + | <div id="widthWrapper"> |
| - | + | <div class="container-fluid"> | |
| - | + | <div class="navbar" style="background-image: url('https://static.igem.org/mediawiki/2014/e/ea/Cuhk-bg.png') "> | |
| - | + | <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> | </div> | ||
| + | <div id="navbar-separator" style="background-color: #ffffff;"></div> | ||
</div> | </div> | ||
| - | + | </div> | |
| - | + | ||
</div> | </div> | ||
<div id="traffic-light"> | <div id="traffic-light"> | ||
<a href="#"> </a> | <a href="#"> </a> | ||
</div> | </div> | ||
| - | <div class=" | + | <div class="container"> |
| - | + | <div class="row"> | |
| - | <div | + | <div id="wiki-content"></div> |
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
</div> | </div> | ||
| - | |||
</div> | </div> | ||
</body> | </body> | ||
</html> | </html> | ||
Latest revision as of 18:18, 22 November 2014
