Team:Hong Kong-CUHK/testingtesting

From 2014.igem.org

(Difference between revisions)
m
m
 
(5 intermediate revisions not shown)
Line 2: Line 2:
<head>
<head>
-
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
-
     <link href="css/bootstrap.min.css?action=raw&ctype=text/css" rel="stylesheet">
+
     <link href="https://2014.igem.org/Team:Hong_Kong-CUHK/css/bootstrap.min.css?action=raw&ctype=text/css" rel="stylesheet">
-
     <link href="css/common.css&action=raw&ctype=text/css" rel="stylesheet">
+
     <link href="https://2014.igem.org/Team:Hong_Kong-CUHK/css/common.css?action=raw&ctype=text/css" rel="stylesheet">
 +
    <script src="https://2014.igem.org/Team:Hong_Kong-CUHK/js/jquery-1.11.1.min.js?action=raw&ctype=text/javascript"></script>
 +
    <script src="https://2014.igem.org/Team:Hong_Kong-CUHK/js/bootstrap.min.js?action=raw&ctype=text/javascript"></script>
 +
    <script src="https://2014.igem.org/Team:Hong_Kong-CUHK/js/common.js?action=raw&ctype=text/javascript"></script>
 +
 
</head>
</head>
 +
 +
<style type="text/css">
 +
#board {
 +
    background-image: url('images/rail.png');
 +
    background-size: 100% 100%;
 +
    width: 700px;
 +
    height: 700px;
 +
}
 +
.chess {
 +
    background-size: 100% 100%;
 +
    width: 100px;
 +
    height: 100px;
 +
    position: absolute;
 +
    cursor: pointer;
 +
}
 +
.profile-pic {
 +
    background-size: 100% 100%;
 +
    width: 100px;
 +
    height: 100px;
 +
    position: absolute;
 +
    cursor: pointer;
 +
}
 +
.profile-dialog {
 +
    position: absolute;
 +
    box-shadow: 1px 1px 10px 0 #ccc;
 +
    background: rgba(255, 255, 255, 0.7);
 +
    padding: 10px;
 +
    font-size: 20px;
 +
    display: none;
 +
}
 +
.member-wrapper:hover > .profile-dialog {
 +
    display: block;
 +
}
 +
#train {
 +
    width: 620px;
 +
    height: 430px;
 +
    position: absolute;
 +
    background-size: contain;
 +
    background-repeat: no-repeat;
 +
    background-image: url('images/train-index.png');
 +
}
 +
</style>
<body>
<body>
-
     <div id="mainContent"></div>
+
 
 +
     <div class="row">
 +
        <div id="board" class="center-block">
 +
            <div id="train"></div>
 +
        </div>
 +
        <div id="top-bar"></div>
 +
    </div>
</body>
</body>
-
<script src="js/jquery-1.11.1.min.js?action=raw&ctype=text/javascript"></script>
+
 
