Template:Team:Bonn

From 2013.igem.org

(Difference between revisions)
(Created page with "<html> this is my template! </html>")
Line 1: Line 1:
-
<html>
+
<script>
-
this is my template!
+
function rollout(id)
-
</html>
+
{
 +
  var hover;
 +
  hover = document.getElementById(id).childNodes;
 +
  for(var i=0, ii = hover.length; i < ii; i++) {
 +
  if(hover[i].nodeName == "DIV"){ if(hover[i].className == "content-box-text") {
 +
    $('#'+hover[i].id).stop().animate();
 +
    $('#'+hover[i].id).animate({height:'300px'},1000);
 +
    var hover2;
 +
    hover2 = document.getElementById(hover[i].id).childNodes;
 +
    for(var a=0, aa = hover2.length; a < aa; a++) {
 +
      if(hover2[a].nodeName == "SPAN"){
 +
          if(hover2[a].className == "content-box-hover") {
 +
            $('#'+hover2[a].id).stop().animate();
 +
            $('#'+hover2[a].id).animate({opacity:1},500);
 +
          }
 +
        if(hover2[a].className == "content-box-more") {
 +
          $('#'+hover2[a].id).stop().animate();
 +
          $('#'+hover2[a].id).animate({opacity:0},500);
 +
        }
 +
        }
 +
    }
 +
  }}
 +
  if(hover[i].nodeName == "DIV"){ if(hover[i].className == "content-box-sidemenu-left" || hover[i].className == "content-box-sidemenu-right") {
 +
    $('#'+hover[i].id).stop().animate();
 +
    $('#'+hover[i].id).animate({width:50},500);
 +
  }}
 +
}
 +
$('#'+id).stop().animate();
 +
$('#'+id).animate({height:'300px'},500);
 +
}
 +
function rollin(id)
 +
{
 +
var hover;
 +
hover = document.getElementById(id).childNodes;
 +
for(var i=0, ii = hover.length; i < ii; i++) {
 +
  if(hover[i].nodeName == "DIV"){ if(hover[i].className == "content-box-text") {
 +
    $('#'+hover[i].id).stop().animate();
 +
    $('#'+hover[i].id).animate({height:'200px'},1000);
 +
    var hover2;
 +
    hover2 = document.getElementById(hover[i].id).childNodes;
 +
    for(var a=0, aa = hover2.length; a < aa; a++) {
 +
      if(hover2[a].nodeName == "SPAN"){
 +
        if(hover2[a].className == "content-box-more") {
 +
          $('#'+hover2[a].id).stop().animate();
 +
          $('#'+hover2[a].id).animate({opacity:1},500);
 +
        }
 +
          if(hover2[a].className == "content-box-hover") {
 +
            $('#'+hover2[a].id).stop().animate();
 +
            $('#'+hover2[a].id).animate({opacity:0},500);
 +
          }
 +
        }
 +
    }
 +
  }}
 +
  if(hover[i].nodeName == "DIV"){ if(hover[i].className == "content-box-sidemenu-left" || hover[i].className == "content-box-sidemenu-right") {
 +
    $('#'+hover[i].id).stop().animate();
 +
    $('#'+hover[i].id).animate({width:00},500);
 +
  }}
 +
  }
 +
$('#'+id).stop().animate();
 +
$('#'+id).animate({height:'200px'},500);
 +
document.getElementById(id).style.fontWeight = "normal";
 +
}
 +
function fadein()
 +
{
 +
$('.menu-button').animate({height:'20px'},500);
 +
}
 +
function fadeout()
 +
{
 +
$('.menu-button').stop().animate();
 +
$('.menu-button').animate({height:'0px'},500);
 +
$('.menu-button').fadeOut(1);
 +
}
 +
</script>
 +
</head>
 +
<style type="text/css">
 +
#page{
 +
margin:0;
 +
padding:0;
 +
}
 +
#menu{
 +
color:#000000;
 +
margin:0 auto;
 +
border-width: 5px 0 0 0;
 +
border-style:solid;
 +
border-color:black;
 +
padding: 0 0 1px 0;
 +
width:900px;
 +
height:50px;
 +
}
 +
#menu a{
 +
color:#000000;
 +
padding: 5px;
 +
}
 +
.menu-button{
 +
float:left;
 +
margin-right: 10px;
 +
font-size: 15px;
 +
background-color:grey;
 +
text-weight:bold;
 +
}
 +
#content {
 +
margin:0 auto;
 +
padding:0;
 +
}
 +
#content-top{
 +
<!-- border-style:solid;
 +
border-width:1px; -->
 +
width:690px;
 +
height:100px;
 +
margin:0 auto;
 +
font-size:14px;
 +
text-align: center;
 +
}
 +
.content-box-more{
 +
font-weight:normal;
 +
}
 +
.content-row{
 +
<!-- border-style:solid;
 +
border-width:1px; -->
 +
padding:20px;
 +
height:340px;
 +
margin:0 auto;
 +
align:center;
 +
width:800px;
 +
}
 +
.content-box{
 +
float:left;
 +
height:200px;
 +
border-style:solid;
 +
border-width:1px;
 +
color:#ffffff;
 +
margin:0 20px 0 20px;
 +
text-align:center;
 +
border-radius:10px;
 +
opacity:0.75;
 +
font-weight:normal;
 +
width:350px;
 +
}
 +
