Team:Hong Kong-CUHK/project.html

From 2014.igem.org

(Difference between revisions)
(Created page with "<style type="text/css"> - →Next Button: #btn-next { position: fixed; right: 10px; bottom: 50px; z-index: 999; } #btn-next a { background-image: url('http:/...")
m
 
(11 intermediate revisions not shown)
Line 9: Line 9:
}
}
#btn-next a {
#btn-next a {
-
     background-image: url('https://static.igem.org/mediawiki/2014/a/1e/Btn-Next.png');
+
     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;
+
    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;
+
    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 class="row row-centered">
 +
        <a id="projectAEntry" class="col-xs-6 col-centered" href="#" />
 +
        <a id="projectBEntry" class="col-xs-6 col-centered" href="#" />
 +
    </div>
 +
</div>
 +
</center>
<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 projectContent = [{
+
var projectAContent = [{
-
     "content": "project-abstract.html"
+
     "content": "projectA-background.html?action=raw&ctype=text/html"
}, {
}, {
-
     "content": "project-overview.html"
+
     "content": "projectA-biobricks.html?action=raw&ctype=text/html"
}, {
}, {
-
     "content": "project-voltage-switch.html"
+
     "content": "modelling.html?action=raw&ctype=text/html"
}, {
}, {
-
     "content": "project-pah-degradation.html"
+
     "content": "projectA-result.html?action=raw&ctype=text/html"
}, {
}, {
-
     "content": "project-results.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-future-application.html"
+
     "content": "project-5.html?action=raw&ctype=text/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['content'] = data;
+
             value['loadedContent'] = data;
         })
         })
     );
     );
Line 56: Line 88:
$.when.apply(null, deferreds).done(function() {
$.when.apply(null, deferreds).done(function() {
     projectCurrentPageIndex = 0;
     projectCurrentPageIndex = 0;
-
     $('#project-content').html(projectContent[projectCurrentPageIndex]['content']);
+
     $('#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]['content']);
+
             $('#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>
</script>

Latest revision as of 18:23, 4 January 2015

<style type="text/css"> /* Next Button */

  1. btn-next { 
   position: fixed;
   right: 10px;
   bottom: 50px;
   z-index: 999;

}

  1. 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;

}

  1. btn-next a:hover { 
   background-image: url('https://static.igem.org/mediawiki/2014/1/1e/Btn-Next.png');
   width: 119px;
   height: 200px;

}

  1. 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; }

  1. projectAEntry:hover {

background-image: url('https://static.igem.org/mediawiki/2014/thumb/1/10/ABCDE_system_button2.png/600px-ABCDE_system_button2.png'); }

  1. 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; }

  1. 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>

Retrieved from "http://2014.igem.org/Team:Hong_Kong-CUHK/project.html"