Template:CSS/UT-Tokyo/CTCD/Contents

From 2014.igem.org

(Difference between revisions)
(Created page with "<html> <head> <style type="text/css"> #contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .visualClear, .firstHeading{ display: none; } /*-- hides def...")
 
(30 intermediate revisions not shown)
Line 1: Line 1:
<html>
<html>
<head>
<head>
 +
<script type="text/javascript">
 +
function changeIcon(URL) {
 +
var target = document.getElementsByTagName("link");
 +
var i = 0;
 +
for(i = 0;i<target.length;i++){
 +
if(target[i].rel == "shortcut icon"){
 +
target[i].parentNode.removeChild(target[i]);
 +
break;
 +
}
 +
}
 +
 +
var link = document.createElement("link");
 +
link.type = "image/x-icon";
 +
link.rel = "shortcut icon";
 +
link.href = URL;
 +
 +
document.getElementsByTagName("head")[0].appendChild(link);
 +
}
 +
 +
changeIcon("https://static.igem.org/mediawiki/2014/a/a9/Icon_32.gif");
 +
 +
</script>
<style type="text/css">
<style type="text/css">
#contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .visualClear, .firstHeading{
#contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .visualClear, .firstHeading{
Line 68: Line 90:
}
}
body {  
body {  
-
background-color: #000;
+
background-image: url('https://static.igem.org/mediawiki/2014/b/b9/Back.png');
width: 100%;
width: 100%;
margin: 0 auto;
margin: 0 auto;
Line 301: Line 323:
height:1550px;
height:1550px;
}
}
 +
#pageContents p{
 +
font-size:16px;
 +
}
 +
 +
#pageContents h3{
 +
color:#000;
 +
padding-left:40px;
 +
font-size:30px;
 +
margin-bottom:0px;
 +
}
 +
#pageContents h4{
 +
color:#000;
 +
padding-left:45px;
 +
font-size:20px;
 +
margin-bottom:0px;
 +
text-decoration:underline;
 +
}
 +
#pageContents h5{
 +
color:#000;
 +
padding-left:50px;
 +
font-size:18px;
 +
margin-bottom:0px;
 +
font-weight:normal;
 +
text-decoration:underline;
 +
}
 +
#contentsBody #pageContents p{
#contentsBody #pageContents p{
color:#000;
color:#000;
Line 332: Line 380:
}
}
ul.subContList li a{
ul.subContList li a{
 +
display:block;
color:#DDDDDD;
color:#DDDDDD;
-
margin-left:30px;
+
margin-left:45px;
font-size:20px;
font-size:20px;
text-decoration:none;
text-decoration:none;
 +
text-indent:-1.0em;
}
}
img#RightTop{
img#RightTop{
Line 403: Line 453:
font-size:medium;
font-size:medium;
}
}
-
p.name{
+
#pageContents p.name{
font-size:40px;
font-size:40px;
margin-left:30px;
margin-left:30px;
Line 411: Line 461:
font-size:medium;
font-size:medium;
}
}
 +
#bttop img{
 +
height:50px;
 +
float:right;
 +
position:fixed;
 +
bottom:20px;
 +
left:50%;
 +
margin-left:480px;
 +
filter:alpha(opacity=40);
 +
-moz-opacity: 0.4;
 +
opacity: 0.4;
 +
}
 +
#bttop img:hover{
 +
filter:alpha(opacity=100);
 +
-moz-opacity: 1;
 +
opacity: 1;
 +
}
 +
img.figure{
 +
width:800px;
 +
padding-left:50px;
 +
}
 +
img.figure-height{
 +
width:400px;
 +
padding-left:50px;
 +
}
 +
#pageContents p.noIndent{
 +
text-indent:0px;
 +
}
 +
legend{
 +
font-size:16px;
 +
margin-left:100px;
 +
margin-right:100px;
 +
}
 +
img.math{
 +
padding-left:50px;
 +
}
 +
img.sponsor{
 +
height:50px;
 +
padding-left:50px;
 +
}
 +
legend{
 +
font-size:16px;
 +
margin-left:100px;
 +
margin-right:100px;
 +
}
 +
img.attribution{
 +
float:left;
 +
width:400px;
 +
padding-left:50px;
 +
}
 +
#contentsBody #pageContents p.attr{
 +
float:left;
 +
width:420px;
 +
padding-left:20px;
 +
margin-top:0px;
 +
}
 +
table{
 +
background-color:#FFF;
 +
}
 +
#contentsBody #pageContents p.sponsors{
 +
position:absolute;
 +
left:40%;
 +
}
 +