-
<script src="js/bootstrap.min.js?action=raw&ctype=text/javascript"></script>
+
<script type="text/javascript">
-
<script src="js/common.js?action=raw&ctype=text/javascript"></script>
+
var content = {
 +
    menuItems: [{
 +
        info: {
 +
            about: "Project",
 +
            background: "images/menu/project.png",
 +
            backgroundHover: "images/menu/project-hover.png"
 +
        },
 +
        offset: {
 +
            top: 50,
 +
            left: 50
 +
        },
 +
        dialog: {
 +
            background: "#ff0000",
 +
            offset: {
 +
                top: 100,
 +
                left: 0
 +
            }
 +
        }
 +
    }, {
 +
        info: {
 +
            about: "Team",
 +
            background: "images/menu/team.png",
 +
            backgroundHover: "images/menu/team-hover.png"
 +
        },
 +
        offset: {
 +
            top: 150,
 +
            left: 300
 +
        },
 +
        dialog: {
 +
            background: "#ff0000",
 +
            offset: {
 +
                top: 0,
 +
                left: 100
 +
            }
 +
        }
 +
    }, {
 +
        info: {
 +
            about: "Biobricks",
 +
            background: "images/menu/biobricks.png",
 +
            backgroundHover: "images/menu/biobricks-hover.png"
 +
        },
 +
        offset: {
 +
            top: 500,
 +
            left: 180
 +
        },
 +
        dialog: {
 +
            background: "#ff0000",
 +
            offset: {
 +
                top: 0,
 +
                left: 100
 +
            }
 +
        }
 +
    }, {
 +
        info: {
 +
            about: "Modelling",
 +
            background: "images/menu/modelling.png",
 +
            backgroundHover: "images/menu/modelling-hover.png"
 +
        },
 +
        offset: {
 +
            top: 300,
 +
            left: 0
 +
        },
 +
        dialog: {
 +
            background: "#ff0000",
 +
            offset: {
 +
                top: 0,
 +
                left: 100
 +
            }
 +
        }
 +
    }, {
 +
        info: {
 +
            about: "Documentation",
 +
            background: "images/menu/documentation.png",
 +
            backgroundHover: "images/menu/documentation-hover.png"
 +
        },
 +
        offset: {
 +
            top: 600,
 +
            left: 400
 +
        },
 +
        dialog: {
 +
            background: "#ff0000",
 +
            offset: {
 +
                top: 0,
 +
                left: 100
 +
            }
 +
        }
 +
    }, {
 +
        info: {
 +
            about: "Human Practice",
 +
            background: "images/menu/human-practice.png",
 +
            backgroundHover: "images/menu/human-practice-hover.png"
 +
        },
 +
        offset: {
 +
            top: 70,
 +
            left: 500
 +
        },
 +
        dialog: {
 +
            background: "#ff0000",
 +
            offset: {
 +
                top: 0,
 +
                left: 100
 +
            }
 +
        }
 +
    }, {
 +
        info: {
 +
            about: "Safety",
 +
            background: "images/menu/safety.png",
 +
            backgroundHover: "images/menu/safety-hover.png"
 +
        },
 +
        offset: {
 +
            top: 300,
 +
            left: 550
 +
        },
 +
        dialog: {
 +
            background: "#ff0000",
 +
            offset: {
 +
                top: 0,
 +
                left: 100
 +
            }
 +
        }
 +
    }, {
 +
        info: {
 +
            about: "Acknowledgement",
 +
            background: "images/menu/acknowledgement.png",
 +
            backgroundHover: "images/menu/acknowledgement-hover.png"
 +
        },
 +
        offset: {
 +
            top: 425,
 +
            left: 600
 +
        },
 +
        dialog: {
 +
            background: "#ff0000",
 +
            offset: {
 +
                top: 0,
 +
                left: 100
 +
            }
 +
        }
 +
    }]
 +
};
 +
 
 +
$(document).ready(function() {
 +
 
 +
    $.each(content.menuItems, function(index, value) {
 +
        var wrapper = $('<div></div>')
 +
            .addClass('member-wrapper')
 +
            .css('position', 'relative')
 +
            .offset(value.offset);
 +
 
 +
        var dialog = $('<div></div>')
 +
            .addClass('profile-dialog')
 +
            .css('font-size', '18')
 +
            //.css('background', value.dialog.background)
 +
            .text(value.info.about)
 +
            .offset(value.dialog.offset);
 +
 
 +
        var chess = $('<div></div>')
 +
            .addClass('chess')
 +
            .data("index", index)
 +
            .css('background', "0px 0px/100% 100% url('" + value.info.background + "')")
 +
            .hover(function() {
 +
                $(this).css('background', "0px 0px/100% 100% url('" + value.info.backgroundHover + "')");
 +
            }, function() {
 +
                $(this).css('background', "0px 0px/100% 100% url('" + value.info.background + "')");
 +
            })
 +
            .click(function() {
 +
                location.href = 'home.html?' + value['about'];
 +
            });
 +
 
 +
        wrapper.append(chess);
 +
        wrapper.append(dialog);
 +
        $("#board").append(wrapper);
 +
    });
 +
});
 +
</script>
</html>
</html>

Latest revision as of 18:03, 14 October 2014

Retrieved from "http://2014.igem.org/Team:Hong_Kong-CUHK/testingtesting"