Team:Hong Kong-CUHK/team.html

From 2014.igem.org

<style type="text/css">

1. board {

   background-image: url('images/board.png');
   background-size: 100% 100%;
   width: 700px;
   height: 700px;

} .chess {

   background-size: 100% 100%;
   width: 40px;
   height: 40px;
   position: absolute;
   cursor: pointer;

} .profile-pic {

   background-size: 100% 100%;
   width: 100px;
   height: 100px;
   position: absolute;
   cursor: pointer;

} .profile-dialog {

   width: 300px;
   height: 300px;
   position: absolute;
   display: none;

} .member-wrapper:hover > .profile-dialog {

   display: block;

} .photo {

   width: 83px;
   height: 250px;
   background-position: center;
   background-size: auto 100%;
   background-repeat: no-repeat;
   -webkit-filter: grayscale(80%);
   margin: 0;

} .photo:hover {

   -webkit-filter: grayscale(0%);

} .photo.show {

   width: 250px;
   height: 250px;
   -webkit-filter: grayscale(0%);

} .member-name {

   text-transform: uppercase;
   margin: 0;

} .member-role {

   font-style: italic;

} .member-about {

   text-align: justify;
   text-justify: distribute;

} </style> <style type="text/css"> .profile {

   background-size: cover;
   background-repeat: no-repeat;
   background-position: center;
   display: inline-block;
   width: 180px;
   height: 180px;
   border-radius: 20%;
   position: absolute;
   cursor: default;
   box-shadow: inset 0 0 0 0 rgba(200, 95, 66, 0.4), inset 0 0 0 16px rgba(255, 255, 255, 0.6), 0 1px 2px rgba(0, 0, 0, 0.1);
   -webkit-transition: all 0.4s ease-in-out;
   -moz-transition: all 0.4s ease-in-out;
   -o-transition: all 0.4s ease-in-out;
   -ms-transition: all 0.4s ease-in-out;
   transition: all 0.4s ease-in-out;

} .profile:hover {

   box-shadow: inset 0 0 0 110px rgba(200, 95, 66, 0.4), inset 0 0 0 16px rgba(255, 255, 255, 0.8), 0 1px 2px rgba(0, 0, 0, 0.1);

} .profile:hover .boxAbout {

   opacity: 1;
   -webkit-transform: scale(1);
   -moz-transform: scale(1);
   -o-transform: scale(1);
   -ms-transform: scale(1);
   transform: scale(1);

} .description {

   display: block;
   position: absolute;
   top: 27px;
   width: 420px;
   height: 330px;
   background: rgba(255, 255, 255, 0.701961);

} .row-0-col-0 {

   top: 7px;
   left: 520px;

} .row-0-col-1 {

   top: 7px;
   left: 750px;

} .row-1-col-0 {

   top: 207px;
   left: 520px;

} .row-1-col-1 {

   top: 207px;
   left: 750px;

} </style> <style type="text/css"> .boxAbout {

   position: absolute;
   width: 100%;
   height: 100%;
   text-align: center center;
   border-radius: 50%;
   opacity: 0;
   -webkit-transition: all 0.4s ease-in-out;
   -moz-transition: all 0.4s ease-in-out;
   -o-transition: all 0.4s ease-in-out;
   -ms-transition: all 0.4s ease-in-out;
   transition: all 0.4s ease-in-out;
   -webkit-transform: scale(0);
   -moz-transform: scale(0);
   -o-transform: scale(0);
   -ms-transform: scale(0);
   transform: scale(0);
   -webkit-backface-visibility: hidden;

} .boxAbout h3 {

   color: #fff;
   text-align: center;
   text-transform: uppercase;
   position: relative;
   letter-spacing: 2px;
   font-size: 18px;
   padding-top: 22px 0 0 0;
   font-family: 'Open Sans', Arial, sans-serif;
   text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0, 0, 0, 0.3);

} </style>

               <img src="" alt="Team Photo">

               <img src="" alt="...">

               <img src="" alt="...">

       <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
           <img src="" style="
   position: inherit;    
   display: inline-block;    
   top: 50%;    
   width: auto;    height:1em;    
   margin-left: 0;
   background:transparent;">
       </a>
       <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
           <img src="" style="
   position: inherit;    
   display: inline-block;    
   top: 50%;    
   width: auto;    height:1em;    
   margin-left: 0;
   background:transparent;

       </a>

           <img src="" style="width:400px; margin:0 40px 0 0px;">
           <img src="" style=" margin:20px 60px 0 0;vertical-align:top;">
           <img src="" style=" margin:45px 40px 0 65px;vertical-align:top; width:300px;">