</style>
</style>
<script type="text/javascript" language="Javascript">
<script type="text/javascript" language="Javascript">
Line 424: Line 537:
node.childNodes[0].childNodes[0].src = node.childNodes[0].childNodes[0].alt;
node.childNodes[0].childNodes[0].src = node.childNodes[0].childNodes[0].alt;
node.childNodes[0].childNodes[0].alt = temp;
node.childNodes[0].childNodes[0].alt = temp;
 +
}
 +
function close(cname){
 +
var clnode = document.getElementById(cname);
 +
 +
if(clnode.childNodes[0].childNodes[0].src.indexOf("open") != -1){
 +
clnode.childNodes[2].style.display = "none";
 +
var temp = clnode.childNodes[0].childNodes[0].src;
 +
clnode.childNodes[0].childNodes[0].src = clnode.childNodes[0].childNodes[0].alt;
 +
clnode.childNodes[0].childNodes[0].alt = temp;
 +
}
}
}
Line 440: Line 563:
}
}
-
function loadContent(cont){
+
function loadContent(cont,link){
-
+
document.title = "CTCD | UT-Tokyo 2014";
 +
 
 +
$('html,body').animate({
 +
scrollTop: 0
 +
}, 300);
 +
 
 +
var loading = document.getElementById("loading-img");
 +
 
 +
loading.style.display = "block";
 +
 
var node = document.getElementById("pageContents");
var node = document.getElementById("pageContents");
for(var i = 0;i < node.childNodes.length; i++){
for(var i = 0;i < node.childNodes.length; i++){
Line 448: Line 580:
}
}
}
}
 +
-
if(cont){
+
var list = new Array(7);
-
var str = cont;
+
list[0] = "Project";
 +
list[1] = "Result";
 +
list[2] = "Lab";
 +
list[3] = "Modeling";
 +
list[4] = "Achievement";
 +
list[5] = "Attribution";
 +
list[6] = "Humanpractice";
 +
 +
if(typeof cont !== "undefined"){
 +
if(cont != "Team-top"){
 +
if(cont != "Safety-block"){
 +
var op = cont.replace("-block","");
 +
var opNode = document.getElementById(op);
 +
if(opNode.childNodes[0].childNodes[0].src.indexOf("open") == -1){
 +
open(op);
 +
}
 +
}
 +
}
}else{
}else{
-
if(window.location.search){
+
var tmp;
-
var str = window.location.search.substring(1,window.location.search.length);
+
if(typeof getUrlVars()["page"] != "undefined"){
 +
tmp = getUrlVars()["page"];
}else{
}else{
-
var str = "Project-top";
+
tmp = "Project-block";
 +
}
 +
if(tmp != "Team-top"){
 +
if(tmp != "Safety-block"){
 +
var op = tmp.replace("-block","");
 +
var opNode = document.getElementById(op);
 +
if(opNode.childNodes[0].childNodes[0].src.indexOf("open") == -1){
 +
open(op);
 +
}
 +
}
}
}
}
}
 +
 +
var i;
 +
for(i = 0;i<7;i++){
 +
if(list[i] != op){
 +
close(list[i]);
 +
}
 +
}
 +
 +
if(typeof cont === "undefined"){
 +
if(typeof getUrlVars()["page"] !== "undefined"){
 +
var str = getUrlVars()["page"];
 +
}else{
 +
var str = "Project-block";
 +
}
 +
}else{
 +
var str = cont;
 +
}
 +
var node = document.getElementById(str);
var node = document.getElementById(str);
 +
 +
var hoge = 0;
 +
 +
var read = "#" + str;
 +
var loC = "https://2014.igem.org/Team:UT-Tokyo/CTCD/Content/" + str.replace("-block","") + "?action=raw";
 +
var existCheck = node.getElementsByTagName("div");
 +
if(existCheck.length == 0){
 +
$(read).load(loC,function(data){
 +
if(data == null){
 +
$(read).append("読み込みに失敗しました");
 +
}
 +
});
 +
hoge = 1;
 +
}else{
 +
hoge = 1;
 +
}
 +
 +
var box = document.getElementsByClassName("pageContentsBox");
 +
var pc = document.getElementById("pageContents");
 +