.content-box-sidemenu-right{
 +
float:right;
 +
width:0px;
 +
background-color:black;
 +
height:200px;
 +
}
 +
.content-box-sidemenu-left{
 +
float:left;
 +
width:0px;
 +
background-color:black;
 +
height:200px;
 +
}
 +
.content-box-text{
 +
float:left;
 +
width:300px;
 +
background-color:grey;
 +
height:200px;
 +
opacity:1;
 +
}
 +
.content-box-hover{
 +
margin:0 auto;
 +
padding:10px;
 +
opacity:0;
 +
}
 +
.content-box-more{
 +
color:#ffffff;
 +
}
 +
.mw-headline{
 +
color:#ffffff;
 +
}
 +
.editsection{
 +
color:#ffffff;
 +
}
 +
</style>

Revision as of 17:39, 19 April 2013

<script> function rollout(id) {

 var hover;
 hover = document.getElementById(id).childNodes;
 for(var i=0, ii = hover.length; i < ii; i++) {
  if(hover[i].nodeName == "DIV"){ if(hover[i].className == "content-box-text") {
    $('#'+hover[i].id).stop().animate();
    $('#'+hover[i].id).animate({height:'300px'},1000);
    var hover2;
    hover2 = document.getElementById(hover[i].id).childNodes;
    for(var a=0, aa = hover2.length; a < aa; a++) {
      if(hover2[a].nodeName == "SPAN"){ 
          if(hover2[a].className == "content-box-hover") {
            $('#'+hover2[a].id).stop().animate();
            $('#'+hover2[a].id).animate({opacity:1},500);
          }
        if(hover2[a].className == "content-box-more") {
          $('#'+hover2[a].id).stop().animate();
          $('#'+hover2[a].id).animate({opacity:0},500);
        }
       }
    }
  }}
  if(hover[i].nodeName == "DIV"){ if(hover[i].className == "content-box-sidemenu-left" || hover[i].className == "content-box-sidemenu-right") {
    $('#'+hover[i].id).stop().animate();
    $('#'+hover[i].id).animate({width:50},500);
  }}
}
$('#'+id).stop().animate();
$('#'+id).animate({height:'300px'},500);

} function rollin(id) {

var hover;
hover = document.getElementById(id).childNodes;
for(var i=0, ii = hover.length; i < ii; i++) {
  if(hover[i].nodeName == "DIV"){ if(hover[i].className == "content-box-text") {
    $('#'+hover[i].id).stop().animate();
    $('#'+hover[i].id).animate({height:'200px'},1000);
    var hover2;
    hover2 = document.getElementById(hover[i].id).childNodes;
    for(var a=0, aa = hover2.length; a < aa; a++) {
      if(hover2[a].nodeName == "SPAN"){ 
        if(hover2[a].className == "content-box-more") {
          $('#'+hover2[a].id).stop().animate();
          $('#'+hover2[a].id).animate({opacity:1},500);
        } 
          if(hover2[a].className == "content-box-hover") {
            $('#'+hover2[a].id).stop().animate();
            $('#'+hover2[a].id).animate({opacity:0},500);
          }
       }
    }
  }}
  if(hover[i].nodeName == "DIV"){ if(hover[i].className == "content-box-sidemenu-left" || hover[i].className == "content-box-sidemenu-right") {
    $('#'+hover[i].id).stop().animate();
    $('#'+hover[i].id).animate({width:00},500);
  }}
 }
$('#'+id).stop().animate();
$('#'+id).animate({height:'200px'},500);
document.getElementById(id).style.fontWeight = "normal";

} function fadein() {

$('.menu-button').animate({height:'20px'},500);

} function fadeout() {

$('.menu-button').stop().animate();
$('.menu-button').animate({height:'0px'},500);
$('.menu-button').fadeOut(1);

} </script> </head> <style type="text/css">

  1. page{
margin:0;
padding:0;

}

  1. menu{
color:#000000;
margin:0 auto;
border-width: 5px 0 0 0;
border-style:solid;
border-color:black;
padding: 0 0 1px 0;
width:900px;
height:50px;

}

  1. menu a{
color:#000000;
padding: 5px;

} .menu-button{

float:left;
margin-right: 10px;
font-size: 15px;
background-color:grey;
text-weight:bold;

}

  1. content {
margin:0 auto;
padding:0;

}

  1. content-top{
width:690px;
height:100px;
margin:0 auto;
font-size:14px;
text-align: center;

} .content-box-more{

font-weight:normal;

} .content-row{

padding:20px;
height:340px;
margin:0 auto;
align:center;
width:800px;

} .content-box{

float:left;
height:200px;
border-style:solid;
border-width:1px;
color:#ffffff;
margin:0 20px 0 20px;
text-align:center;
border-radius:10px;
opacity:0.75;
font-weight:normal;
width:350px;

} .content-box-sidemenu-right{

float:right;
width:0px;
background-color:black;
height:200px;

} .content-box-sidemenu-left{

float:left;
width:0px;
background-color:black;
height:200px;

} .content-box-text{

float:left;
width:300px;
background-color:grey;
height:200px;
opacity:1;

} .content-box-hover{

margin:0 auto;
padding:10px;
opacity:0;

} .content-box-more{

color:#ffffff;

} .mw-headline{

color:#ffffff;

} .editsection{

color:#ffffff;

} </style>