Difference between revisions of "Team:Freiburg"

 
(21 intermediate revisions by the same user not shown)
Line 3: Line 3:
 
<!-- styles for countdown -->
 
<!-- styles for countdown -->
 
<style>
 
<style>
−
body {
+
    body {
−
    text-align: right;
+
        text-align: right;
−
    /*            background: #00ECB9;*/
+
        /*            background: #00ECB9;*/
−
    font-family: sans-serif;
+
        font-family: sans-serif;
−
    font-weight: 100;
+
        font-weight: 100;
−
}
+
    }
−
 
+
   
−
hh6 {
+
    hh6 {
−
    margin-right: 30px;
+
        margin-right: 30px;
−
    color: black;
+
        color: black;
−
    font-weight: 0;
+
        font-weight: 0;
−
    font-size: 10px;
+
        font-size: 10px;
−
    /*            margin: 20px 0px 10px;*/
+
        /*            margin: 20px 0px 10px;*/
−
}
+
    }
−
 
+
   
−
#clockdiv {
+
    #clockdiv {
−
    font-family: sans-serif;
+
        font-family: sans-serif;
−
    color: #fff;
+
        color: #fff;
−
    display: inline-block;
+
        display: inline-block;
−
    font-weight: 10;
+
        font-weight: 10;
−
    text-align: center;
+
        text-align: center;
−
    font-size: 10px;
+
        font-size: 10px;
−
}
+
    }
−
 
+
   
−
#clockdiv>div {
+
    #clockdiv>div {
−
    padding: 5px;
+
        padding: 5px;
−
    border-radius: 3px;
+
        border-radius: 3px;
−
    /*            background: #00BF96;*/
+
        /*            background: #00BF96;*/
−
    display: inline-block;
+
        display: inline-block;
−
}
+
    }
−
 
+
   
−
#clockdiv div>span {
+
    #clockdiv div>span {
−
    padding: 5px;
+
        padding: 5px;
−
    border-radius: 3px;
+
        border-radius: 3px;
−
    background: black;
+
        background: black;
−
    display: inline-block;
+
        display: inline-block;
−
}
+
    }
−
 
+
   
−
.smalltext {
+
    .smalltext {
−
    color: black;
+
        color: black;
−
    padding-top: 5px;
+
        padding-top: 5px;
−
    font-size: 10px;
+
        font-size: 10px;
−
}
+
    }
−
 
+
    /*-------guided tou related styles---------*/
−
 
+
    /*-------guided tour style sheet-----------*/
−
/*-------guided tou related styles---------*/
+
   
−
 
+
    .wrap {
−
 
+
        position: relative;
−
/*-------guided tour style sheet-----------*/
+
        top: 40px;
−
 
+
        margin: auto;
−
.wrap {
+
        width: 800px;
−
    position: relative;
+
        overflow: hidden;
−
    top: 40px;
+
        height: 500px;
−
    margin: auto;
+
    }
−
    width: 800px;
+
   
−
    overflow: hidden;
+
    body {
−
    height: 500px;
+
        background-color: rgba(0, 0, 0, 0.5);
−
}
+
        max-height: 500px;
−
 
+
    }
−
body {
+
   
−
    background-color: rgba(0, 0, 0, 0.5);
+
    #slides {
−
    max-height: 500px;
+
        /*    width: 999999px;*/
−
}
+
        height: 20000px;
−
 
+
    }
−
#slides {
+
   
−
    /*    width: 999999px;*/
+
    #slides > div {
−
    height: 20000px;
+
        background-color: #fff7f2;
−
}
+
        height: 500px;
−
 
+
        width: 800px;
−
#slides > div {
+
        border-radius: 200px;
−
    background-color: #fff7f2;
+
        float: left;
−
    height: 500px;
+
        /*    margin-right: 200px;*/
−
    width: 800px;
+
        margin-bottom: 100px;
−
    border-radius: 200px;
+
        text-align: center;
−
    float: left;
+
        display: -webkit-flex;
−
    /*    margin-right: 200px;*/
+
        -webkit-flex-direction: row;
−
    margin-bottom: 100px;
+
        -webkit-justify-content: center;
−
    text-align: center;
+
        -webkit-align-items: center;
−
    display: -webkit-flex;
+
        display: flex;
−
    -webkit-flex-direction: row;
+
        flex-direction: row;
−
    -webkit-justify-content: center;
+
        justify-content: center;
−
    -webkit-align-items: center;
+
        align-items: center;
−
    display: flex;