<script type="text/javascript"> var content = {

   "containerId": "team-container",
   "data": [{
       "members": [{
           "name": "Lily1",
           "about": "1",
           "profilePicUrl": "http://placehold.it/300x300"
       }, {
           "name": "Lily2",
           "about": "2",
           "profilePicUrl": "http://placehold.it/300x300"
       }, {
           "name": "Lily3",
           "about": "3",
           "profilePicUrl": "http://placehold.it/300x300"
       }, {
           "name": "Lily4",
           "about": "4",
           "profilePicUrl": "http://placehold.it/300x300"
       }]
   }, {
       "members": [{
           "name": "Lily5",
           "about": "1",
           "profilePicUrl": "http://placehold.it/300x300"
       }, {
           "name": "Lily6",
           "about": "2",
           "profilePicUrl": "http://placehold.it/300x300"
       }, {
           "name": "Lily7",
           "about": "3",
           "profilePicUrl": "http://placehold.it/300x300"
       }, {
           "name": "Lily8",
           "about": "4",
           "profilePicUrl": "http://placehold.it/300x300"
       }]
   }]

};

function fillMemberContent(model, boxProfile, boxAbout) {

   // $.each(model['members'], function(index, value) {
   //     var row = Math.floor((index + 0.5) / 2);
   //     var col = index % 2;
   //     var classToFind = '#' + model['tableId'] + ' .row .' + 'row-' + row + '-col-' + col;
   //     console.log(classToFind + ', ' + value['name']);
   //     $(classToFind).text(value['name']);
   //     $(classToFind).mouseenter(function() {
   //         '#' + model['tableId'] + 
   //     });
   // });
   boxProfile.find('.boxAbout h3').text(model['name']);
   boxProfile.css('background-image', "url('" + model['profilePicUrl'] + "')");
   boxProfile.click(function() {
       boxAbout.text(model['about']);
   });
   boxProfile.hover(function() {
       boxAbout.text(model['about']);
   });

}

$(document).ready(function() {

   $(function() {
       $('.carousel').carousel({
           interval: 3000
       });
   });

   var contentContainer = $('#' + content.containerId);
   $.each(content.data, function(rowIndex, data) {
       //var viewRow = $('#' + content.containerId + ' .row:nth-of-type(' + (rowIndex + 1) + ')');
       var viewRow = contentContainer.find('div:first').clone();
       console.log(viewRow);
       var boxAbout = viewRow.find('.description');
       $.each(data.members, function(position, member) {
           var row = Math.floor((position + 0.5) / 2);
           var col = position % 2;
           var boxProfile = viewRow.find(' .' + 'row-' + row + '-col-' + col);
           fillMemberContent(member, boxProfile, boxAbout);
       });
       viewRow.show();
       contentContainer.append(viewRow);
   });

   //fillTeamContent(content.webLab);

   // $.each(content.members, function(index, value) {

   //         .addClass('member-wrapper')
   //         .css('position', 'relative')
   //         .offset(value.offset);

   //         .addClass('profile-dialog')
   //         .css('font-size', '18')
   //         .css('background', value.dialog.background)
   //         .text(value.info.about)
   //         .offset(value.dialog.offset);

   //         .addClass('profile-pic')
   //         .data("index", index)
   //         .css('background', value.profilePic.background)
   //         .offset(value.profilePic.offset);

   //         .addClass('chess')
   //         .data("index", index)
   //         .css('background-image', 'url(images/chess/chess_' + value.info.chessColor + '.png)');

   //     wrapper.append(chess);
   //     wrapper.append(profile_pic);
   //     wrapper.append(dialog);
   //     $("#board").append(wrapper);
   // });

}); </script>