Team:UCLondon/Templates/Team-Style

From 2012e.igem.org

(Difference between revisions)
 
(51 intermediate revisions not shown)
Line 14: Line 14:
<div id="fuzz" style="display:none;"></div>
<div id="fuzz" style="display:none;"></div>
-
<div id="shadow" style="display:none;" >
+
<div id="shadowTeam" style="display:none;" >
-
<div id="close-box" style="background:url(http://db.tt/N9CUKlnO) no-repeat 0 0; height:35px; width:35px; cursor:pointer;"></div>
+
<div id="close-boxTeam" style="background:url(http://db.tt/N9CUKlnO) no-repeat 0 0; height:35px; width:35px; cursor:pointer;"></div>
-
<div id="box-content" style="width:95%; height:95%; margin:auto;">
+
<div id="box-contentTeam" style="width:95%; height:95%; margin:auto;">
-
<div id="load" style="background:url(http://db.tt/UTRvh0fQ) no-repeat center center; height:100px; width:100px; margin:auto;"></div>
+
<div id="loadTeam" style="background:url(http://db.tt/UTRvh0fQ) no-repeat center center; height:100px; width:100px; margin:auto;"></div>
</div>
</div>
</div>
</div>
Line 34: Line 34:
                         width: 180px;
                         width: 180px;
                         height: 230px;
                         height: 230px;
 +
                        cursor: pointer;
 +
 +
                        -webkit-animation: slideIN 2s 2s ease forwards;
 +
                        -moz-animation: slideIN 2s 2s ease forwards;
 +
                        -ms-animation: slideIN 2s 2s ease forwards;
}   
}   
 +
   .team h3 { color: rgb(56, 90, 79); font-size:17px; }
   .team h3 { color: rgb(56, 90, 79); font-size:17px; }
-
   .team li:hover > h3 { color: rgb(64, 128, 0) !important; }
+
   .team li:hover h3 { color: rgb(50, 50, 50); !important; }
   .team a {width:100%; margin:auto; }
   .team a {width:100%; margin:auto; }
   .team a:hover {text-decoration: none; }
   .team a:hover {text-decoration: none; }
-
   .team li:hover { background-color:  rgba(227, 227, 227, 0.4); border-radius:4px; }
+
   .team li:hover { background-color:  rgba(189, 189, 189, 0.5); border-radius:4px; }
    
    
   .team .description { display:none; }
   .team .description { display:none; }
-
   #shadow {
+
  .team .attribution { display:none; }
 +
 
 +
   #shadowTeam {
   
   
           background-image:  -webkit-gradient(linear, 0% 0%, 0% 100%, from( rgba(255, 255, 255, 1) ), to( rgb(249, 249, 249) ) );
           background-image:  -webkit-gradient(linear, 0% 0%, 0% 100%, from( rgba(255, 255, 255, 1) ), to( rgb(249, 249, 249) ) );
Line 59: Line 67:
               position:fixed;
               position:fixed;
               height: 400px;
               height: 400px;
-
               width:45%;
+
               width:600px;
               margin:auto;
               margin:auto;
               z-index: 2;
               z-index: 2;
Line 105: Line 113:
     str += list[i].innerHTML;
     str += list[i].innerHTML;
   }
   }
 +
   target.children('ul').html( str );
   target.children('ul').html( str );
   var nHeight = $('.MBContent').height();
   var nHeight = $('.MBContent').height();
   $('.MBWikiStyle').css('height', nHeight);
   $('.MBWikiStyle').css('height', nHeight);
 +
 +
 
});
});
-
var openBox = function () {  
+
var openTeamBox = function () {  
-
   $('#shadow').center();
+
   $('#shadowTeam').center();
   var description = $(this).children().children('.description');  
   var description = $(this).children().children('.description');  
-
  var input = "<div style='float:left; width:40%; margin:auto; color:rgb(117, 117, 117) !important;'>" + $(this).children().children('a').html() + $(this).children().children('.position').html() + "</div>";
 
-
  input +=  "<div style='overflow:auto; width:55%; height:90%; float:right;'><p>"+ description.html() + "</p></div>";
 
-
   $('#shadow').toggle('slow', function() {
+
 
-
       $(this).children('#box-content').html(input);  
+
  var input = "<div style='float:left; width:40%; margin:auto; color:rgb(117, 117, 117) !important; text-align:center;'>" + $(this).children().children('a').html() + $(this).children().children('.position').html() +  "</div>";
 +
  input +=  "<div style='overflow:auto; width:58%; height:90%; float:right; text-align:justify;'><p style='padding-right:13px;'>"+ description.html() + "</p>";
 +
 +
  if ($(this).children().children('.attribution').html() != undefined){
 +
 
 +
  input += "<br/><div style='color:rgb(117, 117, 117);'> Attributions:</div>" +  "<div style='text-align:left; padding-left:0px; padding-right:0px; font-size:9pt; color:rgb(117, 117, 117);'>" + $(this).children().children('.attribution').html() + "</div>";
 +
 
 +
}
 +
 
 +
  input += "</div>";
 +
 
 +
   $('#shadowTeam').toggle('slow', function() {
 +
       $(this).children('#box-contentTeam').html(input);
 +
      $('#box-contentTeam img').css({ 'width':180, 'height':140});
     });
     });
 +
 
 +
   
      
      
     return false;
     return false;
Line 126: Line 150:
-
var closeBox = function() {
+
var closeTeamBox = function() {
-
   $('#shadow').toggle('slow', function() {
+
   $('#shadowTeam').toggle('slow', function() {
-
       $(this).children('#box-content').html(loading);  
+
       $(this).children('#box-contentTeam').html(loading);  
   });
   });
}
}
Line 137: Line 161:
   loading = $('#load').parent().html();
   loading = $('#load').parent().html();
-
   $('body').off('click', '.team li', openBox);
+
   $('body').off('click', '.team li', openTeamBox);
-
   $('body').on('click', '.team li', openBox);
+
   $('body').on('click', '.team li', openTeamBox);
-
   $('body').off('click', '#close-box', closeBox);
+
   $('body').off('click', '#close-boxTeam', closeTeamBox);
-
   $('body').on('click', '#close-box', closeBox);
+
   $('body').on('click', '#close-boxTeam', closeTeamBox);
        
        
});
});

Latest revision as of 01:56, 28 October 2012

Retrieved from "http://2012e.igem.org/wiki/index.php/Team:UCLondon/Templates/Team-Style"