Team:Heidelberg/DesignTest

From 2013.igem.org

(Difference between revisions)
Line 160: Line 160:
}
}
</style>
</style>
 +
<!-- End of Slider 1 -->
<!-- End of Slider 1 -->
<!-- Beginning of Slider 2 -->
<!-- Beginning of Slider 2 -->
 +
 +
<script>
 +
var Slider2 = function() {this.initialize.apply(this, arguments)}
 +
Slider2.prototype = {
 +
 +
initialize: function(slider) {
 +
this.ul = slider.children[0]
 +
this.li = this.ul.children
 +
 +
// make <ul> as large as all <li>’s
 +
this.ul.style.width = (this.li[0].clientWidth * this.li.length) + 'px'
 +
 +
this.currentIndex = 0
 +
this.clock()
 +
},
 +
goTo: function(index) {
 +
clearTimeout(this.Interval)
 +
// circle through indices
 +
if (index < 0)
 +
index = this.li.length - 1
 +
else if (index > this.li.length - 1) {
 +
this.ul.style.left = "10em";
 +
this.clock();
 +
this.currentIndex = 0;
 +
return;
 +
}
 +
 +
// move <ul> left
 +
this.ul.style.left = '-' + ((20 * index)-10) + 'em'
 +
this.clock()
 +
this.currentIndex = index
 +
},
 +
goToPrev: function() {
 +
this.goTo(this.currentIndex - 1)
 +
},
 +
goToNext: function() {
 +
this.goTo(this.currentIndex + 1)
 +
},
 +
clock: function() {
 +
var self = this;
 +
this.Interval = setInterval(function() {self.goToNext()}, 2500);
 +
}
 +
}
 +
</script>
 +
 +
<div id="Slider2Wrap">
 +
<div id="SliderPrev2"><a href="#" onclick="sliderMain2.goToPrev();return(false);">&#x25C0;</a></div><!--
 +
--><div id="Slider2" onmouseover="clearTimeout(sliderMain2.Interval)" onmouseout="sliderMain2.clock()">
 +
 +
<ul id="SliderUl2">
 +
 +
<li>
 +
<div>
 +
<h2>Link to Project Page</h2>
 +
</div>
 +
</li>
 +
<li>
 +
<div>
 +
<h2>We did lot's  of funny stuff</h2>
 +
</div>
 +
</li>
 +
<li>
 +
<div>
 +
<h2>And we want to thank all our sponsors!</h2>
 +
</div>
 +
</li>
 +
 +
</ul>
 +
<div id="Sliderleft"></div>
 +
<div id="Sliderright"></div>
 +
</div><!--
 +
--><div id="SliderNext2"><a href="#" onclick="sliderMain2.goToNext();return(false);">&nbsp;</a></div>
 +
</div>
 +
<script>
 +
var sliderMain2 = new Slider2(document.getElementById("Slider2"));
 +
</script>
 +
<style>
 +
#Sliderleft, #Sliderright {
 +
width:10em;
 +
height:14em;
 +
position:relative;
 +
top:-14em;
 +
background-color:rgba(100,100,100,0.5)
 +
}
 +
#Sliderleft { float:left; }
 +
#Sliderright { float:right; }
 +
#Slider2Wrap {
 +
width:80%;
 +
}
 +
#Slider2, #SliderNext2, #SliderPrev2 {
 +
display:inline-block;
 +
vertical-align:middle;
 +
overflow:hidden;
 +
}
 +
#SliderNext2 a, #SliderPrev2 a {
 +
text-decoration:none;
 +
display:block;
 +
width:100%;
 +
font-weight:bold;
 +
font-size:150%;
 +
}
 +
#SliderNext2, #SliderPrev2 {
 +
width:1.5em;
 +
text-align:center;
 +
position:relative;
 +
}
 +
#SliderNext2 {
 +
border-top-left-radius:1em;
 +
border-bottom-left-radius:1em;
 +
left:-1.5em;
 +
height:2em;
 +
z-index:3;
 +
}
 +
#SliderNext2 a {
 +
height:100%;
 +
background-image:url(https://static.igem.org/mediawiki/2013/d/da/Heidelberg_slider_Arrrow_next.png);
 +
background-position:0% 100%;
 +
background-size: 130% auto;
 +
}
 +
#SliderNext2 a:hover {
 +
background-position:0% 0%;
 +
}
 +
#SliderPrev2 {
 +
border-top-right-radius:1em;
 +
border-bottom-right-radius:1em;
 +
left:1.3em;
 +
z-index:2;
 +
border-left:1px solid #555;
 +
box-shadow:0px 1px 2px 1px #555
 +
}
 +
#SliderPrev2 a {
 +
background-color:#FFCC44;
 +
color:#888;
 +
line-height:1.5em;
 +
}
 +
#SliderPrev2 a:hover {
 +
background-color:#FFCC00;
 +
color:#292929;
 +
}
 +
#Slider2 {
 +
width:40em;
 +
height:14em;
 +
display:auto;
 +
border:1px solid #292929;
 +
border-radius:0.5em;
 +
background-color:#DDD;
 +
box-shadow:0px 2px 4px 5px #909090;
 +
z-index:1;
 +
margin:1.5em 0em;
 +
}
 +
#SliderUl2 {
 +
list-style:none;
 +
position:relative;
 +
left:10em;
 +
margin:0px;
 +
padding:0px;
 +
-webkit-transition: 0.5s left;
 +
-moz-transition: 0.5s left;
 +
-ms-transition: 0.5s left;
 +
-o-transition: 0.5s left;
 +
}
 +
#SliderUl2 li {
 +
float:left;
 +
width:20em;
 +
height:14em;
 +
}
 +
#SliderUl2 img, #SliderUl2 div {
 +
height:100%;
 +
}
 +
</style>
 +
 +
<!-- End of Slider 2 -->
 +
 +
<!-- End of Sliders -->
Find all templates used on <a href="https://2013.igem.org/Team:Heidelberg/Templates">the templates page</a> with coresponding explanations.<br />
Find all templates used on <a href="https://2013.igem.org/Team:Heidelberg/Templates">the templates page</a> with coresponding explanations.<br />

Revision as of 15:57, 2 September 2013

PHILOSOPHER'S STONE

igem-2013

bli
bla
additional: blub

  • Link to Project Page

  • We did lot's of funny stuff

  • And we want to thank all our sponsors!

  • Link to Project Page

  • We did lot's of funny stuff

  • And we want to thank all our sponsors!

Find all templates used on the templates page with coresponding explanations.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Philosophers Stone

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

Philosophers Stone

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

Philosophers Stone

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

Philosophers Stone

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

Philosophers Stone

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

Philosophers Stone

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

Philosophers Stone

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

Philosophers Stone

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Philosophers Stone
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
THIS COULD BE YOUR HEADING
T
HIS COULD BE YOUR HEADING

Retrieved from "http://2013.igem.org/Team:Heidelberg/DesignTest"