Difference between revisions of "Team:Tokyo Tech/Team"

(Prototype team page)
 
Line 1: Line 1:
 +
<!--
 
{{Tokyo_Tech}}
 
{{Tokyo_Tech}}
 
<html>
 
<html>
Line 37: Line 38:
  
  
 +
</html>
 +
-->
 +
 +
<!-- from here -->
 +
<html lang=en-US>
 +
<head>
 +
    <title>gem</title>
 +
    <meta charset="UTF-8" />
 +
    <style type="text/css">
 +
<!--
 +
body{
 +
    background: #052d5d;
 +
}
 +
#main_contents{
 +
    margin: 0 auto;
 +
    min-width: 800px;
 +
    max-width: 1010px;
 +
}
 +
.container{
 +
    margin: 0 auto;
 +
    min-width: 790px;
 +
    max-width: 1000px;
 +
    background: #ffffff;
 +
}
 +
.member_header{
 +
    background: #ffffff;
 +
    text-align: center;
 +
}
 +
.member_header span{
 +
    border-bottom: 2px solid #052d5d;
 +
}
 +
#member_list_division{
 +
    min-width: 800px;
 +
}
 +
#member_list{
 +
    width: 790px;
 +
}
 +
#member_list li{
 +
    display: inline-block;
 +
    width: 15%;
 +
    float: left;
 +
}
 +
#member_list li a{
 +
    display: block
 +
    margin: 0;
 +
    text-decoration: none;
 +
}
 +
#member_list li a:hover{
 +
    background: #cccccc;
 +
}
 +
#member_contents{
 +
    min-width: 800px;
 +
    clear: both;
 +
}
 +
#member_image{
 +
    width: 300px;
 +
    height: 200px;
 +
    margin-left: 10px;
 +
    margin-right: auto;
 +
    float: left;
 +
}
 +
#member_profile{
 +
    width: 400px;
 +
    height: 200px;
 +
    margin-left: auto;
 +
    margin-right: 10px;
 +
    float: left;
 +
}
 +
#member_comment{
 +
    height: 200px;
 +
    margin: 0 10px;
 +
    padding: 10px auto;
 +
    clear: both;
 +
}
 +
.on{
 +
    border: 3px solid #000000;
 +
}
 +
.off{
 +
    border: 3px solid #ffffff;
 +
}
 +
.profile_header{
 +
    text-align:right;
 +
    color: #7f7f7f;
 +
}
 +
--></style>
 +
</head>
 +
<body>
 +
    <div id="main_contents">
 +
    <div id="team_page_header" class="container">
 +
<h1 align="center">About Us</h1>
 +
    </div><!-- /team_page_header -->
 +
    <div id="student" class="container">
 +
<div id="student_header" class="member_header">
 +
    <h2><span>Team Members</span></h2>
 +
</div><!-- /student_header -->
 +
<div id="member_list_division">
 +
    <ul id="member_list">
 +
    </ul><!-- member_list -->
 +
</div><!-- /member_list_division -->
 +
<div id="member_contents">
 +
    <div id="member_image"></div><!-- /member_image -->
 +
    <div id="member_profile"></div><!-- /member_profile -->
 +
    <div id="member_comment"></div><!-- /member_comment -->
 +
</div><!-- /member_contents -->
 +
    </div><!-- /student -->
 +
   
 +
    <div id="instructor" class="container">
 +
<div id="instructor_header" class="member_header">
 +
    <h2><span>Instructors</span></h2>
 +
</div><!-- /intstructor_header -->
 +
<div id="instructor_content">
 +
    <p class="name"></p>
 +
</div><!-- /instructor_contetn -->
 +
    </div><!-- /instructor -->
 +
   
 +
    <div id="college" class="container">
 +
<div id="college_header" class="member_header">
 +
    <h2><span>College</span></h2>
 +
</div><!-- /college_header -->
 +
<div id="college_contents">
 +
    <a href="http://www.titech.ac.jp/english/about/overview/mission.html">About Tokyo Tech</a>
 +
