@@ Line 4: / Line 4: @@
 <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>
-                <p class="description">about me</p>
- </li>
-<li>
-                <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>
-                <p class="description">about me</p>
-</li>
-<li>
-                <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">
-                <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>
-                <p class="description">about me</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>
-                <p class="description">about me</p>
- </li>
@@ Line 64: / Line 11: @@
 <div style="clear:both; width:100%; height: 3px;"></div>
-<div id="shadow" style="display:none;" > hello hbhhj</div>
+<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;">
+<div id="loadTeam" style="background:url(http://db.tt/UTRvh0fQ) no-repeat center center; height:100px; width:100px; margin:auto;"></div>
+</div>
+</div>
 <style>
@@ Line 74: / Line 29: @@
     .team li  {
                         list-style: none;
-			margin: 2px;
+			margin: auto;
 			padding: 15px 5px 2px 5px;
 			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; }
-    #shadow {
+   .team .attribution { display:none; }
-              background-color: red;
-               position:absolute;
+    #shadowTeam {
-               height: 300px;
-               width:60%;
+           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;   }
+*/
@@ Line 95: / Line 84: @@
 <script>
-jQuery.fn.center = function ($) {
+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':'absolute',
+     'position':'fixed',
-     'top':Math.abs(((w.height() - this.outerHeight()) / 2) + w.scrollTop()),
+     'left':  '50%',
-     'left':Math.abs(((w.width() - this.outerWidth()) / 2) + w.scrollLeft())
+    'margin-left': 0 - (this.width() / 2),
+     'top': '50%',
+    'margin-top':  (0 - (this.height() / 2))
    });
    return this;
@@ Line 106: / Line 101: @@
+$(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;
+   }
-$('.team li').click(function(event) {
-  $('#shadow').center();
+   target.children('ul').html( str );
+   var nHeight = $('.MBContent').height();
+   $('.MBWikiStyle').css('height', nHeight);
+});
-  $('#shadow').toggle('slow', function() {
-       $(this).html(  'hello world' );
-  });
-return false;
+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);
 });

Team:UCLondon/Templates/Team-Style

From 2012e.igem.org

Latest revision as of 01:56, 28 October 2012