Team:CBNU-Korea/contenttest

From 2011.igem.org

(Difference between revisions)
 
(19 intermediate revisions not shown)
Line 6: Line 6:
<Style type = "text/css">
<Style type = "text/css">
-
 
-
*{
 
-
/* Universal CSS reset */
 
-
margin:0;
 
-
padding:0;
 
-
}
 
-
 
-
#background-wrap img {
 
-
position: absolute;
 
-
z-index: -1;
 
-
width: 100%;
 
-
min-width:950px;
 
-
}
 
body{
body{
-
/* Setting default text color, background and a font stack */
+
background-color:#0e6d38;
-
 
+
-
font-family:Arial, Helvetica, sans-serif;
+
-
color:#fff;
+
-
/*background:url(https://static.igem.org/mediawiki/2011/c/cd/Cbnu_back1.png) no-repeat center center fixed;*/
+
-
 
+
-
}
+
-
 
+
-
.slideOutTip{
+
-
/* The main wrapping div of the slideout tips */
+
-
position:absolute;
+
-
padding:3px;
+
-
top:0;
+
-
left:0;
+
-
background-color:#111;
+
-
font-size:13px;
+
-
color:white;
+
-
overflow:hidden;
+
-
height:22px;
+
-
}
+
-
 
+
-
.slideOutTip:hover{
+
-
/* Applying a CSS3 outer glow on hover */
+
-
-moz-box-shadow:0 0 1px #999;
+
-
-webkit-box-shadow:0 0 1px #999;
+
-
box-shadow:0 0 1px #999;
+
-
}
+
-
 
+
-
/* The holder for the title and the icon: */
+
-
.tipVisible{ cursor:pointer; height:22px; }
+
-
 
+
-
.tipTitle{
+
-
float:left;
+
-
font-family:'Myriad Pro',Arial, Helvetica, sans-serif;
+
-
font-size:18px;
+
-
font-weight:bold;
+
-
white-space:nowrap;
+
-
line-height:4px;
+
-
padding-right:5px;
+
-
}
+
-
 
+
-
.tipIcon{
+
-
width:20px;
+
-
height:20px;
+
-
float:left;
+
-
background-color:#61b035;
+
-
border:1px solid #70c244;
+
-
margin-right:8px;
+
-
+
-
/* CSS3 Rounded corners */
+
-
+
-
-moz-border-radius:1px;
+
-
-webkit-border-radius:1px;
+
-
border-radius:1px;
+
-
}
+
-
 
+
-
/* Three color themes */
+
-
.green .tipIcon{ background-color:#61b035; border:1px solid #70c244; }
+
-
.blue .tipIcon{ background-color:#1078C7; border:1px solid #1e82cd; }
+
-
.red .tipIcon{ background-color:#CD3A12; border:1px solid #da421a; }
+
-
 
+
-
.plusIcon{
+
-
/* The plus icon */
+
-
width:13px;
+
-
height:13px;
+
-
background:url('img/plus.gif') no-repeat center center;
+
-
margin:4px;
+
-
+
-
/* Defining a CSS3 animation. Currently only works in Chrome and Safari */
+
-
-webkit-transition: -webkit-transform 0.2s linear;
+
-
-moz-transition: -moz-transform 0.2s linear;
+
-
transition: transform 0.2s linear;
+
-
}
+
-
 
+
-
.slideOutTip.isOpened{ z-index:10000; }
+
-
 
+
-
.slideOutTip.isOpened .plusIcon{
+
-
/* Applying a CSS3 rotation  to the opened slideouts*/
+
-
-moz-transform:rotate(45deg);
+
-
-webkit-transform:rotate(45deg);
+
-
transform:rotate(45deg);
+
-
}
+
-
 
+
-
/* Special rules for the left and top - opening versions */
+
-
 
+
-
.openLeft .tipIcon{
+
-
/* Floating the title and the icon to the right */
+
-
margin:0 0 0 8px;
+
-
float:right;
+
-
}
+
-
.openLeft .tipTitle{ float:right; padding:0 0 0 5px; }
+
-
.openLeft .slideOutContent{ margin-top:22px; }
+
-
.openLeft.openTop .slideOutContent{ margin-top:0; }
+
-
 
+
-
 
+
-
.slideOutContent{
+
-
/* Hiding the div with the slide out content: */
+
-
display:none;
+
-
padding:10px;
+
-
font-size:11px;
+
-
}
+
-
 
+
-
/* Hiding the original paragraphs if they have not been replaced (JS disabled): */
+
-
 
+
-
.main > p{ display:none; }
+
-
 
+
-
 
+
-
 
+
-
/* The styles below are only necessary for the styling of the demo page: */
+
-
 
+
-
.main{
+
-
height:700px;
+
-
margin:20px auto;
+
-
position:relative;
+
-
width:960px;
+
-
}
+
-
 
+
-
.spaceBottom{
+
-
margin:0 0 10px;
+
-
}
+
-
 
+
-
.spaceTop{
+
-
margin:10px 0 0;
+
-
}
+
-
 
+
-
h1{
+
-
background-color:#292929;
+
-
border-bottom:1px solid #222222;
+
-
font-size:30px;
+
-
font-weight:normal;
+
-
margin-bottom:15px;
+
-
padding:15px;
+
-
text-align:center;
+
-
}
+
-
 
+
-
h2 {
+
-
font-size:12px;
+
-
font-weight:normal;
+
-
padding-right:40px;
+
-
position:relative;
+
-
right:0;
+
-
text-align:right;
+
-
text-transform:uppercase;
+
-
top:-55px;
+
-
}
+
-
 
+
-
a, a:visited {
+
-
color:#0196e3;
+
-
text-decoration:none;
+
-
outline:none;
+
-
}
+
-
 
+
-
a:hover{
+
-
text-decoration:underline;
+
-
}
+
-
 
+
-
a img{
+
-
border:none;
+
-
}
+
-
 
+
-
.clear{
+
-
clear:both;
+
-
}
+
-
 
+
-
h1,h2,p.tutInfo{
+
-
font-family:"Myriad Pro",Arial,Helvetica,sans-serif;
+
}
}
Line 193: Line 15:
}
}
-
#catlinks {background-color:#000000;}
+
#catlinks {background-color:#0e6d38;}
-
#footer-box {background-color:#000000;}
+
#footer-box {background-color:#0e6d38;}
#search-controls { display:none; }
#search-controls { display:none; }
Line 231: Line 53:
<body>
<body>
-
<div id="background-wrap">
+
<div id="logo" style='position: absolute; left: 100px; top: 100px;'>
-
<img src="https://static.igem.org/mediawiki/2011/c/cd/Cbnu_back1.png">
+
<img src="https://static.igem.org/mediawiki/2011/9/92/Synb_logo_001.png" width="398" height="65">
</div>
</div>
-
 
-
<div class="main">
 
-
<p title="openLeft blue" class="openLeft blue" style="top:240px;left:400px;">
 
-
        test brought you a fresh web development tutorial every week.
 
-
        <a href="/#"><img src="https://2011.igem.org/wiki/skins/common/images/wiki.png" title="Follow us" class="spaceBottom" alt="Follow us on twitter" width="460" height="210" /></a>
 
-
    </p>
 
-
 
-
</div>
 
-
 
-
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
 
-
<script type="text/javascript">
 
-
 
-
$('#background-wrap img').css('opacity',0);
 
-
$('#background-wrap img').animate({ opacity: 1}, 3000);
 
-
 
-
$(document).ready(function(){
 
-
/* The code here is executed on page load */
 
-
 
-
/* Replacing all the paragraphs */
 
-
$('.main p').replaceWith(function(){
 
-
 
-
/* The style, class and title attributes of the p are copied to the slideout: */
 
-
 
-
return '\
 
-
<div class="slideOutTip '+$(this).attr('class')+'" style="'+$(this).attr('style')+'">\
 
-
\
 
-
<div class="tipVisible">\
 
-
<div class="tipIcon"><div class="plusIcon"></div></div>\
 
-
<p class="tipTitle">'+$(this).attr('title')+'</p>\
 
-
</div>\
 
-
\
 
-
<div class="slideOutContent">\
 
-
<p>'+$(this).html()+'</p>\
 
-
</div>\
 
-
</div>';
 
-
});
 
-
 
-
$('.slideOutTip').each(function(){
 
-
 
-
/*
 
-
Implicitly defining the width of the slideouts according to the width of its title,
 
-
because IE fails to calculate it on its own.
 
-
*/
 
-
 
-
$(this).width(40+$(this).find('.tipTitle').width());
 
-
});
 
-
 
-
/* Listening for the click event: */
 
-
 
-
$('.tipVisible').bind('click',function(){
 
-
var tip = $(this).parent();
 
-
 
-
/* If a open/close animation is in progress, exit the function */
 
-
if(tip.is(':animated'))
 
-
return false;
 
-
 
-
if(tip.find('.slideOutContent').css('display') == 'none')
 
-
{
 
-
tip.trigger('slideOut');
 
-
}
 
-
else tip.trigger('slideIn');
 
-
 
-
});
 
-
 
-
$('.slideOutTip').bind('slideOut',function(){
 
-
 
-
var tip = $(this);
 
-
var slideOut = tip.find('.slideOutContent');
 
-
 
-
/* Closing all currently open slideouts: */
 
-
$('.slideOutTip.isOpened').trigger('slideIn');
 
-
 
-
/* Executed only the first time the slideout is clicked: */
 
-
if(!tip.data('dataIsSet'))
 
-
{
 
-
tip .data('origWidth',tip.width())
 
-
.data('origHeight',tip.height())
 
-
.data('dataIsSet',true);
 
-
 
-
if(tip.hasClass('openTop'))
 
-
{
 
-
/*
 
-
If this slideout opens to the top, instead of the bottom,
 
-
calculate the distance to the bottom and fix the slideout to it.
 
-
*/
 
-
 
-
tip.css({
 
-
bottom : tip.parent().height()-(tip.position().top+tip.outerHeight()),
 
-
top : 'auto'
 
-
});
 
-
 
-
/* Fixing the title to the bottom of the slideout, so it is not slid to the top on open: */
 
-
tip.find('.tipVisible').css({position:'absolute',bottom:3});
 
-
 
-
/* Moving the content above the title, so it can slide open to the top: */
 
-
tip.find('.slideOutContent').remove().prependTo(tip);
 
-
}
 
-
 
-
if(tip.hasClass('openLeft'))
 
-
{
 
-
/*
 
-
If this slideout opens to the left, instead of right, fix it to the
 
-
right so the left edge can expand without moving the entire div:
 
-
*/
 
-
tip.css({
 
-
right : Math.abs(tip.parent().outerWidth()-(tip.position().left+tip.outerWidth())),
 
-
left : 'auto'
 
-
});
 
-
 
-
tip.find('.tipVisible').css({position:'absolute',right:3});
 
-
}
 
-
}
 
-
 
-
/* Resize the slideout to fit the content, which is then faded into view: */
 
-
 
-
tip.addClass('isOpened').animate({
 
-
width : Math.max(slideOut.outerWidth(),tip.data('origWidth')),
 
-
height : slideOut.outerHeight()+tip.data('origHeight')
 
-
},function(){
 
-
slideOut.fadeIn();
 
-
});
 
-
 
-
}).bind('slideIn',function(){
 
-
var tip = $(this);
 
-
 
-
/* Hide the content and restore the original size of the slideout: */
 
-
 
-
tip.find('.slideOutContent').fadeOut('fast',function(){
 
-
tip.animate({
 
-
width : tip.data('origWidth'),
 
-
height : tip.data('origHeight')
 
-
},function(){
 
-
tip.removeClass('isOpened');
 
-
});
 
-
});
 
-
 
-
});
 
-
});
 
-
 
-
</script>
 
</body>
</body>
</HTML>
</HTML>

Latest revision as of 06:35, 17 September 2011

Retrieved from "http://2011.igem.org/Team:CBNU-Korea/contenttest"