</div><!-- /college_contents -->
 +
    </div><!-- /college -->
 +
    </div><!-- /main_contents -->
 +
    <!-- from here, javascript code -->
 +
    <script type="text/javascript">
 +
   
 +
    // Global constant definition
 +
   
 +
    // Number of member
 +
    var member_num = 2;
 +
   
 +
    // Selected Number
 +
    var now_sel = -1;
 +
   
 +
    /**
 +
    *  Array for member image
 +
    *  An element is full path of profile image
 +
    */
 +
    var images = [
 +
"http://blog-imgs-95.fc2.com/s/a/s/sasasasasa339/254979_439248012823160_582673604_n.jpg",
 +
"http://blog-imgs-95.fc2.com/s/a/s/sasasasasa339/U3kohmwj.jpg"
 +
    ];
 +
   
 +
    /**
 +
    *  Array for member profile
 +
    *  First element is name
 +
    *  Second element is school
 +
    *  Third element is department
 +
    *  Fourth element is cource (somethime null)
 +
    */
 +
    var profiles = [
 +
// for member1
 +
["Member1", "Biotechnology and Bioscience", "Biotechnology", "Biomolecule Engineering"],
 +
// for member2
 +
["Member2", "Technology", "Computer Science", null]
 +
    ];
 +
   
 +
    /**
 +
    *  Array for member comment
 +
    */
 +
    var comments = [
 +
        // for member1
 +
"I'm interested in iGEM.",
 +
// for member2
 +
"The reason I took part in iGEM is..."
 +
    ];
 +
   
 +
   
 +
    // Function definition
 +
   
 +
    // The function judging whether the argument is in bound
 +
    function inBound(arg){
 +
        return (arg>=0 && arg<member_num);
 +
    }
 +
   
 +
    // The function to load and write profile image
 +
    function write_image(index){
 +
        document.getElementById("member_image").innerHTML = '<img src="' + images[index] + '" width=200 />';
 +
    }
 +
   
 +
    // The function to write profile
 +
    function write_profile(index){
 +
var out = '<table border="0"><tbody>'
 +
+ '<tr><td class="profile_header">Name:</td><td>' + profiles[index][0] + '</td></tr>'
 +
+ '<tr><td class="profile_header">School:</td><td>' + profiles[index][1] + '</td></tr>'
 +
+ '<tr><td class="profile_header">Department:</td><td>' + profiles[index][2] + '</td></tr>';
 +
if(profiles[index][3] != null){
 +
    out += '<tr><td class="profile_header">Cource:</td><td>' + profiles[index][3] + '</td></tr>';
 +
}
 +
out += '</tbody></table>';
 +
 +
document.getElementById("member_profile").innerHTML = out;
 +
    }
 +
   
 +
    // The function to write comment
 +
    function write_comment(index){
 +
document.getElementById("member_comment").innerHTML = comments[index];
 +
    }
 +
   
 +
    // The function to change underline from pre-selected to selected
 +
    function change_selected(index){
 +
if(inBound(now_sel)){
 +
    element = document.getElementById('listId'+now_sel);
 +
    element.className = 'off';
 +
}
 +
element = document.getElementById('listId'+index);
 +
element.className = 'on';
 +
 +
now_sel = index;
 +
    }
 +
   
 +
    // The function changing page
 +
    function change(member_index /* member_name */){
 +
        var index = member_index;
 +
 +
/*
 +
        switch(member_name){
 +
  case "member1":
 +
    index = 0;
 +
    break;
 +
  case "member2":
 +
    index = 1;
 +
    break;
 +
  default:
 +
    index = -1;
 +
    break;
 +
}
 +
*/
 +
 +
if(inBound(index)){
 +
    write_image(index);
 +
    write_profile(index);
 +
    write_comment(index);
 +
    change_selected(index);
 +
} else {
 +
    alert('The selected member is undefined.');
 +
}
 +
    }
 +
   
 +
    // Procedure on page load
 +
    window.onload = function(){
 +
var i;
 +
var image_list = document.getElementById('member_list');
 +
for(i=0; i<member_num; i++){
 +
    var elemli = document.createElement('li');
 +
    elemli.innerHTML
 +
= '<a href="#" onclick="change(' + i + ');">'
 +
+ '<img src="' + images[i] + '" width=100 id="listId' + i + '" class="off"/>'
 +
+ '</a>';
 +
    image_list.appendChild(elemli);
 +
}
 +
    }
 +
    </script>
 +
</body>
 
</html>
 
</html>

Revision as of 07:59, 16 August 2016


gem

About Us

Team Members

Instructors