Team:Brown-Stanford/Templates/Main
From 2011.igem.org
(Difference between revisions)
Line 1: | Line 1: | ||
__NOTOC__<html lang="en"> | __NOTOC__<html lang="en"> | ||
- | + | <head> | |
- | + | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.js"></script> | |
- | + | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> | |
- | + | <script type="text/javascript"> | |
- | + | <!-- | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | /* | |
- | + | * Author: Marco Kuiper (http://www.marcofolio.net/) | |
- | + | */ | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | // Speed of the automatic slideshow | |
- | + | var slideshowSpeed = 20000; | |
- | + | ||
- | + | // Variable to store the images we need to set as background | |
- | + | // which also includes some text and url's. | |
+ | var photos = [ { | ||
+ | "image" : "https://static.igem.org/mediawiki/2011/a/a1/Brown-Stanford_BG1.jpg", | ||
+ | }, { | ||
+ | "image" : "https://static.igem.org/mediawiki/2011/8/81/Brown-Stanford_BG2.jpg", | ||
+ | }, { | ||
+ | "image" : "https://static.igem.org/mediawiki/2011/a/a9/Brown-Stanford_BG3.jpg", | ||
+ | }, { | ||
+ | "image" : "https://static.igem.org/mediawiki/2011/f/fd/Brown-Stanford_BG4.jpg", | ||
+ | }, { | ||
+ | "image" : "https://static.igem.org/mediawiki/2011/4/4c/Brown-Stanford_BG5.jpg", | ||
+ | }, { | ||
+ | "image" : "https://static.igem.org/mediawiki/2011/7/7f/Brown-Stanford_BG6.jpg", | ||
+ | } | ||
+ | ]; | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
+ | $(document).ready(function() { | ||
- | + | var interval; | |
- | + | var activeContainer = 1; | |
- | + | var currentImg = 0; | |
- | + | var animating = false; | |
- | + | var navigate = function(direction) { | |
- | + | // Check if no animation is running. If it is, prevent the action | |
- | + | if(animating) { | |
- | + | return; | |
- | + | } | |
- | + | ||
- | + | // Check which current image we need to show | |
- | + | if(direction == "next") { | |
- | + | currentImg++; | |
- | + | if(currentImg == photos.length + 1) { | |
- | + | currentImg = 1; | |
- | + | } | |
- | + | } | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | // Check which container we need to use | |
- | + | var currentContainer = activeContainer; | |
- | + | if(activeContainer == 1) { | |
- | + | activeContainer = 2; | |
- | + | } else { | |
- | + | activeContainer = 1; | |
- | + | } | |
- | + | ||
- | + | showImage(photos[currentImg - 1], currentContainer, activeContainer); | |
- | + | ||
- | + | }; | |
- | + | ||
- | + | var currentZindex = -1; | |
- | + | var showImage = function(photoObject, currentContainer, activeContainer) { | |
- | + | animating = true; | |
- | + | ||
- | + | // Make sure the new container is always on the background | |
- | + | currentZindex--; | |
- | + | ||
- | + | // Set the background image of the new active container | |
- | + | $("#headerimg" + activeContainer).css({ | |
- | + | "background-image" : "url(" + photoObject.image + ")", | |
- | + | "display" : "block", | |
- | + | "z-index" : currentZindex | |
- | + | }); | |
- | + | ||
- | + | // Fade out the current container | |
- | + | // and display the header text when animation is complete | |
- | // | + | $("#headerimg" + currentContainer).fadeOut(function() { |
- | + | setTimeout(function() { | |
- | + | animating = false; | |
- | + | }, 2000); | |
- | + | }); | |
+ | }; | ||
+ | |||
+ | var stopAnimation = function() { | ||
+ | // Change the background image to "play" | ||
+ | $("#control").css({ "background-image" : "url(images/btn_play.png)" }); | ||
+ | |||
+ | // Clear the interval | ||
+ | clearInterval(interval); | ||
+ | }; | ||
+ | |||
+ | // We should statically set the first image | ||
+ | navigate("next"); | ||
+ | |||
+ | // Start playing the animation | ||
+ | interval = setInterval(function() { | ||
+ | navigate("next"); | ||
+ | }, slideshowSpeed); | ||
+ | |||
+ | }); | ||
+ | --> | ||
+ | </script> | ||
- | + | <script type="text/javascript"> | |
- | + | $(document).ready(function() { | |
+ | $("#twitter").getTwitter({ | ||
+ | userName: "Brown_iGEM", | ||
+ | numTweets: 1, | ||
+ | loaderText: "Loading tweets...", | ||
+ | slideIn: true, | ||
+ | slideDuration: 750, | ||
+ | showHeading: true, | ||
+ | headingText: "Latest Tweets", | ||
+ | showProfileLink: true, | ||
+ | showTimestamp: true | ||
+ | }); | ||
+ | }); | ||
+ | </script> | ||
+ | <script type="text/javascript"> | ||
+ | (function($) { | ||
+ | /* | ||
+ | jquery.twitter.js v1.5 | ||
+ | Last updated: 08 July 2009 | ||
- | + | Created by Damien du Toit | |
- | + | http://coda.co.za/blog/2008/10/26/jquery-plugin-for-twitter | |
- | + | ||
- | + | Licensed under a Creative Commons Attribution-Non-Commercial 3.0 Unported License | |
+ | http://creativecommons.org/licenses/by-nc/3.0/ | ||
+ | */ | ||
- | + | $.fn.getTwitter = function(options) { | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | $.fn.getTwitter.defaults = { | |
+ | userName: null, | ||
+ | numTweets: 1, | ||
+ | loaderText: "Loading tweet...", | ||
+ | slideIn: true, | ||
+ | slideDuration: 750, | ||
+ | showHeading: true, | ||
+ | headingText: "Latest Tweets", | ||
+ | showProfileLink: true, | ||
+ | showTimestamp: true | ||
+ | }; | ||
- | + | var o = $.extend({}, $.fn.getTwitter.defaults, options); | |
- | + | ||
- | + | return this.each(function() { | |
- | + | var c = $(this); | |
- | + | // hide container element, remove alternative content, and add class | |
- | + | c.hide().empty().addClass("twitted"); | |
- | + | ||
- | + | ||
- | + | // add heading to container element | |
- | + | if (o.showHeading) { | |
- | + | c.append("<h2>"+o.headingText+"</h2>"); | |
+ | } | ||
- | + | // add twitter list to container element | |
+ | var twitterListHTML = "<ul id=\"twitter_update_list\"><li></li></ul>"; | ||
+ | c.append(twitterListHTML); | ||
- | + | var tl = $("#twitter_update_list"); | |
- | + | ||
- | + | // hide twitter list | |
- | + | tl.hide(); | |
- | + | ||
- | + | // add preLoader to container element | |
- | + | var preLoaderHTML = $("<p class=\"preLoader\">"+o.loaderText+"</p>"); | |
- | + | c.append(preLoaderHTML); | |
- | + | ||
- | + | ||
- | + | // add Twitter profile link to container element | |
- | + | if (o.showProfileLink) { | |
+ | var profileLinkHTML = "<p class=\"profileLink\"><a href=\"http://twitter.com/"+o.userName+"\">http://twitter.com/"+o.userName+"</a></p>"; | ||
+ | c.append(profileLinkHTML); | ||
+ | } | ||
- | + | // show container element | |
- | + | c.show(); | |
- | + | ||
- | + | ||
- | + | $.getScript("http://twitter.com/javascripts/blogger.js"); | |
- | + | $.getScript("http://twitter.com/statuses/user_timeline/"+o.userName+".json?callback=twitterCallback2&count="+o.numTweets, function() { | |
- | + | // remove preLoader from container element | |
- | + | $(preLoaderHTML).remove(); | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | // remove timestamp and move to title of list item | |
- | + | if (!o.showTimestamp) { | |
- | + | tl.find("li").each(function() { | |
+ | var timestampHTML = $(this).children("a"); | ||
+ | var timestamp = timestampHTML.html(); | ||
+ | timestampHTML.remove(); | ||
+ | $(this).attr("title", timestamp); | ||
+ | }); | ||
+ | } | ||
- | + | // show twitter list | |
- | + | if (o.slideIn) { | |
- | + | var tlHeight = tl.data("originalHeight"); | |
- | + | ||
- | + | ||
- | + | ||
- | + | // get the original height | |
- | + | if (!tlHeight) { | |
- | + | tlHeight = tl.show().height(); | |
- | + | tl.data("originalHeight", tlHeight); | |
- | + | tl.hide().css({height: 0}); | |
+ | } | ||
- | + | tl.show().animate({height: tlHeight}, o.slideDuration); | |
- | + | } | |
+ | else { | ||
+ | tl.show(); | ||
+ | } | ||
- | + | // add unique class to first list item | |
- | + | tl.find("li:first").addClass("firstTweet"); | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | // add unique class to last list item | |
- | + | tl.find("li:last").addClass("lastTweet"); | |
+ | }); | ||
+ | }); | ||
+ | }; | ||
+ | })(jQuery); | ||
+ | </script> | ||
+ | <script type="text/javascript"> | ||
+ | /* | ||
+ | * jQuery Easing v1.3 - http://gsgd.co.uk/sandbox/jquery/easing/ | ||
+ | * | ||
+ | * Uses the built in easing capabilities added In jQuery 1.1 | ||
+ | * to offer multiple easing options | ||
+ | * | ||
+ | * TERMS OF USE - jQuery Easing | ||
+ | * | ||
+ | * Open source under the BSD License. | ||
+ | * | ||
+ | * Copyright c 2008 George McGinley Smith | ||
+ | * All rights reserved. | ||
+ | * | ||
+ | * Redistribution and use in source and binary forms, with or without modification, | ||
+ | * are permitted provided that the following conditions are met: | ||
+ | * | ||
+ | * Redistributions of source code must retain the above copyright notice, this list of | ||
+ | * conditions and the following disclaimer. | ||
+ | * Redistributions in binary form must reproduce the above copyright notice, this list | ||
+ | * of conditions and the following disclaimer in the documentation and/or other materials | ||
+ | * provided with the distribution. | ||
+ | * | ||
+ | * Neither the name of the author nor the names of contributors may be used to endorse | ||
+ | * or promote products derived from this software without specific prior written permission. | ||
+ | * | ||
+ | * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY | ||
+ | * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF | ||
+ | * MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE | ||
+ | * COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, | ||
+ | * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE | ||
+ | * GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED | ||
+ | * AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING | ||
+ | * NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED | ||
+ | * OF THE POSSIBILITY OF SUCH DAMAGE. | ||
+ | * | ||
+ | */ | ||
+ | |||
+ | // t: current time, b: begInnIng value, c: change In value, d: duration | ||
+ | jQuery.easing['jswing'] = jQuery.easing['swing']; | ||
+ | |||
+ | jQuery.extend( jQuery.easing, | ||
+ | { | ||
+ | def: 'easeOutQuad', | ||
+ | swing: function (x, t, b, c, d) { | ||
+ | //alert(jQuery.easing.default); | ||
+ | return jQuery.easing[jQuery.easing.def](x, t, b, c, d); | ||
+ | }, | ||
+ | easeInQuad: function (x, t, b, c, d) { | ||
+ | return c*(t/=d)*t + b; | ||
+ | }, | ||
+ | easeOutQuad: function (x, t, b, c, d) { | ||
+ | return -c *(t/=d)*(t-2) + b; | ||
+ | }, | ||
+ | easeInOutQuad: function (x, t, b, c, d) { | ||
+ | if ((t/=d/2) < 1) return c/2*t*t + b; | ||
+ | return -c/2 * ((--t)*(t-2) - 1) + b; | ||
+ | }, | ||
+ | easeInCubic: function (x, t, b, c, d) { | ||
+ | return c*(t/=d)*t*t + b; | ||
+ | }, | ||
+ | easeOutCubic: function (x, t, b, c, d) { | ||
+ | return c*((t=t/d-1)*t*t + 1) + b; | ||
+ | }, | ||
+ | easeInOutCubic: function (x, t, b, c, d) { | ||
+ | if ((t/=d/2) < 1) return c/2*t*t*t + b; | ||
+ | return c/2*((t-=2)*t*t + 2) + b; | ||
+ | }, | ||
+ | easeInQuart: function (x, t, b, c, d) { | ||
+ | return c*(t/=d)*t*t*t + b; | ||
+ | }, | ||
+ | easeOutQuart: function (x, t, b, c, d) { | ||
+ | return -c * ((t=t/d-1)*t*t*t - 1) + b; | ||
+ | }, | ||
+ | easeInOutQuart: function (x, t, b, c, d) { | ||
+ | if ((t/=d/2) < 1) return c/2*t*t*t*t + b; | ||
+ | return -c/2 * ((t-=2)*t*t*t - 2) + b; | ||
+ | }, | ||
+ | easeInQuint: function (x, t, b, c, d) { | ||
+ | return c*(t/=d)*t*t*t*t + b; | ||
+ | }, | ||
+ | easeOutQuint: function (x, t, b, c, d) { | ||
+ | return c*((t=t/d-1)*t*t*t*t + 1) + b; | ||
+ | }, | ||
+ | easeInOutQuint: function (x, t, b, c, d) { | ||
+ | if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b; | ||
+ | return c/2*((t-=2)*t*t*t*t + 2) + b; | ||
+ | }, | ||
+ | easeInSine: function (x, t, b, c, d) { | ||
+ | return -c * Math.cos(t/d * (Math.PI/2)) + c + b; | ||
+ | }, | ||
+ | easeOutSine: function (x, t, b, c, d) { | ||
+ | return c * Math.sin(t/d * (Math.PI/2)) + b; | ||
+ | }, | ||
+ | easeInOutSine: function (x, t, b, c, d) { | ||
+ | return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b; | ||
+ | }, | ||
+ | easeInExpo: function (x, t, b, c, d) { | ||
+ | return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b; | ||
+ | }, | ||
+ | easeOutExpo: function (x, t, b, c, d) { | ||
+ | return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b; | ||
+ | }, | ||
+ | easeInOutExpo: function (x, t, b, c, d) { | ||
+ | if (t==0) return b; | ||
+ | if (t==d) return b+c; | ||
+ | if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b; | ||
+ | return c/2 * (-Math.pow(2, -10 * --t) + 2) + b; | ||
+ | }, | ||
+ | easeInCirc: function (x, t, b, c, d) { | ||
+ | return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b; | ||
+ | }, | ||
+ | easeOutCirc: function (x, t, b, c, d) { | ||
+ | return c * Math.sqrt(1 - (t=t/d-1)*t) + b; | ||
+ | }, | ||
+ | easeInOutCirc: function (x, t, b, c, d) { | ||
+ | if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b; | ||
+ | return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b; | ||
+ | }, | ||
+ | easeInElastic: function (x, t, b, c, d) { | ||
+ | var s=1.70158;var p=0;var a=c; | ||
+ | if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3; | ||
+ | if (a < Math.abs(c)) { a=c; var s=p/4; } | ||
+ | else var s = p/(2*Math.PI) * Math.asin (c/a); | ||
+ | return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b; | ||
+ | }, | ||
+ | easeOutElastic: function (x, t, b, c, d) { | ||
+ | var s=1.70158;var p=0;var a=c; | ||
+ | if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3; | ||
+ | if (a < Math.abs(c)) { a=c; var s=p/4; } | ||
+ | else var s = p/(2*Math.PI) * Math.asin (c/a); | ||
+ | return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b; | ||
+ | }, | ||
+ | easeInOutElastic: function (x, t, b, c, d) { | ||
+ | var s=1.70158;var p=0;var a=c; | ||
+ | if (t==0) return b; if ((t/=d/2)==2) return b+c; if (!p) p=d*(.3*1.5); | ||
+ | if (a < Math.abs(c)) { a=c; var s=p/4; } | ||
+ | else var s = p/(2*Math.PI) * Math.asin (c/a); | ||
+ | if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b; | ||
+ | return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b; | ||
+ | }, | ||
+ | easeInBack: function (x, t, b, c, d, s) { | ||
+ | if (s == undefined) s = 1.70158; | ||
+ | return c*(t/=d)*t*((s+1)*t - s) + b; | ||
+ | }, | ||
+ | easeOutBack: function (x, t, b, c, d, s) { | ||
+ | if (s == undefined) s = 1.70158; | ||
+ | return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b; | ||
+ | }, | ||
+ | easeInOutBack: function (x, t, b, c, d, s) { | ||
+ | if (s == undefined) s = 1.70158; | ||
+ | if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b; | ||
+ | return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b; | ||
+ | }, | ||
+ | easeInBounce: function (x, t, b, c, d) { | ||
+ | return c - jQuery.easing.easeOutBounce (x, d-t, 0, c, d) + b; | ||
+ | }, | ||
+ | easeOutBounce: function (x, t, b, c, d) { | ||
+ | if ((t/=d) < (1/2.75)) { | ||
+ | return c*(7.5625*t*t) + b; | ||
+ | } else if (t < (2/2.75)) { | ||
+ | return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b; | ||
+ | } else if (t < (2.5/2.75)) { | ||
+ | return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b; | ||
+ | } else { | ||
+ | return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b; | ||
+ | } | ||
+ | }, | ||
+ | easeInOutBounce: function (x, t, b, c, d) { | ||
+ | if (t < d/2) return jQuery.easing.easeInBounce (x, t*2, 0, c, d) * .5 + b; | ||
+ | return jQuery.easing.easeOutBounce (x, t*2-d, 0, c, d) * .5 + c*.5 + b; | ||
+ | } | ||
+ | }); | ||
+ | |||
+ | /* | ||
+ | * | ||
+ | * TERMS OF USE - EASING EQUATIONS | ||
+ | * | ||
+ | * Open source under the BSD License. | ||
+ | * | ||
+ | * Copyright c 2001 Robert Penner | ||
+ | * All rights reserved. | ||
+ | * | ||
+ | * Redistribution and use in source and binary forms, with or without modification, | ||
+ | * are permitted provided that the following conditions are met: | ||
+ | * | ||
+ | * Redistributions of source code must retain the above copyright notice, this list of | ||
+ | * conditions and the following disclaimer. | ||
+ | * Redistributions in binary form must reproduce the above copyright notice, this list | ||
+ | * of conditions and the following disclaimer in the documentation and/or other materials | ||
+ | * provided with the distribution. | ||
+ | * | ||
+ | * Neither the name of the author nor the names of contributors may be used to endorse | ||
+ | * or promote products derived from this software without specific prior written permission. | ||
+ | * | ||
+ | * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY | ||
+ | * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF | ||
+ | * MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE | ||
+ | * COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, | ||
+ | * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE | ||
+ | * GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED | ||
+ | * AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING | ||
+ | * NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED | ||
+ | * OF THE POSSIBILITY OF SUCH DAMAGE. | ||
+ | * | ||
+ | */ | ||
+ | </script> | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | + | <script type="text/javascript"> | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
$(function() { | $(function() { | ||
- | + | /** | |
- | + | * for each menu element, on mouseenter, | |
- | + | * we enlarge the image, and show both sdt_active span and | |
- | + | * sdt_wrap span. If the element has a sub menu (sdt_box), | |
- | + | * then we slide it - if the element is the last one in the menu | |
- | + | * we slide it to the left, otherwise to the right | |
- | + | */ | |
$('#sdt_menu > li').bind('mouseenter',function(){ | $('#sdt_menu > li').bind('mouseenter',function(){ | ||
- | + | var $elem = $(this); | |
- | + | $elem.find('img') | |
- | + | .stop(true) | |
- | + | .animate({ | |
- | + | 'width':'170px', | |
- | + | 'height':'170px', | |
- | + | 'left':'0px' | |
- | + | },400,'easeOutBack') | |
- | + | .andSelf() | |
- | + | .find('.sdt_wrap') | |
- | + | .stop(true) | |
- | + | .animate({'top':'140px'},500,'easeOutBack') | |
- | + | .andSelf() | |
- | + | .find('.sdt_active') | |
- | + | .stop(true) | |
- | + | .animate({'height':'170px'},300,function(){ | |
- | + | var $sub_menu = $elem.find('.sdt_box'); | |
- | + | if($sub_menu.length){ | |
- | + | var left = '170px'; | |
- | + | if($elem.parent().children().length == $elem.index()+1) | |
- | + | left = '-170px'; | |
- | + | $sub_menu.show().animate({'left':left},200); | |
- | + | } | |
- | + | }); | |
- | + | }).bind('mouseleave',function(){ | |
- | + | var $elem = $(this); | |
- | + | var $sub_menu = $elem.find('.sdt_box'); | |
- | + | if($sub_menu.length) | |
- | + | $sub_menu.hide().css('left','0px'); | |
- | + | ||
- | + | $elem.find('.sdt_active') | |
- | + | .stop(true) | |
- | + | .animate({'height':'0px'},300) | |
- | + | .andSelf().find('img') | |
- | + | .stop(true) | |
- | + | .animate({ | |
- | + | 'width':'0px', | |
- | + | 'height':'0px', | |
- | + | 'left':'85px'},400) | |
- | + | .andSelf() | |
- | + | .find('.sdt_wrap') | |
- | + | .stop(true) | |
- | + | .animate({'top':'25px'},500); | |
- | + | }); | |
}); | }); | ||
- | + | </script> | |
- | + | <link href='http://fonts.googleapis.com/css?family=Nobile:regular,bold' rel='stylesheet' type='text/css'> | |
- | + | ||
- | </script>< | + | <script type="text/javascript" src="/Team:Brown-Stanford/lightbox/js?action=raw"></script> |
- | //< | + | |
- | + | <link href='http://fonts.googleapis.com/css?family=Ubuntu:regular,bold&subset=latin' rel='stylesheet' type='text/css'> | |
- | + | <style> | |
- | + | /** | |
+ | * jQuery lightBox plugin | ||
+ | * This jQuery plugin was inspired and based on Lightbox 2 by Lokesh Dhakar (http://www.huddletogether.com/projects/lightbox2/) | ||
+ | * and adapted to me for use like a plugin from jQuery. | ||
+ | * @name jquery-lightbox-0.5.css | ||
+ | * @author Leandro Vieira Pinho - http://leandrovieira.com | ||
+ | * @version 0.5 | ||
+ | * @date April 11, 2008 | ||
+ | * @category jQuery plugin | ||
+ | * @copyright (c) 2008 Leandro Vieira Pinho (leandrovieira.com) | ||
+ | * @license CCAttribution-ShareAlike 2.5 Brazil - http://creativecommons.org/licenses/by-sa/2.5/br/deed.en_US | ||
+ | * @example Visit http://leandrovieira.com/projects/jquery/lightbox/ for more informations about this jQuery plugin | ||
+ | */ | ||
+ | #jquery-overlay { | ||
+ | position: absolute; | ||
+ | top: 0; | ||
+ | left: 0; | ||
+ | z-index: 90; | ||
+ | width: 100%; | ||
+ | height: 500px; | ||
+ | } | ||
+ | #jquery-lightbox { | ||
+ | position: absolute; | ||
+ | top: 0; | ||
+ | left: 0; | ||
+ | width: 100%; | ||
+ | z-index: 100; | ||
+ | text-align: center; | ||
+ | line-height: 0; | ||
+ | } | ||
+ | #jquery-lightbox a img { border: none; } | ||
+ | #lightbox-container-image-box { | ||
+ | position: relative; | ||
+ | background-color: #fff; | ||
+ | width: 250px; | ||
+ | height: 250px; | ||
+ | margin: 0 auto; | ||
+ | } | ||
+ | #lightbox-container-image { padding: 10px; } | ||
+ | #lightbox-loading { | ||
+ | position: absolute; | ||
+ | top: 40%; | ||
+ | left: 0%; | ||
+ | height: 25%; | ||
+ | width: 100%; | ||
+ | text-align: center; | ||
+ | line-height: 0; | ||
+ | } | ||
+ | #lightbox-nav { | ||
+ | position: absolute; | ||
+ | top: 0; | ||
+ | left: 0; | ||
+ | height: 100%; | ||
+ | width: 100%; | ||
+ | z-index: 10; | ||
+ | } | ||
+ | #lightbox-container-image-box > #lightbox-nav { left: 0; } | ||
+ | #lightbox-nav a { outline: none;} | ||
+ | #lightbox-nav-btnPrev, #lightbox-nav-btnNext { | ||
+ | width: 49%; | ||
+ | height: 100%; | ||
+ | zoom: 1; | ||
+ | display: block; | ||
+ | } | ||
+ | #lightbox-nav-btnPrev { | ||
+ | left: 0; | ||
+ | float: left; | ||
+ | } | ||
+ | #lightbox-nav-btnNext { | ||
+ | right: 0; | ||
+ | float: right; | ||
+ | } | ||
+ | #lightbox-container-image-data-box { | ||
+ | font: 10px Verdana, Helvetica, sans-serif; | ||
+ | background-color: #fff; | ||
+ | margin: 0 auto; | ||
+ | line-height: 1.4em; | ||
+ | overflow: auto; | ||
+ | width: 100%; | ||
+ | padding: 0 10px 0; | ||
+ | } | ||
+ | #lightbox-container-image-data { | ||
+ | padding: 0 10px; | ||
+ | color: #666; | ||
+ | } | ||
+ | #lightbox-container-image-data #lightbox-image-details { | ||
+ | width: 70%; | ||
+ | float: left; | ||
+ | text-align: left; | ||
+ | } | ||
+ | #lightbox-image-details-caption { font-weight: bold; } | ||
+ | #lightbox-image-details-currentNumber { | ||
+ | display: block; | ||
+ | clear: left; | ||
+ | padding-bottom: 1.0em; | ||
+ | } | ||
+ | #lightbox-secNav-btnClose { | ||
+ | width: 66px; | ||
+ | float: right; | ||
+ | padding-bottom: 0.7em; | ||
+ | } | ||
+ | |||
+ | </style> | ||
+ | <style> | ||
+ | span.reference{ | ||
+ | position:fixed; | ||
+ | left:10px; | ||
+ | bottom:10px; | ||
+ | font-size:12px; | ||
+ | } | ||
+ | span.reference a{ | ||
+ | color:#aaa; | ||
+ | text-transform:uppercase; | ||
+ | text-decoration:none; | ||
+ | text-shadow:1px 1px 1px #000; | ||
+ | margin-right:30px; | ||
+ | } | ||
+ | span.reference a:hover{ | ||
+ | color:#ddd; | ||
+ | } | ||
+ | ul.sdt_menu{ | ||
+ | margin-top:150px; | ||
+ | } | ||
+ | </style> | ||
+ | |||
+ | <script> | ||
+ | $(document).ready(function() { | ||
+ | $('a.lightbox').lightBox(); // Select all links with lightbox class | ||
+ | $('a.image').each(function(idx, item) { | ||
var src = item.firstChild.src; | var src = item.firstChild.src; | ||
- | + | src=src.replace(/wiki\/images\/thumb\/(.+)\/(.+)\/(.+)\/(.+)\..../,"wiki/images/$1/$2/$3"); | |
- | + | item.href=src; | |
}); | }); | ||
- | + | $('a.image').lightBox(); | |
- | + | }); | |
- | + | </script> | |
- | + | ||
- | + | ||
- | + | ||
- | + | <link rel="stylesheet" type="text/css" href="https://2011.igem.org/Team:Brown-Stanford/css?action=raw&ctype=text/css" /> | |
- | + | </head> | |
- | + | <body> | |
- | + | <div id="headerimg1" class="headerimg"></div> | |
- | + | <div id="headerimg2" class="headerimg"></div> | |
- | + | <div id="header" style="height:100px;padding: 85px 0px 0px 0px; margin-bottom:0px"> | |
- | + | <ul id="sdt_menu" class="sdt_menu"> | |
- | + | <li> | |
- | + | <a href="/Team:Brown-Stanford"> | |
- | + | <!--<img src="images/2.jpg" alt=""/>--> | |
- | + | <span class="sdt_active"></span> | |
- | + | <span class="sdt_wrap"> | |
- | + | <span class="sdt_link">Brown-Stanford</span> | |
- | + | <span class="sdt_descr">Our Team</span> | |
- | + | </span> | |
- | + | </a> | |
- | + | <div class="sdt_box"> | |
- | + | <a href="/Team:Brown-Stanford/Team">Team Members</a> | |
- | + | <a href="/Team:Brown-Stanford/Martian">Martian Colony</a> | |
- | + | <!-- <a href="/Team:Brown-Stanford/Sponsors"></a>--> | |
- | + | </div> | |
- | + | </li> | |
- | + | <li> | |
- | + | <a href="/Team:Brown-Stanford/REGObricks/Overview"> | |
- | + | <img src="https://static.igem.org/mediawiki/2011/3/39/Brown-Stanford_REGObricks-Thumb.png" alt=""/> | |
- | + | <span class="sdt_active"></span> | |
- | + | <span class="sdt_wrap"> | |
- | + | <span class="sdt_link">REGObricks</span> | |
- | + | <span class="sdt_descr">Martian regolith</span> | |
- | + | </span> | |
- | + | </a> | |
- | + | <div class="sdt_box"> | |
- | + | <a href="/Team:Brown-Stanford/REGObricks/Overview">Project Overview</a> | |
- | + | </div> | |
- | + | </li> | |
- | + | <li> | |
- | + | <a href="/Team:Brown-Stanford/PowerCell/Overview"> | |
- | + | <img src="https://static.igem.org/mediawiki/2011/9/9a/Brown-Stanford_PowerCell-Thumb.png" alt=""/> | |
- | + | <span class="sdt_active"></span> | |
- | + | <span class="sdt_wrap"> | |
- | + | <span class="sdt_link">PowerCell</span> | |
- | + | <span class="sdt_descr">Modular symbiosis</span> | |
- | + | </span> | |
- | + | </a> | |
- | + | <div class="sdt_box"> | |
- | + | <a href="/Team:Brown-Stanford/PowerCell/Overview">Project Overview</a> | |
- | + | </div> | |
- | + | </li> | |
- | + | <li> | |
- | + | <a href="/Team:Brown-Stanford/DNADamage/Overview"> | |
- | + | <img src="https://static.igem.org/mediawiki/2011/4/4c/Brown-Stanford_DNADamage-Thumb.png" alt=""/> | |
- | + | <span class="sdt_active"></span> | |
- | + | <span class="sdt_wrap"> | |
- | + | <span class="sdt_link">DNA Damage Sensor</span> | |
- | + | <span class="sdt_descr">Fluorescent markers</span> | |
- | + | </span> | |
- | + | </a> | |
- | + | <div class="sdt_box"> | |
- | + | <a href="/Team:Brown-Stanford/DNADamage/Overview">Project Overview</a> | |
- | + | </div> | |
- | + | </li> | |
- | + | <li> | |
- | + | <a href="/Team:Brown-Stanford/Lab/"> | |
- | + | <!-- <img src="" alt=""/>--> | |
- | + | <span class="sdt_active"></span> | |
- | + | <span class="sdt_wrap"> | |
- | + | <span class="sdt_link">Lab</span> | |
- | + | <span class="sdt_descr"></span> | |
- | + | </span> | |
- | + | </a> | |
- | + | <div class="sdt_box"> | |
- | + | <a href="/Team:Brown-Stanford/Lab/Notebook">Notebook</a> | |
- | + | <a href="/Team:Brown-Stanford/Lab/Protocols">Protocols</a> | |
- | + | <a href="/Team:Brown-Stanford/Lab/Safety">Safety</a> | |
- | + | </div> | |
- | + | </li> | |
- | + | </ul> | |
- | + | </div> | |
- | + | <div class="content"> | |
- | + | <div style="text-align:right;background:none;width:100%;"><a href="http://www.facebook.com/pages/Brown-Stanford-iGEM/166210643442328"><img src="https://static.igem.org/mediawiki/2011/c/c4/Brown-Stanford_Facebook.png" style="height:20px;width:20px"></img></a><a href="http://www.twitter.com/Brown_iGEM"><img src="https://static.igem.org/mediawiki/2011/d/df/Brown-Stanford_Twitter.png" style="height:20px;width:20px"></img></a></div> | |
- | + | ||
- | + | ||
- | + | ||
- | + |
Revision as of 20:34, 27 June 2011