Team:UCLondon/Templates/Team-Style

From 2012e.igem.org

(Difference between revisions)
 
(35 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 42: Line 42:
   .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(100, 100, 100); !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; }
Line 50: Line 50:
   .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 65: 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 112: Line 114:
   }
   }
-
    $('.team li').css( { '-webkit-animation': 'slideIN 2s 2s ease forwards',
 
-
                        '-moz-animation': 'slideIN 2s 2s ease forwards',
 
-
                        '-ms-animation': 'slideIN 2s 2s ease forwards' });
 
   target.children('ul').html( str );
   target.children('ul').html( str );
Line 124: Line 123:
-
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; text-align:center;'>" + $(this).children().children('a').html() + $(this).children().children('.position').html() + "</div>";
+
   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;'><p>"+ description.html() + "</p></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>";
-
   $('#shadow').toggle('slow', function() {
+
   $('#shadowTeam').toggle('slow', function() {
-
       $(this).children('#box-content').html(input);  
+
       $(this).children('#box-contentTeam').html(input);
 +
      $('#box-contentTeam img').css({ 'width':180, 'height':140});
     });
     });
    
    
-
     $('#box-content').children().children('img').css( { 'width': 180, 'height':140 });
+
      
      
      
     return false;
     return false;
Line 142: 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 153: 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"