if(str == "Project-block"){
 +
box[0].style.height = "4100px";
 +
pc.style.height = "4050px";
 +
}else if(str == "Result-block"){
 +
box[0].style.height = "1400px";
 +
pc.style.height = "1350px";
 +
}else if(str == "Lab-block"){
 +
box[0].style.height = "112400px";
 +
pc.style.height = "112350px";
 +
}else if(str == "Modeling-block"){
 +
box[0].style.height = "1300px";
 +
pc.style.height = "1250px";
 +
}else if(str == "Achievement-block"){
 +
box[0].style.height = "1600px";
 +
pc.style.height = "1550px";
 +
}else if(str == "Safety-block"){
 +
box[0].style.height = "2700px";
 +
pc.style.height = "2650px";
 +
}else if(str == "Attribution-block"){
 +
box[0].style.height = "5100px";
 +
pc.style.height = "5050px";
 +
}else if(str == "Humanpractice-block"){
 +
box[0].style.height = "10050px";
 +
pc.style.height = "10000px";
 +
}else if(str == "Team-top"){
 +
box[0].style.height = "2500px";
 +
pc.style.height = "2450px";
 +
}
 +
loading.style.display = "none";
node.style.display = "block";
node.style.display = "block";
 +
 +
if(str != "Team-top"){
 +
var btnode = document.getElementById("bttop");
 +
btnode.style.display = "block";
 +
}
 +
var huga = setInterval(function(){
 +
if(hoge == 1){
 +
if(typeof link !== "undefined"){
 +
if(link == "top"){
 +
$("#contentsBody").mCustomScrollbar("scrollTo","top");
 +
clearInterval(huga);
 +
}else if(document.getElementById(link) != null){
 +
var href = "#" + link;
 +
var target = $(href);
 +
$("#contentsBody").mCustomScrollbar("scrollTo",target);
 +
clearInterval(huga);
 +
}
 +
}else{
 +
if(typeof getUrlVars()["contents"] !== "undefined"){
 +
if(document.getElementById(getUrlVars()["contents"]) != null){
 +
var href = "#" + getUrlVars()["contents"];
 +
var target = $(href);
 +
$("#contentsBody").mCustomScrollbar("scrollTo",target);
 +
clearInterval(huga);
 +
}
 +
}else{
 +
$("#contentsBody").mCustomScrollbar("scrollTo","top");
 +
clearInterval(huga);
 +
}
 +
}
 +
}
 +
},500);
 +
var team = document.getElementById("Team-top");
 +
if(team.style.display != "none"){
-
$('#isotope').isotope({
+
$('#isotope').isotope({
-
itemSelector: '.element-item',
+
itemSelector: '.element-item',
-
layoutMode:'packery'
+
layoutMode:'packery'
-
});
+
});
-
var node = document.getElementById("isotope");
+
var node = document.getElementById("isotope");
-
var divs = new Array();
+
var divs = new Array();
-
var count = 0;
+
var count = 0;
-
+
-
for(var i = 0;i<node.childNodes.length;i++){
+
for(var i = 0;i<node.childNodes.length;i++){
-
if(node.childNodes[i].nodeType == 1){
+
if(node.childNodes[i].nodeType == 1){
-
divs[count] = node.childNodes[i];
+
divs[count] = node.childNodes[i];
-
count++;
+
count++;
 +
}
}
}
-
}
+
-
+
for(var i = 0;i<divs.length;i++){
-
for(var i = 0;i<divs.length;i++){
+
divs[i].onclick = function(){
-
divs[i].onclick = function(){
+
var det = this.getElementsByClassName("detail");
-
var det = this.getElementsByClassName("detail");
+
if(det[0]){
-
if(det[0]){
+
if(det[0].style.display != "block"){
-
if(det[0].style.display != "block"){
+
var check = this.getElementsByClassName("thumbnail");
-
var check = this.getElementsByClassName("thumbnail");
+
if(check[0]){
-
if(check[0]){
+
var flag = false;
-
var flag = false;
+
if(check[0].style.display != "none"){
-
if(check[0].style.display != "none"){
+
flag = true;
-
flag = true;
+
}
}
}
-
}
 
-
 
-
var nodes = document.getElementsByClassName("detail")
 
-
for(var j = 0;j<nodes.length;j++){
+
var nodes = document.getElementsByClassName("detail")
-
nodes[j].style.display = "none";
+
-
}
+
for(var j = 0;j<nodes.length;j++){
-
var nodes = document.getElementsByClassName("thumbnail")
+
nodes[j].style.display = "none";
-
+
}
-
for(var j = 0;j<nodes.length;j++){
+
var nodes = document.getElementsByClassName("thumbnail")
-
nodes[j].style.display = "block";
+
-
}
+
for(var j = 0;j<nodes.length;j++){
-
+
nodes[j].style.display = "block";
-
var thumb = this.getElementsByClassName("thumbnail");
+
}
-
if(det[0]){
+
var thumb = this.getElementsByClassName("thumbnail");
-
if(flag){
+
-
det[0].style.display = "block";
+
if(det[0]){
-
thumb[0].style.display = "none";
+
if(flag){
 +
det[0].style.display = "block";
 +
thumb[0].style.display = "none";
 +
}
}
}
}
}
}
}
 +
 +
$('#isotope').isotope({
 +
itemSelector: '.element-item',
 +
layoutMode:'packery'
 +
});
}
}
-
 
-
$('#isotope').isotope({
 
-
itemSelector: '.element-item',
 
-
layoutMode:'packery'
 
-
});
 
}
}
-
}
+
var node = document.getElementsByClassName("closebutton");
-
 
+
for(var i = 0;i<node.length;i++){
-
var node = document.getElementsByClassName("closebutton");
+
node[i].onclick = function(e){
-
for(var i = 0;i<node.length;i++){
+
var par = this.parentNode.parentNode.parentNode;
-
node[i].onclick = function(e){
+
var det = par.getElementsByClassName("detail");
-
var par = this.parentNode.parentNode.parentNode;
+
var thumb = par.getElementsByClassName("thumbnail");
-
var det = par.getElementsByClassName("detail");
+
if(det[0]){
-
var thumb = par.getElementsByClassName("thumbnail");
+
det[0].style.display = "none";
-
if(det[0]){
+
}
-
det[0].style.display = "none";
+
if(thumb[0]){
 +
thumb[0].style.display = "block";
 +
}
 +
$('#isotope').isotope({
 +
itemSelector: '.element-item',
 +
layoutMode:'packery'
 +
});
 +
e.stopPropagation();
 +
e.cancelBubble = true;
}
}
-
if(thumb[0]){
 
-
thumb[0].style.display = "block";
 
-
}
 
-
$('#isotope').isotope({
 
-
itemSelector: '.element-item',
 
-
layoutMode:'packery'
 
-
});
 
-
e.stopPropagation();
 
-
e.cancelBubble = true;
 
}
}
}
}
-
+
}
 +
