Team:GeorgiaTech/Safety

From 2013.igem.org

(Difference between revisions)
m
m
Line 15: Line 15:
*/ </style>
*/ </style>
         <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
         <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
-
        <script src ="mainPage.js?action=raw&ctype=text/javascript"></script>
 
         <script type="text/javascript" src ="http://ricostacruz.com/jquery.transit/jquery.transit.min.js" type ="text/javascript"></script>
         <script type="text/javascript" src ="http://ricostacruz.com/jquery.transit/jquery.transit.min.js" type ="text/javascript"></script>
         <script src="jquery.sidr.min.js" type ="text/javascript"></script>
         <script src="jquery.sidr.min.js" type ="text/javascript"></script>
 +
        <script>
 +
$(document).ready(function() {
 +
 +
    $("#logo").load(reset);
 +
 +
    //Binds the functions to the masks
 +
    $("#logoMask").hover(
 +
            function() {
 +
                $("#gtLogo").show();
 +
                $("#menuText").show();
 +
            },
 +
            function() {
 +
                $("#gtLogo, #menuText").fadeOut();
 +
            }
 +
    );
 +
        $('#logoMask').sidr();
 +
});
 +
//Resets the positions of all the images
 +
function reset() {
 +
    //Calls when the logo is fully loaded.
 +
    var width = $(window).width();
 +
    $("p").addClass("text");
 +
    var pos = $("#logo").offset();
 +
    $("#gtLogo").css({
 +
        width: "39.7%",
 +
        position: "absolute",
 +
        top: (pos.top + 100) + "px",
 +
        left: pos.left + "px"
 +
    });
 +
    $("#bigCell, #bigCellRest").css({
 +
        width: "39.7%",
 +
        position: "fixed",
 +
        top: (pos.top + 100) + "px",
 +
        left: pos.left + "px"
 +
    });
 +
    //Sets the properties of the mask that is over GT logo.
 +
    $("#logoMask").css({
 +
        'cursor': "pointer",
 +
        position: "absolute",
 +
        top: (pos.top + 100 + $("#logo").outerHeight() * 0.1) + "px",
 +
        left: (pos.left + $("#logo").outerWidth() * 0.2) + "px"
 +
    });
 +
    $("#logoMask").height($("#logo").outerHeight() * 0.7 + "px");
 +
    $("#logoMask").width($("#logo").outerWidth() * 0.8 + "px");
 +
    $("#logoMask").children($("a")).css({
 +
        'position': "absolute",
 +
        'padding-left': $("#logoMask").outerWidth() + "px",
 +
        'padding-right': $("#logoMask").outerWidth() + +"px",
 +
        'padding-top': $("#logoMask").outerHeight() / 2 + "px",
 +
        'padding-bottom': $("#logoMask").outerHeight() / 2 + "px"
 +
    });
 +
 +
    //Sets the properties of the big cell mask
 +
    $("#bigCellMask").css({
 +
        'cursor': "pointer",
 +
        'position': "absolute",
 +
        'top': (pos.top + 100) + "px",
 +
        'left': (pos.left) + "px"
 +
    });
 +
 +
    $("#bigCellMask").show();
 +
 +
    $("#bigCellMask").height($("#logo").outerHeight() * 0.3 + "px");
 +
    $("#bigCellMask").width($("#logo").outerWidth() * 0.5 + "px");
 +
    $("#bigCellMask").children($("a")).css({
 +
        'position': "absolute",
 +
        'padding-left': $("#bigCellMask").outerWidth() + "px",
 +
        'padding-right': $("#bigCellMask").outerWidth() + +"px",
 +
        'padding-top': $("#bigCellMask").outerHeight() / 2 + "px",
 +
        'padding-bottom': $("#bigCellMask").outerHeight() / 2 + "px"
 +
    });
 +
 +
    $("#bigCellText").css({
 +
        'position': "absolute",
 +
        'top': (pos.top + 100) + "px",
 +
        'left': (pos.left - 180) + "px"
 +
    });
 +
    $("#menuText").css({
 +
        'position': "absolute",
 +
        'top': (pos.top + 100) + "px",
 +
        'left': (pos.left + width*0.35) + "px" 
 +
    });
 +
    $("#bigCellMask").hover(
 +
            function() {
 +
        pos = $("#logo").offset();
 +
            $("#bigCell, #bigCellRest").css({
 +
        width: "39.7%",
 +
        position: "fixed",
 +
        top: (pos.top + 100) + "px",
 +
        left: pos.left + "px"
 +
    });
 +
                $("#logo, #logoMask").hide();
 +
                $("#bigCell, #bigCellRest").show();
 +
                $("#bigCell").transition({rotate: "+=10"}, 1000);
 +
                $("#bigCellText").fadeIn();
 +
            },
 +
            function() {
 +
                $("#bigCell").css({rotate: "-=10"});
 +
                $("#bigCell, #bigCellRest").hide();
 +
                $("#logo, #logoMask").show();
 +
                $("#bigCellText").fadeOut();
 +
            }
 +
    );
 +
 +
    $("#bigCellMask").click(function() {
 +
        if (!$("#objective").is(":visible")) {
 +
            $("#sidr").show();
 +
            $("#bigCellMask").unbind("mouseleave");
 +
            $("#bigCellMask").unbind("mouseenter");
 +
            $("#bigCell").transition({scale:0.7, rotate: "-=10", x: -width * 0.4, y: -100}, 860, 'ease');
 +
            $("#bigCellMask, #bigCellRest").transition({scale:0.7, x: -width * 0.4, y:-100}, 1000, 'ease');
 +
 +
            $("#bigCellText").transition({x: width * 0.4, y: '-100'}, 1000, 'ease');
 +
            $("#objective").css({
 +
                position: "absolute",
 +
                top: "150 px",
 +
                left: (width * 0.5) + "px",
 +
                width: width*0.4 + "px"
 +
            });
 +
            $("#objective").show();
 +
        } else {
 +
            $("#objective").hide();
 +
            $("#bigCell, #bigCellRest").fadeOut();
 +
            $("logo").delay("5000").fadeIn();
 +
            location.reload();
 +
        }
 +
    });
 +
}
 +
 +