+
        -webkit-transition: all 1s linear;
−
    flex-direction: row;
+
        transition: all 1s linear;
−
    justify-content: center;
+
    }
−
    align-items: center;
+
   
−
    -webkit-transition: all 1s linear;
+
    #slides h1,
−
    transition: all 1s linear;
+
    #slides h2,
−
}
+
    #slides h3,
−
 
+
    #slides h4,
−
#slides h1,
+
    #slides h5 {
−
#slides h2,
+
        color: #534741;
−
#slides h3,
+
        font-family: 'League Gothic', sans-serif;
−
#slides h4,
+
        letter-spacing: 5px;
−
#slides h5 {
+
    }
−
    color: #534741;
+
   
−
    font-family: 'League Gothic', sans-serif;
+
    #slides > div h2 {
−
    letter-spacing: 5px;
+
        font-size: 180px;
−
}
+
        line-height: 1em;
−
 
+
        margin: 0;
−
#slides > div h2 {
+
    }
−
    font-size: 180px;
+
   
−
    line-height: 1em;
+
    .sporiBtm {
−
    margin: 0;
+
        width: 55px;
−
}
+
        position: absolute;
−
 
+
        left: 83.5%;
−
.sporiBtm {
+
        top: 48%;
−
    width: 55px;
+
        -moz-transform: scaleX(-1);
−
    position: absolute;
+
        -o-transform: scaleX(-1);
−
    left: 71%;
+
        -webkit-transform: scaleX(-1);
−
    top: 47%;
+
        transform: scaleX(-1);
−
    -moz-transform: scaleX(-1);
+
    }
−
    -o-transform: scaleX(-1);
+
   
−
    -webkit-transform: scaleX(-1);
+
    .arrowRht {
−
    transform: scaleX(-1);
+
        width: 60px;
−
}
+
        position: absolute;
−
 
+
        left: 83%;
−
.arrowRht {
+
        top: 57%;
−
    width: 60px;
+
    }
−
    position: absolute;
+
   
−
    left: 70%;
+
    .arrowLft {
−
    top: 52%;
+
        width: 60px;
−
}
+
        position: absolute;
−
 
+
        left: 83%;
−
.arrowLft {
+
        top: 34%;
−
    width: 60px;
+
    }
−
    position: absolute;
+
   
−
    left: 70%;
+
    .arrowImg:hover img {
−
    top: 41%;
+
        -webkit-transform: scale(1.15);
−
}
+
        /* Safari and Chrome */
−
 
+
        -moz-transform: scale(1.15);
−
.arrowImg:hover img {
+
        /* Firefox */
−
    -webkit-transform: scale(1.15);
+
        -ms-transform: scale(1.15);
−
    /* Safari and Chrome */
+
        /* IE 9 */
−
    -moz-transform: scale(1.15);
+
        -o-transform: scale(1.15);
−
    /* Firefox */
+
        /* Opera */
−
    -ms-transform: scale(1.15);
+
        transform: scale(1.15);
−
    /* IE 9 */
+
    }
−
    -o-transform: scale(1.15);
+
   
−
    /* Opera */
+
    .gtContent {
−
    transform: scale(1.15);
+
        position: relative;
−
}
+
        width: 400px;
−
 
+
        left: 20px;
−
.gtContent {
+
        top: 60px;
−
    position: relative;
+
    }
−
    width: 400px;
+
   
−
    left: 20px;
+
    .gtContent2 {
−
    top: 60px;
+
        position: relative;
−
}
+
        width: 200px;
−
 
+
        left: 20px;
−
.gtContent2 {
+
        top: 40px;
−
    position: relative;
+
    }
−
    width: 200px;
+
   
−
    left: 20px;
+
    .gtContent3 {
−
    top: 40px;
+
        position: relative;
−
}
+
        width: 350px;
−
 
+
        left: 20px;
−
.gtContent3 {
+
        top: 60px;
−
    position: relative;
+
     }
−
    width: 350px;
+
   
−
     left: 20px;
+
    .gtContent4 {
−
     top: 60px;
+
        position: relative;
−
}
+
        top: 50px;
−
 
+
        left: 20px;
−
.gtBubble {
+
     }
−
    width: 500px;
+
   
−
    top: 10%;
+
    .gtContent5 {
−
    left: 20%;
+
        position: relative;
−
    position: absolute;
+
        width: 200px;
−
}
+
        left: 20px;
−
 
+
        top: 80px;
−
.gtBubble2 {
+
    }
