Team:Hong Kong-CUHK/testingtesting
From 2014.igem.org
(Difference between revisions)
m |
m |
||
(6 intermediate revisions not shown) | |||
Line 2: | Line 2: | ||
<head> | <head> | ||
- | |||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> | <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> | ||
- | <link href="css/bootstrap.min.css?action=raw&ctype=text/css" rel="stylesheet"> | + | <link href="https://2014.igem.org/Team:Hong_Kong-CUHK/css/bootstrap.min.css?action=raw&ctype=text/css" rel="stylesheet"> |
- | <link href="css/common.css | + | <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> | </head> | ||
+ | |||
+ | <style type="text/css"> | ||
+ | #board { | ||
+ | background-image: url('images/rail.png'); | ||
+ | background-size: 100% 100%; | ||
+ | width: 700px; | ||
+ | height: 700px; | ||
+ | } | ||
+ | .chess { | ||
+ | background-size: 100% 100%; | ||
+ | width: 100px; | ||
+ | height: 100px; | ||
+ | position: absolute; | ||
+ | cursor: pointer; | ||
+ | } | ||
+ | .profile-pic { | ||
+ | background-size: 100% 100%; | ||
+ | width: 100px; | ||
+ | height: 100px; | ||
+ | position: absolute; | ||
+ | cursor: pointer; | ||
+ | } | ||
+ | .profile-dialog { | ||
+ | position: absolute; | ||
+ | box-shadow: 1px 1px 10px 0 #ccc; | ||
+ | background: rgba(255, 255, 255, 0.7); | ||
+ | padding: 10px; | ||
+ | font-size: 20px; | ||
+ | display: none; | ||
+ | } | ||
+ | .member-wrapper:hover > .profile-dialog { | ||
+ | display: block; | ||
+ | } | ||
+ | #train { | ||
+ | width: 620px; | ||
+ | height: 430px; | ||
+ | position: absolute; | ||
+ | background-size: contain; | ||
+ | background-repeat: no-repeat; | ||
+ | background-image: url('images/train-index.png'); | ||
+ | } | ||
+ | </style> | ||
<body> | <body> | ||
- | <div id=" | + | |
+ | <div class="row"> | ||
+ | <div id="board" class="center-block"> | ||
+ | <div id="train"></div> | ||
+ | </div> | ||
+ | <div id="top-bar"></div> | ||
+ | </div> | ||
</body> | </body> | ||
- | <script | + | |
- | + | <script type="text/javascript"> | |
- | < | + | var content = { |
+ | menuItems: [{ | ||
+ | info: { | ||
+ | about: "Project", | ||
+ | background: "images/menu/project.png", | ||
+ | backgroundHover: "images/menu/project-hover.png" | ||
+ | }, | ||
+ | offset: { | ||
+ | top: 50, | ||
+ | left: 50 | ||
+ | }, | ||
+ | dialog: { | ||
+ | background: "#ff0000", | ||
+ | offset: { | ||
+ | top: 100, | ||
+ | left: 0 | ||
+ | } | ||
+ | } | ||
+ | }, { | ||
+ | info: { | ||
+ | about: "Team", | ||
+ | background: "images/menu/team.png", | ||
+ | backgroundHover: "images/menu/team-hover.png" | ||
+ | }, | ||
+ | offset: { | ||
+ | top: 150, | ||
+ | left: 300 | ||
+ | }, | ||
+ | dialog: { | ||
+ | background: "#ff0000", | ||
+ | offset: { | ||
+ | top: 0, | ||
+ | left: 100 | ||
+ | } | ||
+ | } | ||
+ | }, { | ||
+ | info: { | ||
+ | about: "Biobricks", | ||
+ | background: "images/menu/biobricks.png", | ||
+ | backgroundHover: "images/menu/biobricks-hover.png" | ||
+ | }, | ||
+ | offset: { | ||
+ | top: 500, | ||
+ | left: 180 | ||
+ | }, | ||
+ | dialog: { | ||
+ | background: "#ff0000", | ||
+ | offset: { | ||
+ | top: 0, | ||
+ | left: 100 | ||
+ | } | ||
+ | } | ||
+ | }, { | ||
+ | info: { | ||
+ | about: "Modelling", | ||
+ | background: "images/menu/modelling.png", | ||
+ | backgroundHover: "images/menu/modelling-hover.png" | ||
+ | }, | ||
+ | offset: { | ||
+ | top: 300, | ||
+ | left: 0 | ||
+ | }, | ||
+ | dialog: { | ||
+ | background: "#ff0000", | ||
+ | offset: { | ||
+ | top: 0, | ||
+ | left: 100 | ||
+ | } | ||
+ | } | ||
+ | }, { | ||
+ | info: { | ||
+ | about: "Documentation", | ||
+ | background: "images/menu/documentation.png", | ||
+ | backgroundHover: "images/menu/documentation-hover.png" | ||
+ | }, | ||
+ | offset: { | ||
+ | top: 600, | ||
+ | left: 400 | ||
+ | }, | ||
+ | dialog: { | ||
+ | background: "#ff0000", | ||
+ | offset: { | ||
+ | top: 0, | ||
+ | left: 100 | ||
+ | } | ||
+ | } | ||
+ | }, { | ||
+ | info: { | ||
+ | about: "Human Practice", | ||
+ | background: "images/menu/human-practice.png", | ||
+ | backgroundHover: "images/menu/human-practice-hover.png" | ||
+ | }, | ||
+ | offset: { | ||
+ | top: 70, | ||
+ | left: 500 | ||
+ | }, | ||
+ | dialog: { | ||
+ | background: "#ff0000", | ||
+ | offset: { | ||
+ | top: 0, | ||
+ | left: 100 | ||
+ | } | ||
+ | } | ||
+ | }, { | ||
+ | info: { | ||
+ | about: "Safety", | ||
+ | background: "images/menu/safety.png", | ||
+ | backgroundHover: "images/menu/safety-hover.png" | ||
+ | }, | ||
+ | offset: { | ||
+ | top: 300, | ||
+ | left: 550 | ||
+ | }, | ||
+ | dialog: { | ||
+ | background: "#ff0000", | ||
+ | offset: { | ||
+ | top: 0, | ||
+ | left: 100 | ||
+ | } | ||
+ | } | ||
+ | }, { | ||
+ | info: { | ||
+ | about: "Acknowledgement", | ||
+ | background: "images/menu/acknowledgement.png", | ||
+ | backgroundHover: "images/menu/acknowledgement-hover.png" | ||
+ | }, | ||
+ | offset: { | ||
+ | top: 425, | ||
+ | left: 600 | ||
+ | }, | ||
+ | dialog: { | ||
+ | background: "#ff0000", | ||
+ | offset: { | ||
+ | top: 0, | ||
+ | left: 100 | ||
+ | } | ||
+ | } | ||
+ | }] | ||
+ | }; | ||
+ | |||
+ | $(document).ready(function() { | ||
+ | |||
+ | $.each(content.menuItems, function(index, value) { | ||
+ | var wrapper = $('<div></div>') | ||
+ | .addClass('member-wrapper') | ||
+ | .css('position', 'relative') | ||
+ | .offset(value.offset); | ||
+ | |||
+ | var dialog = $('<div></div>') | ||
+ | .addClass('profile-dialog') | ||
+ | .css('font-size', '18') | ||
+ | //.css('background', value.dialog.background) | ||
+ | .text(value.info.about) | ||
+ | .offset(value.dialog.offset); | ||
+ | |||
+ | var chess = $('<div></div>') | ||
+ | .addClass('chess') | ||
+ | .data("index", index) | ||
+ | .css('background', "0px 0px/100% 100% url('" + value.info.background + "')") | ||
+ | .hover(function() { | ||
+ | $(this).css('background', "0px 0px/100% 100% url('" + value.info.backgroundHover + "')"); | ||
+ | }, function() { | ||
+ | $(this).css('background', "0px 0px/100% 100% url('" + value.info.background + "')"); | ||
+ | }) | ||
+ | .click(function() { | ||
+ | location.href = 'home.html?' + value['about']; | ||
+ | }); | ||
+ | |||
+ | wrapper.append(chess); | ||
+ | wrapper.append(dialog); | ||
+ | $("#board").append(wrapper); | ||
+ | }); | ||
+ | }); | ||
+ | </script> | ||
</html> | </html> |
Latest revision as of 18:03, 14 October 2014