$(window).bind('resize', function() {
 +
location.reload();
 +
}); </script>
         <link rel="stylesheet" href="stylesheets/jquery.sidr.light.css"></link>
         <link rel="stylesheet" href="stylesheets/jquery.sidr.light.css"></link>
<link rel="stylesheet" type="text/css" href="https://2013.igem.org/Team:Cornell/stylesheets/foundation?action=raw&ctype=text/css"/>
<link rel="stylesheet" type="text/css" href="https://2013.igem.org/Team:Cornell/stylesheets/foundation?action=raw&ctype=text/css"/>
Line 49: Line 180:
     <body style="text-align: left">
     <body style="text-align: left">
 +
        <script src ="Team:GeorgiaTech/mainPage.js?action=raw"></script>
 +
         <img id = "logo" src = "https://static.igem.org/mediawiki/2013/f/f0/GeorgiaTech_team.png" class = "logo" alt ="GT iGEM logo"></img>
         <img id = "logo" src = "https://static.igem.org/mediawiki/2013/f/f0/GeorgiaTech_team.png" class = "logo" alt ="GT iGEM logo"></img>
         <img id = "gtLogo" src = "https://static.igem.org/mediawiki/2013/e/e5/LogoGT%280.01degree%29.png" style = "display:none" alt ="GT logo"></img>
         <img id = "gtLogo" src = "https://static.igem.org/mediawiki/2013/e/e5/LogoGT%280.01degree%29.png" style = "display:none" alt ="GT logo"></img>

Revision as of 14:17, 27 September 2013


Georgia Tech iGEM

wqweqwe

Retrieved from "http://2013.igem.org/Team:GeorgiaTech/Safety"