Team:Kyoto/Human Practice/Lectures

From 2011.igem.org

(Difference between revisions)
(→Human Practice Lecture)
(→Human Practice Lecture)
Line 10: Line 10:
==Toudaizi gakuen high school==
==Toudaizi gakuen high school==
-
[[media:human_practice.pdf | Slides of the Lecture]]
+
<html>
 +
        <div id="backpanel">
 +
        <div id="album">
 +
<!-- start album -->
 +
            <div id="album_base">
 +
                <div class="album_panel panel1"></div>
 +
                <div class="album_panel panel2"></div>
 +
                <div class="album_panel panel3"></div>
 +
                <div class="album_panel panel4"></div>
 +
                <div class="album_panel panel5"></div>
 +
                <div class="album_panel panel6"></div>
 +
                <div class="album_panel panel7"></div>
 +
                <div class="album_panel panel8"></div>
 +
                <div class="album_panel panel9"></div>
 +
                <div class="album_panel panel10"></div>
 +
                <div class="album_panel panel11"></div>
 +
                <div class="album_panel panel12"></div>
 +
                <div class="album_panel panel13"></div>
 +
                <div class="album_panel panel14"></div>
 +
                <div class="album_panel panel15"></div>
 +
                <div class="album_panel panel16"></div>
 +
                <div class="album_panel panel17"></div>
 +
                <div class="album_panel panel8"></div>
 +
                <div class="album_panel panel19"></div>
 +
                <div class="album_panel panel20"></div>
 +
                <div class="album_panel panel21"></div>
 +
                <div class="album_panel panel22"></div>
 +
            </div>
 +
        </div>
 +
<!-- end album -->
 +
        </div>
 +
        <div id="control">
 +
            <input type="button" value="prev" onclick="prev()"></input>
 +
            <input type="button" value="next" onclick="next()"></input>
 +
        </div>
 +
<style type="text/css">#backpanel {
 +
    width: 700px;
 +
    height: 525px;
 +
    margin: 0px auto;
 +
    padding: 10px;
 +
    background-color: #eeeeee;
 +
}
 +
#album {
 +
    position: absolute;
 +
    width: 700px;
 +
    height: 525px;
 +
    margin: 0px;
 +
    padding: 0px;
 +
    overflow: hidden;
 +
}
 +
#album_base {
 +
    position: absolute;
 +
    width: 700px;
 +
    height: 525px;
 +
    background-color: #ffffff;
 +
}
 +
 +
.album_panel {
 +
    width: 700px;
 +
    height: 525px;
 +
    margin: 0px;
 +
    padding: 0px;
 +
    float: left;
 +
}
 +
 +
#control {
 +
    margin: 0px auto;
 +
    width: 350px;
 +
    text-align: center;
 +
}
 +
 +
.panel1 { background-image: url("images/igem Kyoto.001.png") }
 +
.panel2 { background-image: url("images/igem Kyoto.002.png") }
 +
.panel3 { background-image: url("images/igem Kyoto.003.png") }
 +
.panel4 { background-image: url("images/igem Kyoto.004.png") }
 +
.panel5 { background-image: url("images/igem Kyoto.005.png") }
 +
.panel6 { background-image: url("images/igem Kyoto.006.png") }
 +
.panel7 { background-image: url("images/igem Kyoto.007.png") }
 +
.panel8 { background-image: url("images/igem Kyoto.008.png") }
 +
.panel9 { background-image: url("images/igem Kyoto.009.png") }
 +
.panel10 { background-image: url("images/igem Kyoto.010.png") }
 +
.panel11 { background-image: url("images/igem Kyoto.011.png") }
 +
.panel12 { background-image: url("images/igem Kyoto.012.png") }
 +
.panel13 { background-image: url("images/igem Kyoto.013.png") }
 +
.panel14 { background-image: url("images/igem Kyoto.014.png") }
 +
.panel15 { background-image: url("images/igem Kyoto.015.png") }
 +
.panel16 { background-image: url("images/igem Kyoto.016.png") }
 +
.panel17 { background-image: url("images/igem Kyoto.017.png") }
 +
.panel18 { background-image: url("images/igem Kyoto.018.png") }
 +
.panel19 { background-image: url("images/igem Kyoto.019.png") }
 +
.panel20 { background-image: url("images/igem Kyoto.020.png") }
 +
.panel21 { background-image: url("images/igem Kyoto.021.png") }
 +
.panel22 { background-image: url("images/igem Kyoto.022.png") }
 +
</style>
 +
    <script src="http://code.jquery.com/jquery-latest.js"></script>
 +
    <script type="text/javascript" src="album.js"></script>
 +
    <script type="text/javascript">
 +
$(document).ready(function () {    var x_0 = 0;
 +
    var x_max = 0;
 +
 +
function init() {
 +
    var parent = $("#album_base");
 +
    var children = $("#album_base").children();
 +
    x_max = (children.length-1) * children.outerWidth();
 +
    parent.css("width",x_max+children.outerWidth());
 +
}
 +
 +
function prev() {
 +
    var base = $("#album_base");
 +
    if (base.position().left >= x_0) return;
 +
    var panel = base.children();
 +
    base.animate({
 +
        "left" : base.position().left+panel.outerWidth()
 +
    },500,function(){});
 +
}
 +
 +
function next() {
 +
    var base = $("#album_base");
 +
    if (base.position().left <= -x_max) return;
 +
    var panel = base.children();
 +
    base.animate({
 +
        "left" : base.position().left-panel.outerWidth()
 +
    },500,function(){});
 +
}
 +
    init();
 +
});
 +
    </script>
 +
</html>
[[file:toudai-ji1.jpg|350px]]
[[file:toudai-ji1.jpg|350px]]

Revision as of 14:36, 5 October 2011

Human Practice Lecture

We went to four high school and ELCAS, a special course of science aimed at high school students.
All Lectures were big successes.

Toudaizi gakuen high school

Toudai-ji1.jpg

Retrieved from "http://2011.igem.org/Team:Kyoto/Human_Practice/Lectures"