Template:Team:Macquarie Australia/About
From 2014.igem.org
(Difference between revisions)
(26 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/ | + | <script src="https://2014.igem.org/Team:Macquarie_Australia/js/popup?action=raw&ctype=text/javascript" type="text/javascript""></script> |
+ | <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> | ||
+ | <script> | ||
+ | var modal = (function(){ | ||
+ | var | ||
+ | method = {}, | ||
+ | $overlay, | ||
+ | $modal, | ||
+ | $photo, | ||
+ | $close; | ||
+ | |||
+ | // Center the modal in the viewport | ||
+ | method.center = function () { | ||
+ | var top, left; | ||
+ | |||
+ | top = Math.max($(window).height() - $modal.outerHeight(), 0) / 2; | ||
+ | left = Math.max($(window).width() - $modal.outerWidth(), 0) / 2; | ||
+ | |||
+ | $modal.css({ | ||
+ | top:top + $(window).scrollTop(), | ||
+ | left:left + $(window).scrollLeft() | ||
+ | }); | ||
+ | }; | ||
+ | |||
+ | // Open the modal | ||
+ | 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> | ||
+ | |||
</head> | </head> | ||
<body> | <body> | ||
- | < | + | <div id=“overlay”></div> |
- | + | <section id="Content"> | |
- | <h2> | + | <h1>About the team!</h1> |
+ | <h2>The students</h2> | ||
<p> | <p> | ||
- | + | <div id="modal"> | |
- | + | <a href="#" id="eddie">Eddie Park</div> | |
- | + | </div> | |
- | + | ||
- | + | ||
- | + | ||
</p> | </p> | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
</section> | </section> | ||
- | |||
</body> | </body> | ||
</html> | </html> |
Latest revision as of 05:55, 21 August 2014
About the team!
The students