Team:Heidelberg/DesignTest

From 2013.igem.org

(Difference between revisions)
m
(First Slider draft)
Line 4: Line 4:
<html>
<html>
-
<h2>Version 1</h2>
+
<!-- Beginning of Slider -->
-
<!-- slider start-->
+
-
          <ul id="slides">
+
<script>
-
              <li class="slide-content">
+
var Slider = function() {this.initialize.apply(this, arguments)}
-
                    <div class="slide">
+
Slider.prototype = {
-
                      <img src="https://static.igem.org/mediawiki/2013/a/a4/Heidelberg_menu_symbol1.png">
+
-
                        <div class="slide-text">
+
-
                            <div class="slide-heading">
+
-
                                Symbol A
+
-
                            </div>
+
   
   
 +
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
 +
},
 +
goTo: function(index) {
 +
// circel through indices
 +
if (index < 0) index = this.li.length - 1;
 +
else if (index > this.li.length - 1) index = 0;
   
   
 +
// move <ul> left
 +
this.ul.style.left = '-' + (100 * index) + '%'
 +
 +
this.currentIndex = index
 +
},
 +
goToPrev: function() {
 +
this.goTo(this.currentIndex - 1)
 +
},
 +
goToNext: function() {
 +
this.goTo(this.currentIndex + 1)
 +
}
 +
}
 +
</script>
-
                            <p><a href="#">
+
<div id="SliderWrap">
-
                            link xy</a>  
+
<div id="SliderPrev"><a href="#" onclick="sliderMain.goToPrev();return(false);"><</a></div><!--
-
                          </p>
+
--><div id="Slider">
-
 
+
<ul id="SliderUl">
-
                        </div>
+
-
 
+
<li>
-
                        <div class="clear">
+
<div>
 +
<h2>Link to Project Page</h2>
</div>
</div>
-
                    </div>
+
</li>
-
                </li>
+
<li>
-
<li class="slide-content">
+
<div>
-
                    <div class="slide">
+
<h2>We did lot's of funny stuff</h2>
-
                      <img src="https://static.igem.org/mediawiki/2013/a/a4/Heidelberg_menu_symbol1.png">
+
-
                        <div class="slide-text">
+
-
                            <div class="slide-heading">
+
-
                                Symbol B
+
-
                            </div>
+
-
   
+
-
+
-
 
+
-
                            <p><a href="#">
+
-
                            link xy</a>
+
-
                          </p>
+
-
 
+
-
 
+
-
                        </div>
+
-
 
+
-
                        <div class="clear">
+
</div>
</div>
-
                    </div>
+
</li>
-
                </li>
+
<li>
-
<li class="slide-content">
+
<div>
-
                    <div class="slide">
+
<h2>And we want to thank all our sponsors!</h2>
-
                      <img src="https://static.igem.org/mediawiki/2013/a/a4/Heidelberg_menu_symbol1.png">
+
-
                        <div class="slide-text">
+
-
                            <div class="slide-heading">
+
-
                                Symbol C
+
-
                            </div>
+
-
+
-
+
-
 
+
-
                            <p><a href="#">
+
-
                            link xy</a>
+
-
                          </p>
+
-
 
+
-
 
+
-
                        </div>
+
-
 
+
-
                        <div class="clear">
+
</div>
</div>
-
                    </div>
+
</li>
-
                </li>
+
-
<li class="slide-content">
+
</ul>
-
                    <div class="slide">
+
-
                      <img src="https://static.igem.org/mediawiki/2013/a/a4/Heidelberg_menu_symbol1.png">
+
-
                        <div class="slide-text">
+
-
                            <div class="slide-heading">
+
-
                                Symbol D
+
-
                            </div>
+
-
+
-
+
-
 
+
-
                            <p><a href="#">
+
-
                            link xy</a>
+
-
                          </p>
+
-
 
+
-
 
+
-
                        </div>
+
-
 
+
-
                        <div class="clear">
+
-
</div>
+
-
                    </div>
+
-
                </li>
+
-
          </ul>
+
-
 
+
-
<!-- slider end-->
+
-
 
+
-
<h2>Version 2</h2>
+
-
<!-- slider start-->
+
-
<div id="slideshow">
+
-
 
+
-
    <ul class="slides">
+
-
        <li><img src="https://static.igem.org/mediawiki/2013/c/c4/Heidelberg_menu_symbol2.png" width="620" height="320" alt="Symbol A" /></li>
+
-
        <li><img src="https://static.igem.org/mediawiki/2013/c/c4/Heidelberg_menu_symbol2.png" width="620" height="320" alt="Symbol B" /></li>
+
-
        <li><img src="https://static.igem.org/mediawiki/2013/c/c4/Heidelberg_menu_symbol2.png" width="620" height="320" alt="Symbol C" /></li>
+
-
        <li><img src="https://static.igem.org/mediawiki/2013/c/c4/Heidelberg_menu_symbol2.png" width="620" height="320" alt="Symbol D" /></li>
+
-
    </ul>
+
-
    <span class="arrow previous"></span>
+
</div><!--
-
    <span class="arrow next"></span>
+
--><div id="SliderNext"><a href="#" onclick="sliderMain.goToNext();return(false);">></a></div>
</div>
</div>
 +
<script>
 +
var sliderMain = new Slider(document.getElementById("Slider"));
 +
window.setInterval("sliderMain.goToNext()", 2500);
 +
</script>
 +
<style type="text/css">
 +
#SliderWrap {
 +
width:80%;
 +
}
 +
#Slider, #SliderNext, #SliderPrev {
 +
display:inline-block;
 +
vertical-align:middle;
 +
background-color:#aaa;
 +
}
 +
#SliderNext a, #SliderPrev a {
 +
text-decoration:none;
 +
font-weight:bold;
 +
font-size:150%;
 +
}
 +
#SliderNext, #SliderPrev {
 +
width:1.5em;
 +
text-align:center;
 +
}
 +
#SliderNext {
 +
border-top-right-radius:1em;
 +
border-bottom-right-radius:1em;
 +
}
 +
#SliderPrev {
 +
border-top-left-radius:1em;
 +
border-bottom-left-radius:1em;
 +
}
 +
#Slider {
 +
overflow:hidden;
 +
width:40em;
 +
height:14em;
 +
display:auto;
 +
border:1px solid #aaa;
 +
border-radius:0.5em;
 +
}
 +
#SliderUl {
 +
list-style:none;
 +
position:relative;
 +
margin:0px;
 +
padding:0px;
 +
}
 +
#SliderUl li {
 +
float:left;
 +
width:40em;
 +
height:14em;
 +
}
 +
#SliderUl img, #SliderUl div {
 +
height:100%;
 +
}
 +
</style>
-
<!-- slider end-->
+
<!-- End of Slider -->
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 12:20, 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!

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.

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