"

From 2014.igem.org

---

Revision as of 14:49, 16 October 2014

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

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

   members: [{
       info: {
           name: "Lily",
           about: "Hi! I'm Lily majoring in Computer Science. It is lucky that I have a chance to work as a team in iGEM. I enjoy creating new things with knowledge. That's why I love computer-related work as well as synthetic biology in the same time. Hope you like the wiki.",
           chessColor: "red",
       },
       offset: {
           top: 104,
           left: 333
       },
       profilePic: {
           background: "0px 0px/100% 100% url('http://placehold.it/300x300')",
           offset: {
               top: 0,
               left: -100
           }
       },
       dialog: {
           background: "#ff0000",
           offset: {
               top: 0,
               left: 100
           }
       }
   }]

};

$(document).ready(function() {

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

var wrapper = $('')

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

var dialog = $('')

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

var profile_pic = $('')

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

var chess = $('')

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