function bttop(){
 +
$("#contentsBody").mCustomScrollbar("scrollTo","top");
}
}
</script>
</script>
-
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
+
<script type="text/javascript" src="https://2014.igem.org/Team:UT-Tokyo/jquery.min.js?action=raw&ctype=text/javascript"></script>
-
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>
+
<script src="https://2014.igem.org/Team:UT-Tokyo/jquery-ui.min.js?action=raw&ctype=text/javascript" type="text/javascript"></script>
-
<script src="https://2014.igem.org/Team:UT-Tokyo/jquery.easing.1.3.js?action=raw&ctype=text/javascript" type="text/javascript"></script>
+
<script src="https://2014.igem.org/Team:UT-Tokyo/getUrlVars.js?action=raw&ctype=text/javascript" type="text/javascript"></script><script src="https://2014.igem.org/Team:UT-Tokyo/jquery.easing.1.3.js?action=raw&ctype=text/javascript" type="text/javascript"></script>
<script src="https://2014.igem.org/Team:UT-Tokyo/jquery.mCustomScrollbar.js?action=raw&ctype=text/javascript" type="text/javascript"></script>
<script src="https://2014.igem.org/Team:UT-Tokyo/jquery.mCustomScrollbar.js?action=raw&ctype=text/javascript" type="text/javascript"></script>
<script src="https://2014.igem.org/Team:UT-Tokyo/jquery.mousewheel.min.js?action=raw&ctype=text/javascript" type="text/javascript"></script>
<script src="https://2014.igem.org/Team:UT-Tokyo/jquery.mousewheel.min.js?action=raw&ctype=text/javascript" type="text/javascript"></script>
Line 553: Line 815:
<link href="https://2014.igem.org/Team:UT-Tokyo/jquery.mCustomScrollbar.css?action=raw&ctype=text/css" rel="stylesheet" type="text/css">
<link href="https://2014.igem.org/Team:UT-Tokyo/jquery.mCustomScrollbar.css?action=raw&ctype=text/css" rel="stylesheet" type="text/css">
<script>
<script>
-
$(window).load(function() {
 
-
$("#contentsBody").mCustomScrollbar();
 
-
});
 
$(window).load( function() {
$(window).load( function() {
 +
$("#contentsBody").mCustomScrollbar({
 +
mouseWheelPixels: 250
 +
});
    
    
   $('#isotope').isotope({
   $('#isotope').isotope({

Latest revision as of 03:42, 18 October 2014

Retrieved from "http://2014.igem.org/Template:CSS/UT-Tokyo/CTCD/Contents"