−
    width: 700px;
+
   
−
    top: 10%;
+
    .gtBubble {
−
    left: 20%;
+
        width: 500px;
−
    position: absolute;
+
        top: 10%;
−
}
+
        left: 20%;
−
 
+
        position: absolute;
−
.gtSpori {
+
    }
−
    width: 300px;
+
   
−
    position: absolute;
+
    .gtBubble2 {
−
    left: 15%;
+
        width: 700px;
−
    top: 35%;
+
        top: 10%;
−
    z-index: 8;
+
        left: 20%;
−
}
+
        position: absolute;
−
 
+
    }
−
 
+
   
−
/*---------------------------------------------*/
+
    .gtSpori {
−
 
+
        width: 300px;
−
.info {
+
        position: absolute;
−
     /*            left: 25%;*/
+
        left: 0%;
−
    top: 10%;
+
        top: 35%;
−
    height: 800px;
+
        z-index: 8;
−
    width: 1000px;
+
    }
−
    /*            background-color: #299ac5;*/
+
    /*---------------------------------------------*/
−
    display: flex;
+
      
−
    flex-direction: column;
+
−
    /*            justify-content: center;*/
+
−
}
+
−
 
+
−
.color1 {
+
−
    /*  background-color: #299ac5;*/
+
−
    width: 100%;
+
−
    height: 3000px;
+
−
    text-align: center;
+
−
    font-size: 20px;
+
−
}
+
−
 
+
−
.container {
+
−
    display: flex;
+
−
    flex-direction: column;
+
−
    border-radius: 25px;
+
−
    background-color: rgba(0, 0, 0, 0.25);
+
−
    margin-top: 50px;
+
−
}
+
−
 
+
−
#c1,
+
−
#c2,
+
−
#c3 {
+
−
    height: 150px;
+
−
}
+
−
 
+
−
.open {
+
−
    display: flex;
+
−
    flex-direction: column;
+
−
}
+
−
 
+
−
#o1,
+
−
#o2,
+
−
#o3 {
+
−
    visibility: hidden;
+
−
}
+
−
 
+
−
.closed {
+
−
    display: flex;
+
−
}
+
−
 
+
−
#c1Img {
+
−
    position: relative;
+
−
    top: -7px;
+
−
    width: 90px;
+
−
}
+
−
 
+
−
.imgDiv {
+
−
    position: relative;
+
−
    left: 15%;
+
−
    top: 40px;
+
−
    width: 150px;
+
−
    height: 70px;
+
−
    /*            background-color: darkgrey;*/
+
−
}
+
−
 
+
−
.txtDiv {
+
−
    margin-left: 130px;
+
−
    margin-top: 60px;
+
−
    width: 460px;
+
−
    height: 70px;
+
−
    /*            background-color: darkgrey;*/
+
−
}
+
−
 
+
−
.resultDiv {
+
−
    margin-top: 20px;
+
−
    margin-left: 0px;
+
−
    top: 15px;
+
−
    width: 90%;
+
−
    /*            background-color: darkgrey;*/
+
−
}
+
−
 
+
−
#o1 reultDiv {
+
−
    height: 300px;
+
−
}
+
−
 
+
−
.txt2Div {
+
−
    margin-left: 20px;
+
−
    margin-top: 15px;
+
−
    width: 660px;
+
−
    height: 70px;
+
−
    /*            background-color: darkgrey;*/
+
−
}
+
−
 
+
−
.txt2Div div {
+
−
    margin-left: 30px;
+
−
}
+
−
 
+
−
.Arrow {
+
−
    margin-top: 40px;
+
−
    margin-left: 20px;
+
−
    width: 70px;
+
−
    height: 70px;
+
−
}
+
−
 
+
−
.Arrow img {
+
−
    width: 70px;
+
−
}
+
−
 
