Team:Hong Kong-CUHK/home.html

From 2014.igem.org

(Difference between revisions)
m
 
(12 intermediate revisions not shown)
Line 27: Line 27:
     display: block;
     display: block;
     margin-left: 5px;
     margin-left: 5px;
-
margin-bottom: -50px;
+
    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: contain;
+
     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/e/ea/Cuhk-bg.png');
+
     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;
+
    opacity: 0.3;
-
filter: alpha(opacity=30); /* For IE8 and earlier */
+
    filter: alpha(opacity=30);
-
bottom: -580px;
+
    /* For IE8 and earlier */
 +
   
 +
    bottom: -580px;
}
}
#footer-box:hover {
#footer-box:hover {
-
opacity: 1;
+
    opacity: 1;
-
filter: alpha(opacity=100); /* For IE8 and earlier */
+
    filter: alpha(opacity=100);
 +
    /* For IE8 and earlier */
}
}
-
#globalWrapper{
+
#globalWrapper {
-
font-size:100%;
+
    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/thumb/5/5f/Cloud1.png/120px-Cloud1.png')",
+
     "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/thumb/5/5f/Cloud1.png/120px-Cloud1.png')",
+
     "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/thumb/5/5f/Cloud1.png/120px-Cloud1.png')",
+
     "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",
+
    "content": "safety.html",
     "link": "#group-local-rules",
     "link": "#group-local-rules",
-
     "background": "url('https://static.igem.org/mediawiki/2014/thumb/5/5f/Cloud1.png/120px-Cloud1.png')",
+
     "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": teamSubTopic,
+
     "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']
-
                     }, 1000, 'linear')
+
                     }, 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/f/f0/Menu-bg.jpg') ">
+
     <div id="widthWrapper">
-
        <div class="container">
+
        <div class="container-fluid">
-
            <div class="navbar-header">
+
            <div class="navbar" style="background-image: url('https://static.igem.org/mediawiki/2014/e/ea/Cuhk-bg.png') ">
-
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
+
                <div class="container">
-
                    <span class="icon-bar"></span>
+
                    <div class="navbar-header">
-
                    <span class="icon-bar"></span>
+
                        <a class="navbar-brand" herf="https://2014.igem.org/">
-
                    <span class="icon-bar"></span>
+
                            <img src="https://static.igem.org/mediawiki/2014/3/30/Igemlogocuhk.png" height="50px" align="right">
-
                </button>
+
                        </a>
-
               
+
                        <br>
-
<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>
+
                        <a class="navbar-brand" href="https://2014.igem.org/Team:Hong_Kong-CUHK">
-
<br>
+
                            <img src="https://static.igem.org/mediawiki/2014/thumb/4/49/CUHKwikiLogo.png/600px-CUHKwikiLogo.png" height="130">
-
<a class="navbar-brand" href="https://2014.igem.org/Team:Hong_Kong-CUHK">
+
                        </a>
-
                    <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>
+
                        <div class="row">
-
            <div class="col-md-10">
+
                            <div id="train">
-
                <div class="row">
+
                                <div id="train-link"></div>
-
                    <div id="train">
+
                                <div id="train-sublink"></div>
-
                        <div id="train-link"></div>
+
                            </div>
-
                        <div id="train-sublink"></div>
+
                        </div>
                     </div>
                     </div>
                 </div>
                 </div>
 +
                <div id="navbar-separator" style="background-color: #ffffff;"></div>
             </div>
             </div>
-
</div>
+
         </div>
-
         <div id="navbar-separator" style="background-color: #ffffff;"></div>
+
     </div>
     </div>
     <div id="traffic-light">
     <div id="traffic-light">
         <a href="#">&nbsp;</a>
         <a href="#">&nbsp;</a>
     </div>
     </div>
-
     <div class="row">
+
     <div class="container">
-
 
+
         <div class="row">
-
         <div id="wrapper" class="center-block">
+
             <div id="wiki-content"></div>
-
 
+
-
             <div id="content-wrapper" class="col-xs-10 col-xs-offset-1">
+
-
                <div id="wiki-content"></div>
+
-
            </div>
+
         </div>
         </div>
-
        <div id="top-bar"></div>
 
     </div>
     </div>
</body>
</body>
</html>
</html>

Latest revision as of 18:18, 22 November 2014