"
Team:Hong Kong-CUHK/project.html
From 2014.igem.org
(Difference between revisions)
m |
|||
| (8 intermediate revisions not shown) | |||
| Line 22: | Line 22: | ||
width: 119px; | width: 119px; | ||
height: 200px; | height: 200px; | ||
| + | } | ||
| + | #projectAEntry{ | ||
| + | background: url('https://static.igem.org/mediawiki/2014/thumb/6/65/ABCDE_system_button.png/600px-ABCDE_system_button.png') no-repeat center; | ||
| + | background-size: contain; | ||
| + | height: 400px; | ||
| + | } | ||
| + | #projectAEntry:hover { | ||
| + | background-image: url('https://static.igem.org/mediawiki/2014/thumb/1/10/ABCDE_system_button2.png/600px-ABCDE_system_button2.png'); | ||
| + | } | ||
| + | #projectBEntry{ | ||
| + | background: url('https://static.igem.org/mediawiki/2014/thumb/9/99/ABCDE_button.png/600px-ABCDE_button.png') no-repeat center; | ||
| + | background-size: contain; | ||
| + | height: 400px; | ||
| + | } | ||
| + | #projectBEntry:hover { | ||
| + | background-image: url('https://static.igem.org/mediawiki/2014/thumb/3/3d/ABCDE_button2.png/600px-ABCDE_button2.png'); | ||
} | } | ||
</style> | </style> | ||
| - | + | <center> | |
<div id="projectChoice" class="container"> | <div id="projectChoice" class="container"> | ||
<div class="row row-centered"> | <div class="row row-centered"> | ||
| - | <a id="projectAEntry" class="col-xs-6 col-centered" href="#" | + | <a id="projectAEntry" class="col-xs-6 col-centered" href="#" /> |
| - | + | <a id="projectBEntry" class="col-xs-6 col-centered" href="#" /> | |
| - | + | ||
| - | <a id="projectBEntry" class="col-xs-6 col-centered" href="#" | + | |
| - | + | ||
| - | + | ||
</div> | </div> | ||
</div> | </div> | ||
| - | + | </center> | |
<div id="project-content"></div> | <div id="project-content"></div> | ||
<div id="btn-next" style="display: none;"> | <div id="btn-next" style="display: none;"> | ||
| Line 43: | Line 55: | ||
<script type="text/javascript"> | <script type="text/javascript"> | ||
var projectAContent = [{ | var projectAContent = [{ | ||
| - | "content": " | + | "content": "projectA-background.html?action=raw&ctype=text/html" |
}, { | }, { | ||
| - | "content": " | + | "content": "projectA-biobricks.html?action=raw&ctype=text/html" |
}, { | }, { | ||
| - | "content": " | + | "content": "modelling.html?action=raw&ctype=text/html" |
}, { | }, { | ||
| - | "content": " | + | "content": "projectA-result.html?action=raw&ctype=text/html" |
}, { | }, { | ||
| - | "content": " | + | "content": "projectA-further.html?action=raw&ctype=text/html" |
}]; | }]; | ||
| Line 60: | Line 72: | ||
}, { | }, { | ||
"content": "project-3.html?action=raw&ctype=text/html" | "content": "project-3.html?action=raw&ctype=text/html" | ||
| - | |||
| - | |||
}, { | }, { | ||
"content": "project-5.html?action=raw&ctype=text/html" | "content": "project-5.html?action=raw&ctype=text/html" | ||
| Line 90: | Line 100: | ||
$('#projectAEntry').click(function(e){ | $('#projectAEntry').click(function(e){ | ||
| + | console.log('A'); | ||
$('#projectChoice').hide(); | $('#projectChoice').hide(); | ||
$('#btn-next').show(); | $('#btn-next').show(); | ||
| Line 96: | Line 107: | ||
$('#projectBEntry').click(function(e){ | $('#projectBEntry').click(function(e){ | ||
| + | console.log('B'); | ||
$('#projectChoice').hide(); | $('#projectChoice').hide(); | ||
$('#btn-next').show(); | $('#btn-next').show(); | ||
Latest revision as of 18:23, 4 January 2015
<style type="text/css"> /* Next Button */
- btn-next {
position: fixed; right: 10px; bottom: 50px; z-index: 999;
}
- btn-next a {
background-image: url('https://static.igem.org/mediawiki/2014/1/1e/Btn-Next.png');
background-size: contain;
background-repeat: no-repeat;
background-position: center bottom;
margin-bottom: -40px;
width: 50px;
height: 50px;
display: block;
}
- btn-next a:hover {
background-image: url('https://static.igem.org/mediawiki/2014/1/1e/Btn-Next.png');
width: 119px;
height: 200px;
}
- projectAEntry{
background: url('https://static.igem.org/mediawiki/2014/thumb/6/65/ABCDE_system_button.png/600px-ABCDE_system_button.png') no-repeat center; background-size: contain; height: 400px; }
- projectAEntry:hover {
background-image: url('https://static.igem.org/mediawiki/2014/thumb/1/10/ABCDE_system_button2.png/600px-ABCDE_system_button2.png'); }
- projectBEntry{
background: url('https://static.igem.org/mediawiki/2014/thumb/9/99/ABCDE_button.png/600px-ABCDE_button.png') no-repeat center; background-size: contain; height: 400px; }
- projectBEntry:hover {
background-image: url('https://static.igem.org/mediawiki/2014/thumb/3/3d/ABCDE_button2.png/600px-ABCDE_button2.png'); } </style>
<a id="projectAEntry" class="col-xs-6 col-centered" href="#" />
<a id="projectBEntry" class="col-xs-6 col-centered" href="#" />
<script type="text/javascript"> var projectAContent = [{
"content": "projectA-background.html?action=raw&ctype=text/html"
}, {
"content": "projectA-biobricks.html?action=raw&ctype=text/html"
}, {
"content": "modelling.html?action=raw&ctype=text/html"
}, {
"content": "projectA-result.html?action=raw&ctype=text/html"
}, {
"content": "projectA-further.html?action=raw&ctype=text/html"
}];
var projectBContent = [{
"content": "project-1.html?action=raw&ctype=text/html"
}, {
"content": "project-2.html?action=raw&ctype=text/html"
}, {
"content": "project-3.html?action=raw&ctype=text/html"
}, {
"content": "project-5.html?action=raw&ctype=text/html"
}];
function loadContent(projectContent) { var deferreds = []; $.each(projectContent, function(index, value) {
deferreds.push(
$.get(value['content'], function(data) {
value['loadedContent'] = data;
})
);
});
$.when.apply(null, deferreds).done(function() {
projectCurrentPageIndex = 0;
$('#project-content').html(projectContent[projectCurrentPageIndex]['loadedContent']);
$('#btn-next').click(function() {
if (projectCurrentPageIndex + 1 < projectContent.length) {
projectCurrentPageIndex++;
$('#project-content').html(projectContent[projectCurrentPageIndex]['loadedContent']);
}
});
}); }
$('#projectAEntry').click(function(e){
console.log('A');
$('#projectChoice').hide();
$('#btn-next').show();
loadContent(projectAContent);
});
$('#projectBEntry').click(function(e){
console.log('B');
$('#projectChoice').hide();
$('#btn-next').show();
loadContent(projectBContent);
}); </script>
