Team:CBNU-Korea/contenttest

From 2011.igem.org

(Difference between revisions)
Line 2: Line 2:
<HEAD>
<HEAD>
 +
 +
<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>
 +
<Style type = "text/css">
<Style type = "text/css">
-
p{font-family:Tahoma;}
+
*{
 +
/* Universal CSS reset */
 +
margin:0;
 +
padding:0;
 +
}
 +
 
 +
body{
 +
/* Setting default text color, background and a font stack */
 +
 
 +
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;
 +
}
-
body {
+
h1,h2,p.tutInfo{
-
color:#000000;
+
font-family:"Gulim",Arial,Helvetica,sans-serif;
-
background:url(https://static.igem.org/mediawiki/2011/c/cd/Cbnu_back1.png) no-repeat center top;
+
}
}

Revision as of 05:53, 22 August 2011

상단메뉴

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