|
|
| Line 1: |
Line 1: |
| - | __NOTOC__<html lang="en">
| + | <ul id="sdt_menu" class="sdt_menu"> |
| - | <head> | + | <li> |
| - | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.js"></script> | + | <a href="#"> |
| - | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> | + | <img src="images/1.jpg" alt=""/> |
| - | <script type="text/javascript"> | + | <span class="sdt_active"></span> |
| - | < | + | <span class="sdt_wrap"> |
| - | <script type="text/javascript"> | + | <span class="sdt_link">Portfolio</span> |
| - | $(document).ready(function() { | + | <span class="sdt_descr">My work</span> |
| - | $("#twitter").getTwitter({
| + | </span> |
| - | userName: "Brown_iGEM",
| + | </a> |
| - | numTweets: 1,
| + | <div class="sdt_box"> |
| - | loaderText: "Loading tweets...",
| + | <a href="#">Websites</a> |
| - | slideIn: true,
| + | <a href="#">Illustrations</a> |
| - | slideDuration: 750,
| + | <a href="#">Photography</a> |
| - | showHeading: true,
| + | </div> |
| - | headingText: "Latest Tweets",
| + | </li> |
| - | showProfileLink: true,
| + | ... |
| - | showTimestamp: true
| + | </ul> |
| - | });
| + | |
| - | });
| + | |
| - | </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
| + | <style type="text/css"> |
| - | http://creativecommons.org/licenses/by-nc/3.0/
| + | |
| - | */
| + | |
| | | | |
| - | $.fn.getTwitter = function(options) {
| + | ul.sdt_menu{ |
| | + | margin:0; |
| | + | padding:0; |
| | + | list-style: none; |
| | + | font-family:"Myriad Pro", "Trebuchet MS", sans-serif; |
| | + | font-size:14px; |
| | + | width:1020px; |
| | + | } |
| | | | |
| - | $.fn.getTwitter.defaults = {
| + | ul.sdt_menu a{ |
| - | userName: null,
| + | text-decoration:none; |
| - | numTweets: 1,
| + | outline:none; |
| - | loaderText: "Loading tweet...",
| + | } |
| - | slideIn: true,
| + | |
| - | slideDuration: 750,
| + | |
| - | showHeading: true,
| + | |
| - | headingText: "Latest Tweets",
| + | |
| - | showProfileLink: true,
| + | |
| - | showTimestamp: true
| + | |
| - | };
| + | |
| | | | |
| - | var o = $.extend({}, $.fn.getTwitter.defaults, options);
| + | ul.sdt_menu li{ |
| | + | float:left; |
| | + | width:170px; |
| | + | height:85px; |
| | + | position:relative; |
| | + | cursor:pointer; |
| | + | } |
| | | | |
| - | return this.each(function() {
| + | ul.sdt_menu li > a{ |
| - | var c = $(this);
| + | position:absolute; |
| | + | top:0px; |
| | + | left:0px; |
| | + | width:170px; |
| | + | height:85px; |
| | + | z-index:12; |
| | + | background:transparent url(../images/overlay.png) no-repeat bottom right; |
| | + | -moz-box-shadow:0px 0px 2px #000; |
| | + | -webkit-box-shadow:0px 0px 2px #000; |
| | + | box-shadow:0px 0px 2px #000; |
| | + | } |
| | | | |
| - | // hide container element, remove alternative content, and add class
| + | ul.sdt_menu li a img{ |
| - | c.hide().empty().addClass("twitted");
| + | border:none; |
| | + | position:absolute; |
| | + | width:0px; |
| | + | height:0px; |
| | + | bottom:0px; |
| | + | left:85px; |
| | + | z-index:100; |
| | + | -moz-box-shadow:0px 0px 4px #000; |
| | + | -webkit-box-shadow:0px 0px 4px #000; |
| | + | box-shadow:0px 0px 4px #000; |
| | + | } |
| | | | |
| - | // add heading to container element
| |
| - | if (o.showHeading) {
| |
| - | c.append("<h2>"+o.headingText+"</h2>");
| |
| - | }
| |
| | | | |
| - | // add twitter list to container element
| + | ul.sdt_menu li span.sdt_wrap{ |
| - | var twitterListHTML = "<ul id=\"twitter_update_list\"><li></li></ul>";
| + | position:absolute; |
| - | c.append(twitterListHTML);
| + | top:25px; |
| | + | left:0px; |
| | + | width:170px; |
| | + | height:60px; |
| | + | z-index:15; |
| | + | } |
| | | | |
| - | var tl = $("#twitter_update_list");
| + | ul.sdt_menu li span.sdt_active{ |
| | + | position:absolute; |
| | + | background:#111; |
| | + | top:85px; |
| | + | width:170px; |
| | + | height:0px; |
| | + | left:0px; |
| | + | z-index:14; |
| | + | -moz-box-shadow:0px 0px 4px #000 inset; |
| | + | -webkit-box-shadow:0px 0px 4px #000 inset; |
| | + | box-shadow:0px 0px 4px #000 inset; |
| | + | } |
| | | | |
| - | // hide twitter list
| |
| - | tl.hide();
| |
| | | | |
| - | // add preLoader to container element
| + | ul.sdt_menu li span span.sdt_link, |
| - | var preLoaderHTML = $("<p class=\"preLoader\">"+o.loaderText+"</p>");
| + | ul.sdt_menu li span span.sdt_descr, |
| - | c.append(preLoaderHTML);
| + | ul.sdt_menu li div.sdt_box a{ |
| | + | margin-left:15px; |
| | + | text-transform:uppercase; |
| | + | text-shadow:1px 1px 1px #000; |
| | + | } |
| | | | |
| - | // add Twitter profile link to container element
| + | ul.sdt_menu li span span.sdt_link{ |
| - | if (o.showProfileLink) {
| + | color:#fff; |
| - | var profileLinkHTML = "<p class=\"profileLink\"><a href=\"http://twitter.com/"+o.userName+"\">http://twitter.com/"+o.userName+"</a></p>";
| + | font-size:24px; |
| - | c.append(profileLinkHTML);
| + | float:left; |
| - | }
| + | clear:both; |
| - | | + | |
| - | // 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() {
| + | |
| - | /**
| + | |
| - | * 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(){
| + | |
| - | 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 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 {
| + | ul.sdt_menu li span span.sdt_descr{ |
| - | position: absolute; | + | color:#0B75AF; |
| - | top: 0; | + | float:left; |
| - | left: 0; | + | clear:both; |
| - | width: 100%; | + | width:155px; |
| - | z-index: 100;
| + | font-size:10px; |
| - | text-align: center; | + | letter-spacing:1px; |
| - | line-height: 0; | + | |
| | } | | } |
| - | #jquery-lightbox a img { border: none; }
| + | |
| - | #lightbox-container-image-box {
| + | ul.sdt_menu li div.sdt_box{ |
| - | position: relative; | + | display:block; |
| - | background-color: #fff; | + | position:absolute; |
| - | width: 250px; | + | width:170px; |
| - | height: 250px; | + | overflow:hidden; |
| - | margin: 0 auto; | + | height:170px; |
| | + | top:85px; |
| | + | left:0px; |
| | + | display:none; |
| | + | background:#000; |
| | } | | } |
| - | #lightbox-container-image { padding: 10px; }
| + | ul.sdt_menu li div.sdt_box a{ |
| - | #lightbox-loading {
| + | float:left; |
| - | position: absolute; | + | clear:both; |
| - | top: 40%;
| + | line-height:30px; |
| - | left: 0%;
| + | color:#0B75AF; |
| - | height: 25%; | + | |
| - | width: 100%; | + | |
| - | text-align: center;
| + | |
| - | line-height: 0; | + | |
| | } | | } |
| - | #lightbox-nav {
| + | |
| - | position: absolute;
| + | |
| - | top: 0;
| + | ul.sdt_menu li div.sdt_box a:first-child{ |
| - | left: 0; | + | margin-top:15px; |
| - | height: 100%;
| + | |
| - | width: 100%;
| + | |
| - | z-index: 10;
| + | |
| | } | | } |
| - | #lightbox-container-image-box > #lightbox-nav { left: 0; }
| + | ul.sdt_menu li div.sdt_box a:hover{ |
| - | #lightbox-nav a { outline: none;}
| + | color:#fff; |
| - | #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;
| |
| - | 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 10px 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>
| |
ul.sdt_menu{
margin:0;
padding:0;
list-style: none;
font-family:"Myriad Pro", "Trebuchet MS", sans-serif;
font-size:14px;
width:1020px;
}
ul.sdt_menu li{
float:left;
width:170px;
height:85px;
position:relative;
cursor:pointer;
}
ul.sdt_menu li > a{
position:absolute;
top:0px;
left:0px;
width:170px;
height:85px;
z-index:12;
background:transparent url(../images/overlay.png) no-repeat bottom right;
-moz-box-shadow:0px 0px 2px #000;
-webkit-box-shadow:0px 0px 2px #000;
box-shadow:0px 0px 2px #000;
}
ul.sdt_menu li a img{
border:none;
position:absolute;
width:0px;
height:0px;
bottom:0px;
left:85px;
z-index:100;
-moz-box-shadow:0px 0px 4px #000;
-webkit-box-shadow:0px 0px 4px #000;
box-shadow:0px 0px 4px #000;
}
ul.sdt_menu li span.sdt_active{
position:absolute;
background:#111;
top:85px;
width:170px;
height:0px;
left:0px;
z-index:14;
-moz-box-shadow:0px 0px 4px #000 inset;
-webkit-box-shadow:0px 0px 4px #000 inset;
box-shadow:0px 0px 4px #000 inset;
}
ul.sdt_menu li span span.sdt_link{
color:#fff;
font-size:24px;
float:left;
clear:both;
}
ul.sdt_menu li span span.sdt_descr{
color:#0B75AF;
float:left;
clear:both;
width:155px;
font-size:10px;
letter-spacing:1px;
}
ul.sdt_menu li div.sdt_box{
display:block;
position:absolute;
width:170px;
overflow:hidden;
height:170px;
top:85px;
left:0px;
display:none;
background:#000;
}
ul.sdt_menu li div.sdt_box a{
float:left;
clear:both;
line-height:30px;
color:#0B75AF;
}
"
