Template:Team:Macquarie Australia/About

From 2014.igem.org

(Difference between revisions)
 
(15 intermediate revisions not shown)
Line 1: Line 1:
{{Team:Macquarie_Australia/TopNavBar}}
{{Team:Macquarie_Australia/TopNavBar}}
-
<html>
+
<html>photo
<head>
<head>
<link href="https://2014.igem.org/Template:Team:Macquarie_Australia/css/global?action=raw&ctype=text/css" rel="stylesheet">
<link href="https://2014.igem.org/Template:Team:Macquarie_Australia/css/global?action=raw&ctype=text/css" rel="stylesheet">
-
<script src="https://2014.igem.org/Team:Macquarie_Australia/js/banner?action=raw&ctype=text/javascript" type="text/javascript""></script>
+
<script src="https://2014.igem.org/Team:Macquarie_Australia/js/popup?action=raw&ctype=text/javascript" type="text/javascript""></script>
-
<style>
+
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
-
#coverBack {
+
<script>
-
width: 100%;
+
var modal = (function(){
-
background-color: #333333;
+
var
-
position: absolute;
+
method = {},
-
left: 0px;
+
$overlay,
-
top: 0px;
+
$modal,
-
visibility: hidden;
+
$photo,
-
opacity:0.75;
+
$close;
-
filter:alpha(opacity=75);
+
-
z-index: 998;
+
-
}
+
-
#photoBox {
+
-
position: relative;
+
-
width: 600px;
+
-
top: 100px;
+
-
z-index: 999;
+
-
visibility: hidden;
+
-
height: 300px;
+
-
}
+
-
</style>
+
-
<script>
+
-
document.getElementById("coverBack”).style.height = window.screen.height;
+
-
// document.getElementById("coverBack”) finds an element with id cover
+
-
// window.screen.height returns the height of the window.
+
-
// So we set the height of cover div to height of window.
+
-
var winW, winH;
+
-
browserWindowSize();
+
-
document.getElementById(“photoBox").style.left = winW/2-300;
+
// Center the modal in the viewport
-
// we set the position of box from left to >> (center position of window) – (width of the box)
+
method.center = function () {
-
// Value of winW is obtained by function browserWindowSize(); which is defined below
+
var top, left;
-
// This function is taken from http://www.developersnippets.com/2007/05/13/cross-browser-snippet-for-finding-the-size-of-the-browser-window/
+
top = Math.max($(window).height() - $modal.outerHeight(), 0) / 2;
-
function browserWindowSize() {
+
left = Math.max($(window).width() - $modal.outerWidth(), 0) / 2;
-
        var browserWinWidth = 0, browserWinHeight = 0;
+
-
        if( typeof( window.innerWidth ) == ‘number’ ) {
+
-
                //Non-IE
+
-
                browserWinWidth = window.innerWidth;
+
-
                browserWinHeight = window.innerHeight;
+
-
        } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
+
-
                //IE 6+ in ‘standards compliant mode’
+
-
                browserWinWidth = document.documentElement.clientWidth;
+
-
                browserWinHeight = document.documentElement.clientHeight;
+
-
        } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
+
-
                //IE 4 compatible
+
-
                browserWinWidth = document.body.clientWidth;
+
-
                browserWinHeight = document.body.clientHeight;
+
-
        }
+
-
        winW = browserWinWidth;
+
-
        winH = browserWinHeight;
+
-
//      alert( ‘Browser Window Width = ‘ + browserWinWidth +’ Browser Window Height = ‘+browserWinHeight);
+
-
}
+
-
function coverIt() {
+
$modal.css({
-
        // Set the visiblity of cover to visible
+
top:top + $(window).scrollTop(),
-
        document.getElementById("coverBack”).style.visibility = "visible";
+
left:left + $(window).scrollLeft()
-
        // set the visibility of box to visible.
+
});
-
        document.getElementById(“photoBox").style.visibility = "visible";
+
};
-
}
+
 
-
// Call the function coverIt when somebody clicks on anything whose id it "initiator"
+
// Open the modal
-
document.getElementById(“init”).onclick = coverIt;
+
method.open = function (settings) {
 +
$photo.empty().append(settings.photo);
 +
 
 +
$modal.css({
 +
width: settings.width || 'auto',
 +
height: settings.height || 'auto'
 +
});
 +
 
 +
method.center();
 +
$(window).bind('resize.modal', method.center);
 +
$modal.show();
 +
$overlay.show();
 +
};
 +
 
 +
// Close the modal
 +
method.close = function () {
 +
$modal.hide();
 +
$overlay.hide();
 +
$photo.empty();
 +
$(window).unbind('resize.modal');
 +
};
 +
 
 +
// Generate the HTML and add it to the document
 +
$overlay = $('<div id="overlay"></div>');
 +
$modal = $('<div id="modal"></div>');
 +
$photo = $('<div id="photo"></div>');
 +
$close = $('<a id="close" href="#">close</a>');
 +
 
 +
$modal.hide();
 +
$overlay.hide();
 +
$modal.append($photo, $close);
 +
 
 +
$(document).ready(function(){
 +
$('body').append($overlay, $modal);
 +
});
 +
 
 +
$close.click(function(e){
 +
e.preventDefault();
 +
method.close();
 +
});
 +
 
 +
return method;
 +
}());
 +
 
 +
// Wait until the DOM has loaded before querying the document
 +
$(document).ready(function(){
 +
 
 +
$.get('ajax.html', function(data){
 +
modal.open({photo: data});
 +
});
 +
 
 +
$('a#eddie').click(function(e){
 +
modal.open({photo: ""});
 +
e.preventDefault();
 +
});
 +
});
 +
</script>
-
function backToNormal() {
 
-
// Set the visiblity of cover to hidden
 
-
document.getElementById("coverBack”).style.visibility = "hidden";
 
-
}
 
-
// Call the function backToNormal() when somebody clicks on cover
 
-
document.getElementById("coverBack”).onclick = backToNormal;
 
-
</script>
 
</head>
</head>
<body>
<body>
-
<div id=“coverBack”></div>
+
<div id=“overlay”></div>
<section id="Content">
<section id="Content">
<h1>About the team!</h1>
<h1>About the team!</h1>
<h2>The students</h2>
<h2>The students</h2>
<p>
<p>
-
<div id=“init”>
+
<div id="modal">
-
Click!
+
<a href="#" id="eddie">Eddie Park</div>
-
</div>
+
</div>
</p>
</p>

Latest revision as of 05:55, 21 August 2014

photo

About the team!

The students

Retrieved from "http://2014.igem.org/Template:Team:Macquarie_Australia/About"