Team:UCLondon/Templates/Team-Style

From 2012e.igem.org

(Difference between revisions)
 
(275 intermediate revisions not shown)
Line 5: Line 5:
<ul>
<ul>
-
<li>   
 
-
                <a href="tim-cook.html" onclick="s_objectID=&quot;http://www.apple.com/pr/bios/tim-cook.html_1&quot;;return this.s_oc?this.s_oc(e):true">
 
-
                <img src="http://images.apple.com/pr/bios/images/cook_thumb20110204.jpg" alt="Tim Cook profile picture" height="130" width="168">
 
-
                            <h3>Tim Cook</h3>
 
-
                </a>
 
-
                <p>
 
-
                            CEO
 
-
                </p>
 
-
</li>
 
 +
</ul>
 +
</div>
-
<li>   
+
<div style="clear:both; width:100%; height: 3px;"></div>
-
                <a href="craig-federighi.html" onclick="s_objectID=&quot;http://www.apple.com/pr/bios/craig-federighi.html_1&quot;;return this.s_oc?this.s_oc(e):true">
+
-
                <img src="http://images.apple.com/pr/bios/images/federighi_thumb20120727.jpg" alt="Criag Federighi profile picture" height="130" width="168">
+
-
                            <h3>Craig Federighi</h3>
+
-
                </a>
+
-
                <p>
+
-
                            Senior Vice President
+
-
                            <br>Mac Software Engineering
+
-
                </p>
+
-
</li>
+
 +
<div id="fuzz" style="display:none;"></div>
 +
<div id="shadowTeam" style="display:none;" >
 +
<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-contentTeam" style="width:95%; height:95%; margin:auto;">
-
<li>   
+
<div id="loadTeam" style="background:url(http://db.tt/UTRvh0fQ) no-repeat center center; height:100px; width:100px; margin:auto;"></div>
-
                <a href="scott-forstall.html" onclick="s_objectID=&quot;http://www.apple.com/pr/bios/scott-forstall.html_1&quot;;return this.s_oc?this.s_oc(e):true">
+
</div>
-
                <img src="http://images.apple.com/pr/bios/images/forstall_thumb20110204.jpg" alt="Scott Forstall profile picture" height="130" width="168">
+
-
                            <h3>Scott Forstall</h3>
+
-
                </a>
+
-
                <p>
+
-
                            Senior Vice President
+
-
                            <br>iOS Software
+
-
                </p>
+
-
</li>
+
-
 
+
-
 
+
-
<li>   
+
-
                <a href="jonathan-ive.html" onclick="s_objectID=&quot;http://www.apple.com/pr/bios/jonathan-ive.html_1&quot;;return this.s_oc?this.s_oc(e):true">
+
-
                <img src="http://images.apple.com/pr/bios/images/ive_thumb20110204.jpg" alt="Jonathan Ive profile picture" height="130" width="168">
+
-
                            <h3>Jonathan Ive</h3>
+
-
                </a>
+
-
                <p>
+
-
                            Senior Vice President
+
-
                            <br>Industrial Design
+
-
                </p>
+
-
</li>
+
-
 
+
-
 
+
-
</ul>
+
-
 
+
</div>
</div>
-
 
<style>
<style>
-
   .team { }
+
   .team { width:98%; margin:auto;  }
-
   .team ul { width:95%;  }
+
   .team ul { width:95%; margin:auto;  }
   .team li  {  
   .team li  {  
                       list-style: none;  
                       list-style: none;  
-
margin: 2px;
+
margin: auto;
padding: 15px 5px 2px 5px;
padding: 15px 5px 2px 5px;
float: left;
float: left;
 +
                        width: 180px;
 +
                        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 li:hover h3  { color:  rgb(50, 50, 50); !important; }
 +
  .team a {width:100%; margin:auto; }
 +
  .team a:hover {text-decoration: none; }
 +
  .team li:hover { background-color:  rgba(189, 189, 189, 0.5); border-radius:4px; }
 +
 
 +
 +
  .team .description { display:none; }
 +
 +
  .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-linear-gradient(top, rgba(255, 255, 255, 1), rgb(249, 249, 249) );
 +
          background-image:  -moz-linear-gradient(top,  rgba(255, 255, 255, 1), rgb(249, 249, 249) );
 +
          background-image:  -ms-linear-gradient(top,  rgba(255, 255, 255, 1), rgb(249, 249, 249) );
 +
          background-image:  -o-linear-gradient(top,  rgba(255, 255, 255, 1), rgb(249, 249, 249) );
 +
          background-image:  linear-gradient(top,  rgba(255, 255, 255, 1), rgb(249, 249, 249) );
 +
         
 +
 +
          box-shadow: 1px 2px 5px 5px #888;
 +
          border-radius: 5px;
 +
 +
              position:fixed;
 +
              height: 400px;
 +
              width:600px;
 +
              margin:auto;
 +
              z-index: 2;
 +
  }
 +
 +
 +
  /*#fuzz {  background:rgba(0,0,0,0.3);
 +
    display:none;
 +
    width:100%; height:100%;
 +
    position:fixed; top:0; left:0; z-index:99998;  }
 +
*/
</style>
</style>
 +
<script>
 +
 +
var loading = "";
 +
 +
jQuery.fn.center = function () {
 +
  var w = $(window);
 +
  var b = $('body');
 +
  var mt = w.scrollTop() + (w.height() > b.height()) ? 0: (  -1 *Math.abs( w.outerHeight() - b.outerHeight() )/2  );
 +
  this.css({
 +
    'position':'fixed',
 +
    'left':  '50%',
 +
    'margin-left': 0 - (this.width() / 2),
 +
    'top': '50%',
 +
    'margin-top':  (0 - (this.height() / 2))
 +
  });
 +
  return this;
 +
}
 +
 +
 +
$(document).ready(function(event) { 
 +
    // get all the elements which meet the {{{1}}} and .team-member
 +
    var list = $('.team-member.</html>{{{1}}}<html> > ul');
 +
    //alert(list.length);
 +
    var target = $('.team.</html>{{{1}}}<html>');
 +
 +
    var str = "";
 +
    var i = 0;
 +
 +
    for (i=0; i<list.length;++i){
 +
    str += list[i].innerHTML;
 +
  }
 +
 +
 +
  target.children('ul').html( str );
 +
  var nHeight = $('.MBContent').height();
 +
  $('.MBWikiStyle').css('height', nHeight);
 +
 +
 
 +
});
 +
 +
 +
var openTeamBox = function () {
 +
  $('#shadowTeam').center();
 +
  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>";
 +
  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;
 +
}
 +
 +
 +
var closeTeamBox = function() {
 +
  $('#shadowTeam').toggle('slow', function() {
 +
      $(this).children('#box-contentTeam').html(loading);
 +
  });
 +
}
 +
 +
 +
 +
$(document).ready(function(event) {
 +
  loading = $('#load').parent().html();
 +
 +
  $('body').off('click', '.team li', openTeamBox);
 +
  $('body').on('click', '.team li', openTeamBox);
 +
 +
  $('body').off('click', '#close-boxTeam', closeTeamBox);
 +
  $('body').on('click', '#close-boxTeam', closeTeamBox);
 +
     
 +
});
 +
 +
 +
 +
 +
</script>
</html>
</html>

Latest revision as of 01:56, 28 October 2012

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