+
−
@media screen and (max-width: 500px) {
+
 
     .info {
 
     .info {
−
         margin-left: 2%;
+
         /*            left: 25%;*/
−
         -webkit-transform: scale(0.50);
+
         position: relative;
−
         -moz-transform: scale(0.50);
+
         top: 10%;
−
         -ms-transform: scale(0.50);
+
         height: 800px;
−
         transform: scale(0.50);
+
         width: 1000px;
−
         -ms-transform-origin: 0% 0%;
+
         /*            background-color: #299ac5;*/
−
         -webkit-transform-origin: 0% 0%;
+
         display: flex;
−
         transform-origin: 0% 0%;
+
        flex-direction: column;
 +
         /*            justify-content: center;*/
 
     }
 
     }
−
     #back-top {
+
      
 +
    .color1 {
 +
        /*  background-color: #299ac5;*/
 +
        width: 100%;
 +
        height: 3000px;
 +
        text-align: center;
 +
        font-size: 20px;
 +
    }
 +
   
 +
    .container {
 +
        display: flex;
 +
        flex-direction: column;
 +
        border-radius: 25px;
 +
        background-color: rgba(0, 0, 0, 0.25);
 +
        margin-top: 50px;
 +
    }
 +
   
 +
    #c1,
 +
    #c2,
 +
    #c3 {
 +
        height: 150px;
 +
    }
 +
   
 +
    .open {
 +
        display: flex;
 +
        flex-direction: column;
 +
        margin-top: -10px;
 +
    }
 +
   
 +
    #o1,
 +
    #o2,
 +
    #o3 {
 
         visibility: hidden;
 
         visibility: hidden;
 
     }
 
     }
−
}
+
   
 +
    .closed {
 +
        display: flex;
 +
    }
 +
   
 +
    #c1Img {
 +
        position: relative;
 +
        top: -7px;
 +
        width: 90px;
 +
    }
 +
   
 +
    .imgDiv {
 +
        position: relative;
 +
        left: 15%;
 +
        top: 40px;
 +
        width: 150px;
 +
        height: 70px;
 +
        /*            background-color: darkgrey;*/
 +
    }
 +
   
 +
    .txtDiv {
 +
        margin-left: 130px;
 +
        margin-top: 60px;
 +
        width: 460px;
 +
        height: 70px;
 +
        /*            background-color: darkgrey;*/
 +
    }
 +
   
 +
    .resultDiv {
 +
        margin-top: -30px;
 +
        margin-left: 50px;
 +
        top: 15px;
 +
        width: 90%;
 +
        /*            background-color: darkgrey;*/
 +
    }
 +
   
 +
    #o1 reultDiv {
 +
        height: 300px;
 +
    }
 +
   
 +
    .txt2Div {
 +
        margin-left: 20px;
 +
        margin-top: 15px;
 +
        width: 660px;
 +
        height: 70px;
 +
        /*            background-color: darkgrey;*/
 +
    }
 +
   
 +
    .txt2Div div {
 +
        margin-left: 30px;
 +
    }
 +
   
 +
    .Arrow {
 +
        margin-top: 40px;
 +
        margin-left: 20px;
 +
        width: 70px;
 +
        height: 70px;
 +
    }
 +
   
 +
    .Arrow img {
 +
        width: 70px;
 +
    }
 +
   
 +
    @media screen and (max-width: 500px) {
 +
        .info {
 +
            margin-left: 2%;
 +
            -webkit-transform: scale(0.40);
 +
            -moz-transform: scale(0.40);
 +
            -ms-transform: scale(0.40);
 +
            transform: scale(0.40);
 +
            -ms-transform-origin: 0% 0%;
 +
            -webkit-transform-origin: 0% 0%;
 +
            transform-origin: 0% 0%;
 +
        }
 +
        #back-top {
 +
            visibility: hidden;
 +
        }
 +
    }
 
</style>
 
</style>
 
<!-- end of style for countdown -->
 
<!-- end of style for countdown -->
Line 324: Line 333:
 
                 <br> On the following pages we want to show you how we use <i>Bacillus subtilis</i> endospores to reduce the side effects of systemically distributed medication.
 
                 <br> On the following pages we want to show you how we use <i>Bacillus subtilis</i> endospores to reduce the side effects of systemically distributed medication.
 
                 <br>
 
                 <br>
−
                 <br> Click on the menus to get more information or follow Spori through a guided tour (coming soon).
+
                 <br> Click on the menus to get more information or follow Spori through a guided tour.
 
             </font>
 
             </font>
 
         </div>
 
         </div>
Line 337: Line 346:
 
                         <div class="closed">
 
                         <div class="closed">
 
                             <div class='imgDiv'>
 
                             <div class='imgDiv'>
−
                                 <img id="c1Img" src="https://static.igem.org/mediawiki/2016/d/d1/T--Freiburg--Proof_of_Concept_Front1.png">
+
                                 <img id="c1Img" src="https://static.igem.org/mediawiki/2016/2/2e/T--Freiburg--Spori.png">
 
                             </div>
 
                             </div>
 
                             <div class='txtDiv'>
 
                             <div class='txtDiv'>
