Team:UCLondon/Templates/Team-Style
From 2012e.igem.org
(Difference between revisions)
(55 intermediate revisions not shown) | |||
Line 14: | Line 14: | ||
<div id="fuzz" style="display:none;"></div> | <div id="fuzz" style="display:none;"></div> | ||
- | <div id=" | + | <div id="shadowTeam" style="display:none;" > |
- | <div id="close- | + | <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- | + | <div id="box-contentTeam" style="width:95%; height:95%; margin:auto;"> |
- | <div id=" | + | <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 | + | .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( | + | .team li:hover { background-color: rgba(189, 189, 189, 0.5); border-radius:4px; } |
.team .description { display:none; } | .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-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: | + | 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 | + | var openTeamBox = function () { |
- | $('# | + | $('#shadowTeam').center(); |
var description = $(this).children().children('.description'); | var description = $(this).children().children('.description'); | ||
- | |||
- | |||
- | $('# | + | |
- | $(this).children('#box- | + | 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 | + | var closeTeamBox = function() { |
- | $('# | + | $('#shadowTeam').toggle('slow', function() { |
- | $(this).children('#box- | + | $(this).children('#box-contentTeam').html(loading); |
}); | }); | ||
} | } | ||
Line 137: | Line 161: | ||
loading = $('#load').parent().html(); | loading = $('#load').parent().html(); | ||
- | $('body').off('click', '.team li', | + | $('body').off('click', '.team li', openTeamBox); |
- | $('body').on('click', '.team li', | + | $('body').on('click', '.team li', openTeamBox); |
- | $('body').off('click', '#close- | + | $('body').off('click', '#close-boxTeam', closeTeamBox); |
- | $('body').on('click', '#close- | + | $('body').on('click', '#close-boxTeam', closeTeamBox); |
}); | }); |
Latest revision as of 01:56, 28 October 2012