"
Team:Hong Kong-CUHK/project.html
From 2014.igem.org
(Difference between revisions)
(proj page name updated) |
|||
| Line 9: | Line 9: | ||
} | } | ||
#btn-next a { | #btn-next a { | ||
| - | background-image: url('https://static.igem.org/mediawiki/2014/ | + | background-image: url('https://static.igem.org/mediawiki/2014/1/1e/Btn-Next.png'); |
background-size: contain; | background-size: contain; | ||
background-repeat: no-repeat; | background-repeat: no-repeat; | ||
| - | background-position: center bottom; | + | background-position: center bottom; |
| - | + | margin-bottom: -40px; | |
width: 50px; | width: 50px; | ||
height: 50px; | height: 50px; | ||
| Line 20: | Line 20: | ||
#btn-next a:hover { | #btn-next a:hover { | ||
background-image: url('https://static.igem.org/mediawiki/2014/1/1e/Btn-Next.png'); | background-image: url('https://static.igem.org/mediawiki/2014/1/1e/Btn-Next.png'); | ||
| - | + | width: 119px; | |
height: 200px; | height: 200px; | ||
} | } | ||
</style> | </style> | ||
| + | |||
| + | <div id="projectChoice" class="container"> | ||
| + | <div class="row row-centered"> | ||
| + | <a id="projectAEntry" class="col-xs-6 col-centered" href="#"> | ||
| + | <img src="http://placehold.it/300x300" class="img-responsive center-block"> | ||
| + | </a> | ||
| + | <a id="projectBEntry" class="col-xs-6 col-centered" href="#"> | ||
| + | <img src="http://placehold.it/300x300" class="img-responsive center-block"> | ||
| + | </a> | ||
| + | </div> | ||
| + | </div> | ||
<div id="project-content"></div> | <div id="project-content"></div> | ||
| - | <div id="btn-next"> | + | <div id="btn-next" style="display: none;"> |
<a href="#"></a> | <a href="#"></a> | ||
</div> | </div> | ||
<script type="text/javascript"> | <script type="text/javascript"> | ||
| - | var | + | var projectAContent = [{ |
"content": "project-1.html" | "content": "project-1.html" | ||
}, { | }, { | ||
| Line 41: | Line 52: | ||
}, { | }, { | ||
"content": "project-5.html" | "content": "project-5.html" | ||
| + | }]; | ||
| + | |||
| + | var projectBContent = [{ | ||
| + | "content": "project-1.html" | ||
}, { | }, { | ||
| - | "content": "project- | + | "content": "project-2.html" |
| + | }, { | ||
| + | "content": "project-3.html" | ||
| + | }, { | ||
| + | "content": "project-4.html" | ||
| + | }, { | ||
| + | "content": "project-5.html" | ||
}]; | }]; | ||
| + | function loadContent(projectContent) { | ||
var deferreds = []; | var deferreds = []; | ||
$.each(projectContent, function(index, value) { | $.each(projectContent, function(index, value) { | ||
deferreds.push( | deferreds.push( | ||
$.get(value['content'], function(data) { | $.get(value['content'], function(data) { | ||
| - | value[' | + | value['loadedContent'] = data; |
}) | }) | ||
); | ); | ||
| Line 56: | Line 78: | ||
$.when.apply(null, deferreds).done(function() { | $.when.apply(null, deferreds).done(function() { | ||
projectCurrentPageIndex = 0; | projectCurrentPageIndex = 0; | ||
| - | $('#project-content').html(projectContent[projectCurrentPageIndex][' | + | $('#project-content').html(projectContent[projectCurrentPageIndex]['loadedContent']); |
$('#btn-next').click(function() { | $('#btn-next').click(function() { | ||
if (projectCurrentPageIndex + 1 < projectContent.length) { | if (projectCurrentPageIndex + 1 < projectContent.length) { | ||
projectCurrentPageIndex++; | projectCurrentPageIndex++; | ||
| - | $('#project-content').html(projectContent[projectCurrentPageIndex][' | + | $('#project-content').html(projectContent[projectCurrentPageIndex]['loadedContent']); |
} | } | ||
}); | }); | ||
| + | }); | ||
| + | } | ||
| + | |||
| + | $('#projectAEntry').click(function(e){ | ||
| + | $('#projectChoice').hide(); | ||
| + | $('#btn-next').show(); | ||
| + | loadContent(projectAContent); | ||
| + | }); | ||
| + | |||
| + | $('#projectBEntry').click(function(e){ | ||
| + | $('#projectChoice').hide(); | ||
| + | $('#btn-next').show(); | ||
| + | loadContent(projectBContent); | ||
}); | }); | ||
</script> | </script> | ||
Revision as of 02:43, 18 October 2014
<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;
} </style>
<a id="projectAEntry" class="col-xs-6 col-centered" href="#">
<img src="http://placehold.it/300x300" class="img-responsive center-block">
</a>
<a id="projectBEntry" class="col-xs-6 col-centered" href="#">
<img src="http://placehold.it/300x300" class="img-responsive center-block">
</a>
<script type="text/javascript"> var projectAContent = [{
"content": "project-1.html"
}, {
"content": "project-2.html"
}, {
"content": "project-3.html"
}, {
"content": "project-4.html"
}, {
"content": "project-5.html"
}];
var projectBContent = [{
"content": "project-1.html"
}, {
"content": "project-2.html"
}, {
"content": "project-3.html"
}, {
"content": "project-4.html"
}, {
"content": "project-5.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){
$('#projectChoice').hide();
$('#btn-next').show();
loadContent(projectAContent);
});
$('#projectBEntry').click(function(e){
$('#projectChoice').hide();
$('#btn-next').show();
loadContent(projectBContent);
}); </script>