−
                                 <div>Please Click on the Arrow to begin the Guided Tour.
+
                                 <h3 style="color:rgb(189, 89, 22);">Please Click on the Arrow to begin the Guided Tour.
−
                                 </div>
+
                                 </h3>
 
                             </div>
 
                             </div>
 
                             <div class="Arrow">
 
                             <div class="Arrow">
Line 356: Line 365:
 
                                         <!-- load in slides -->
 
                                         <!-- load in slides -->
 
                                     </div>
 
                                     </div>
−
                                </div>
+
                                    <div class="arrowImg">
−
                                <div class="arrowImg">
+
                                        <img class="arrowLft" src="https://static.igem.org/mediawiki/2016/4/43/T--Freiburg--gtLeft.png" alt="Smiley face" onclick="Slides.prev()">
−
                                    <img class="arrowLft" src="https://static.igem.org/mediawiki/2016/4/43/T--Freiburg--gtLeft.png" alt="Smiley face" onclick="Slides.prev()">
+
                                    </div>
−
                                </div>
+
                                    <div class="">
−
                                <div class="">
+
                                        <img class="sporiBtm" src="https://static.igem.org/mediawiki/2016/d/d1/T--Freiburg--Proof_of_Concept_Front1.png" alt="Smiley face">
−
                                    <img class="sporiBtm" src="https://static.igem.org/mediawiki/2016/2/2e/T--Freiburg--Spori.png" alt="Smiley face">
+
                                    </div>
−
                                </div>
+
                                    <div class="arrowImg">
−
                                <div class="arrowImg">
+
                                        <img class="arrowRht" src="https://static.igem.org/mediawiki/2016/b/bd/T--Freiburg--gtRight.png" alt="Smiley face" onclick="Slides.next()">
−
                                    <img class="arrowRht" src="https://static.igem.org/mediawiki/2016/b/bd/T--Freiburg--gtRight.png" alt="Smiley face" onclick="Slides.next()">
+
                                    </div>
 
                                 </div>
 
                                 </div>
 
                             </div>
 
                             </div>
Line 370: Line 379:
 
                     </div>
 
                     </div>
 
                 </div>
 
                 </div>
−
        </div>
+
 
−
        </center>
+
            </center>
 
         </div>
 
         </div>
 
     </center>
 
     </center>
−
    <div id="hh6" style="font-size: 10px; margin-right:30px;">Wiki Freeze Countdown</div>
+
 
−
    <div id="clockdiv">
+
−
        <div>
+
−
            <span class="days"></span>
+
−
            <div class="smalltext">Days</div>
+
−
        </div>
+
−
        <div>
+
−
            <span class="hours"></span>
+
−
            <div class="smalltext">Hours</div>
+
−
        </div>
+
−
        <div>
+
−
            <span class="minutes"></span>
+
−
            <div class="smalltext">Minutes</div>
+
−
        </div>
+
−
        <div>
+
−
            <span class="seconds"></span>
+
−
            <div class="smalltext">Seconds</div>
+
−
        </div>
+
−
    </div>
+
 
     <script>
 
     <script>
−
    console.log("hello js");
+
        /////////////////////////////////////////////////////////////
  
−
    function getTimeRemaining(endtime) {
+
         // for opoening and closing GT tag
−
         var t = Date.parse(endtime) - Date.parse(new Date());
+
−
        var seconds = Math.floor((t / 1000) % 60);
+
−
        var minutes = Math.floor((t / 1000 / 60) % 60);
+
−
        var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
+
−
        var days = Math.floor(t / (1000 * 60 * 60 * 24));
+
−
        return {
+
−
            'total': t,
+
−
            'days': days,
+
−
            'hours': hours,
+
−
            'minutes': minutes,
+
−
            'seconds': seconds
+
−
        };
+
−
    }
+
  
