Team:CBNU-Korea/contenttest

From 2011.igem.org

(Difference between revisions)
 
(61 intermediate revisions not shown)
Line 2: Line 2:
<HEAD>
<HEAD>
 +
 +
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 +
<Style type = "text/css">
<Style type = "text/css">
-
 
-
*{
 
-
/* Universal CSS reset */
 
-
margin:0;
 
-
padding:0;
 
-
}
 
body{
body{
-
/* Setting default text color, background and a font stack */
+
background-color:#0e6d38;
-
 
+
-
font-family:Gulim, Helvetica, sans-serif;
+
-
color:#000000;
+
-
background:url(https://static.igem.org/mediawiki/2011/c/cd/Cbnu_back1.png) no-repeat center top;
+
-
}
+
-
 
+
-
.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:'Gulim',Arial, Helvetica, sans-serif;
+
-
font-size:15px;
+
-
font-weight:bold;
+
-
white-space:nowrap;
+
-
line-height:22px;
+
-
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:"Gulim",Arial,Helvetica,sans-serif;
+
}
}
Line 182: 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 216: Line 49:
display:none;
display:none;
}
}
-
 
-
#Top_DIV{
 
-
width : 100px;
 
-
height : 100px;
 
-
margin-bottom : 20px;
 
-
background-color: #8c00ff;
 
-
font-family:Gulim;
 
-
font-size:35px;
 
-
color:white;
 
-
}
 
-
 
-
 
</Style>
</Style>
-
<BODY>
+
</HEAD>
-
 
+
-
<div id="Top_DIV">상단메뉴</div>
+
-
<p title="2200+ Twitter Followers" class="openLeft blue" style="top:240px;left:120px;">
+
-
        Become one of our twitter followers and receive every design and development update we share with the community.
+
-
        <a href="http://twitter.com/Tutorialzine"><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>
+
-
 
+
-
 
+
-
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
+
-
<script type="text/javascript">
+
-
$(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>
 +
<div id="logo" style='position: absolute; left: 100px; top: 100px;'>
 +
<img src="https://static.igem.org/mediawiki/2011/9/92/Synb_logo_001.png" width="398" height="65">
 +
</div>
 +
</body>
</HTML>
</HTML>

Latest revision as of 06:35, 17 September 2011

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