Team:Hong Kong-CUHK/home.html
From 2014.igem.org
(Difference between revisions)
m |
m |
||
(8 intermediate revisions not shown) | |||
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 63: | Line 64: | ||
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 { | ||
Line 104: | Line 134: | ||
<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", | ||
Line 153: | 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 162: | 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 172: | 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 181: | 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 190: | 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 199: | 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 218: | 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 227: | 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 272: | 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 285: | 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 313: | Line 371: | ||
} | } | ||
return null; | 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; | ||
} | } | ||
Line 342: | Line 415: | ||
$("#traffic-light").hide(); | $("#traffic-light").hide(); | ||
} | } | ||
+ | |||
+ | $('.content-wrapper').css({ | ||
+ | 'left': Math.min($(this).scrollLeft(), $('.navbar').width() - getWindowWidth()) | ||
+ | }); | ||
+ | e.preventDefault(); | ||
}); | }); | ||
}); | }); | ||
Line 347: | 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> | ||
<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