−
    function initializeClock(id, endtime) {
+
        var c1Flag = 0;
−
         var clock = document.getElementById(id);
+
         var c1Arrow = document.getElementById('c1Arrow'); // Grabbing the sample  id
−
         var daysSpan = clock.querySelector('.days');
+
         var c1 = document.getElementById('c1');
−
         var hoursSpan = clock.querySelector('.hours');
+
         c1Arrow.addEventListener('click', function (e) { // When someone clicks on it
−
        var minutesSpan = clock.querySelector('.minutes');
+
            if (c1Flag == 0) {
−
        var secondsSpan = clock.querySelector('.seconds');
+
                c1.style.height = '700px';
 +
                c1Flag = 1;
 +
                $("#o1").css("visibility", "visible");
 +
                $("#c1Arrow").attr("src", "https://static.igem.org/mediawiki/2016/4/43/T--Freiburg--gtLeft.png");
 +
            } else {
 +
                c1.style.height = "150px";
 +
                c1Flag = 0;
 +
                $("#o1").css("visibility", "hidden");
 +
                $("#c1Arrow").attr("src", "https://static.igem.org/mediawiki/2016/b/bd/T--Freiburg--gtRight.png");
  
−
        function updateClock() {
 
−
            var t = getTimeRemaining(endtime);
 
−
 
−
            daysSpan.innerHTML = t.days;
 
−
            hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
 
−
            minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
 
−
            secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);
 
−
 
−
            if (t.total <= 0) {
 
−
                clearInterval(timeinterval);
 
 
             }
 
             }
−
         }
+
         });
−
 
+
−
        updateClock();
+
−
        var timeinterval = setInterval(updateClock, 1000);
+
−
    }
+
−
 
+
−
    //        var deadline = new Date(Date.parse(new Date()) + 31 * 24 * 60 * 60 * 1000);
+
−
    var deadline = new Date(2016, 9, 19, 0, 0, 0, 0)
+
−
 
+
−
    initializeClock('clockdiv', deadline);
+
−
 
+
−
    /////////////////////////////////////////////////////////////
+
−
 
+
−
    // for opoening and closing GT tag
+
−
 
+
−
    var c1Flag = 0;
+
−
    var c1Arrow = document.getElementById('c1Arrow'); // Grabbing the sample  id
+
−
    var c1 = document.getElementById('c1');
+
−
    c1Arrow.addEventListener('click', function(e) { // When someone clicks on it
+
−
        if (c1Flag == 0) {
+
−
            c1.style.height = '800px';
+
−
            c1Flag = 1;
+
−
            $("#o1").css("visibility", "visible");
+
−
            $("#c1Arrow").attr("src", "https://static.igem.org/mediawiki/2016/4/43/T--Freiburg--gtLeft.png");
+
−
        } else {
+
−
            c1.style.height = "100px";
+
−
            c1Flag = 0;
+
−
            $("#o1").css("visibility", "hidden");
+
−
            $("#c1Arrow").attr("src", "https://static.igem.org/mediawiki/2016/b/bd/T--Freiburg--gtRight.png");
+
−
 
+
−
        }
+
−
    });
+
  
  
  
−
    //GT
+
        //GT
−
    var Slides = {
+
        var Slides = {
−
        container: $('#slides'),
+
            container: $('#slides'),
  
−
        totalSlides: '',
+
            totalSlides: '',
  
−
        translateAmount: 0,
+
            translateAmount: 0,
  
−
        currentSlide: 0,
+
            currentSlide: 0,
  
−
        slideWidth: '',
+
            slideWidth: '',
  
−
        slideArray: [
+
            slideArray: [
 
             // 0
 
             // 0
 
             '<div>\n' +
 
             '<div>\n' +
Line 490: Line 435:
 
             '<div>\n' +
 
             '<div>\n' +
 
             '<img class="gtBubble" src="https://static.igem.org/mediawiki/2016/0/06/T--Freiburg--GT_s2.png" alt="Smiley face" onclick="" />\n' +
 
             '<img class="gtBubble" src="https://static.igem.org/mediawiki/2016/0/06/T--Freiburg--GT_s2.png" alt="Smiley face" onclick="" />\n' +
−
             '<video class="gtContent" width="320" height="240" controls> <source src="https://static.igem.org/mediawiki/2016/b/bb/T--Freiburg--GT_s2c1.mp4" type="video/mp4"></video>\n ' +
+
             '<div class="twoVids" style="display:inline-block">\n' +
 +
            '<img class="gtContent5" src="https://static.igem.org/mediawiki/2016/f/fd/T--Freiburg--GT_s2c1.gif" alt="Smiley face" onclick="" /> \n ' +
 +
            '<img class="gtContent5" src="https://static.igem.org/mediawiki/2016/3/3a/T--Freiburg--GT_s2c2.gif" alt="Smiley face" onclick="" /> \n ' +
 +
            '</div>\n' +
 
             '</div>',
 
             '</div>',
 
             // 3   
 
             // 3   
Line 519: Line 467:
 
             // 8     
 
             // 8     
 
             '<div>\n' +
 
             '<div>\n' +
−
             '<img class="gtBubble" src="https://static.igem.org/mediawiki/2016/3/36/T--Freiburg--GT_s8.png" alt="Smiley face" onclick="" />\n' +
+
             '<img class="gtBubble" src="https://static.igem.org/mediawiki/2016/5/55/T--Freiburg--GT_s8.2.png" alt="Smiley face" onclick="" />\n' +
 
             '<img class="gtContent" src="https://static.igem.org/mediawiki/2016/c/c9/T--Freiburg--GT_s8c.png" alt="Smiley face" onclick="" />\n ' +
 
             '<img class="gtContent" src="https://static.igem.org/mediawiki/2016/c/c9/T--Freiburg--GT_s8c.png" alt="Smiley face" onclick="" />\n ' +
 
             '</div>',
 
             '</div>',
Line 525: Line 473:
 
             '<div>\n' +
 
             '<div>\n' +
 
             '<img class="gtBubble" src="https://static.igem.org/mediawiki/2016/f/fd/T--Freiburg--GT_s9.png" alt="Smiley face" onclick="" />\n' +
 
             '<img class="gtBubble" src="https://static.igem.org/mediawiki/2016/f/fd/T--Freiburg--GT_s9.png" alt="Smiley face" onclick="" />\n' +
−
             '<video class="gtContent" width="320" height="240" controls> <source src="https://static.igem.org/mediawiki/2016/2/2a/T--Freiburg--GT_s9c1.mp4" type="video/mp4"></video>\n ' +
+
             '<div class="twoVids" style="display:inline-block">\n' +
 +
            '<video class="gtContent4" width="220" loop autoplay> <source src="https://static.igem.org/mediawiki/2016/2/2a/T--Freiburg--GT_s9c1.mp4" type="video/mp4"></video>\n ' +
 +
            '<video class="gtContent4" width="220" loop autoplay> <source src="https://static.igem.org/mediawiki/2016/2/2e/T--Freiburg--GT_s9c2.mp4" type="video/mp4"></video>\n ' +
 +
            '</div>\n' +
 
             '</div>',
 
             '</div>',
 
             // 10     
 
             // 10     
Line 545: Line 496:
 
         ],
 
         ],
  
−
        init: function(totalSlides) {
+
            init: function (totalSlides) {
−
            var each;
+
                var each;
  
−
            if (!totalSlides) throw new Error('Please pass the total number of slides.');
+
                if (!totalSlides) throw new Error('Please pass the total number of slides.');
−
            Slides.totalSlides = totalSlides;
+
                Slides.totalSlides = totalSlides;
  
−
            Slides.loadContent();
+
                Slides.loadContent();
  
−
            each = Slides.container.children('div');
+
                each = Slides.container.children('div');
  
−
            // Determine the width of our canvas
+
                // Determine the width of our canvas
−
            Slides.slideWidth = each.height() + (parseInt(each.css('margin-bottom'), 10));
+
                Slides.slideWidth = each.height() + (parseInt(each.css('margin-bottom'), 10));
  
−
            Slides.keyPress();
+
                Slides.keyPress();
−
            Slides.keyDown();
+
                Slides.keyDown();
−
        },
+
            },
  
−
        loadContent: function() {
+
            loadContent: function () {
−
            Slides.container.hide();
+
                Slides.container.hide();
−
            for (var i = 0; i < Slides.totalSlides; i++) {
+
                for (var i = 0; i < Slides.totalSlides; i++) {
−
                $('<div id="#slide-' + i + '"></div>')
+
                    $('<div id="#slide-' + i + '"></div>')
−
                    //                .load('slides/' + i + '.html')
+
                        //                .load('slides/' + i + '.html')
−
                    .html(Slides.slideArray[i])
+
                        .html(Slides.slideArray[i])
−
                    .appendTo(Slides.container);
+
                        .appendTo(Slides.container);
−
            }
+
−
            Slides.container.show();
+
−
        },
+
−
 
+
−
        keyDown: function() {
+
−
            console.log("keydown func");
+
−
            $(document.body).keydown(function(evt) {
+
−
                //            console.log(evt);
+
−
                var e = evt || window.event;
+
−
                console.log("key:", e.keyCode);
+
−
                // if left or right arrow key is pressed
+
−
                if (e.keyCode === 39 || e.keyCode === 37) {
+
−
                    e.preventDefault();
+
−
                    (e.keyCode === 39) ? Slides.next(): Slides.prev();
+
 
                 }
 
                 }
−
            });
+
                Slides.container.show();
−
        },
+
            },
  
−
        keyPress: function() {
+
            keyDown: function () {
−
            console.log("keypress func");
+
                console.log("keydown func");
−
            $(document.body).keypress(function(evt) {
+
                $(document.body).keydown(function (evt) {
−
                //            console.log(evt);
+
                    //            console.log(evt);
−
                var e = evt || window.event;
+
                    var e = evt || window.event;
−
                console.log("key:", e.keyCode);
+
                    console.log("key:", e.keyCode);
−
                // if left or right arrow key is pressed
+
                    // if left or right arrow key is pressed
−
                if (e.keyCode === 39 || e.keyCode === 37) {
+
                    if (e.keyCode === 39 || e.keyCode === 37) {
−
                    e.preventDefault();
+
                        e.preventDefault();
−
                    (e.keyCode === 39) ? Slides.next(): Slides.prev();
+
                        (e.keyCode === 39) ? Slides.next(): Slides.prev();
−
                }
+
                    }
−
            });
+
                });
−
        },
+
            },
  
 +
            keyPress: function () {
 +
                console.log("keypress func");
 +
                $(document.body).keypress(function (evt) {
 +
                    //            console.log(evt);
 +
                    var e = evt || window.event;
 +
                    console.log("key:", e.keyCode);
 +
                    // if left or right arrow key is pressed
 +
                    if (e.keyCode === 39 || e.keyCode === 37) {
 +
                        e.preventDefault();
 +
                        (e.keyCode === 39) ? Slides.next(): Slides.prev();
 +
                    }
 +
                });
 +
            },
  
−
        next: function() {
 
−
            console.log(Slides.totalSlides, Slides.currentSlide);
 
−
            if (Slides.currentSlide + 1 != Slides.totalSlides) {
 
−
                Slides.translateAmount -= Slides.slideWidth;
 
−
                Slides.updateHash(++Slides.currentSlide);
 
−
                Slides.animate();
 
−
            }
 
−
        },
 
  
−
        prev: function() {
+
            next: function () {
−
            // No more left to go back.
+
                console.log(Slides.totalSlides, Slides.currentSlide);
−
            if (Slides.translateAmount === 0) return;
+
                if (Slides.currentSlide + 1 != Slides.totalSlides) {
 +
                    Slides.translateAmount -= Slides.slideWidth;
 +
                    Slides.updateHash(++Slides.currentSlide);
 +
                    Slides.animate();
 +
                }
 +
            },
  
−
             Slides.translateAmount += Slides.slideWidth;
+
             prev: function () {
−
            Slides.updateHash(--Slides.currentSlide);
+
                // No more left to go back.
−
            Slides.animate();
+
                if (Slides.translateAmount === 0) return;
−
        },
+
  
−
        animate: function() {
+
                Slides.translateAmount += Slides.slideWidth;
−
            Slides
+
                 Slides.updateHash(--Slides.currentSlide);
−
                .container
+
                Slides.animate();
−
                .children()
+
            },
−
                 .css({
+
−
                    '-webkit-transform': 'translateY(' + Slides.translateAmount + 'px)',
+
−
                    'transform': 'translateY(' + Slides.translateAmount + 'px)'
+
−
                });
+
  
−
        },
+
            animate: function () {
 +
                Slides
 +
                    .container
 +
                    .children()
 +
                    .css({
 +
                        '-webkit-transform': 'translateY(' + Slides.translateAmount + 'px)',
 +
                        'transform': 'translateY(' + Slides.translateAmount + 'px)'
 +
                    });
  
−
        updateHash: function(direction) {
+
            },
−
            // Update current Slides and hash.
+
 
−
            location.hash = '#slide-' + Slides.currentSlide;
+
            updateHash: function (direction) {
−
        }
+
                // Update current Slides and hash.
−
    };
+
                location.hash = '#slide-' + Slides.currentSlide;
 +
            }
 +
        };
  
−
    Slides.init(13);
+
        Slides.init(13);
 
     </script>
 
     </script>
 
</body>
 
</body>
  
 
</html>
 
</html>

Latest revision as of 03:46, 20 October 2016

Menu

Welcome to the Team-Wiki from iGEM Freiburg 2016.



On the following pages we want to show you how we use Bacillus subtilis endospores to reduce the side effects of systemically distributed medication.

Click on the menus to get more information or follow Spori through a guided tour.

Please Click on the Arrow to begin the Guided Tour.

Smiley face
Smiley face
Smiley face
Smiley face