Team:Johns Hopkins-Software/theSoftware/overview
From 2012.igem.org
(Difference between revisions)
Line 1: | Line 1: | ||
- | |||
<html> | <html> | ||
+ | </div></div></div></div></div></div></div></div></div></div></div></div> | ||
+ | <head> | ||
+ | |||
+ | <!-- Remove all empty <p> tags --> | ||
+ | <script type="text/javascript"> | ||
+ | $(document).ready(function() { | ||
+ | $("p").filter( function() { | ||
+ | return $.trim($(this).html()) == ''; | ||
+ | }).remove() | ||
+ | }); | ||
+ | </script> | ||
+ | |||
<link rel="stylesheet" href="https://2012.igem.org/Team:Johns_Hopkins-Software/Templates/cssindex?action=raw&ctype=text/css" type="text/css"/> | <link rel="stylesheet" href="https://2012.igem.org/Team:Johns_Hopkins-Software/Templates/cssindex?action=raw&ctype=text/css" type="text/css"/> | ||
+ | </head> | ||
+ | |||
+ | |||
+ | <div id="header_new"> | ||
+ | <div id="headerimgs"> | ||
+ | <div id="headerimg1" class="headerimg"></div> | ||
+ | <div id="headerimg2" class="headerimg"></div> | ||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | <div id="back" class="btn"></div> | ||
+ | <div id="next" class="btn"></div> | ||
+ | |||
+ | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> | ||
+ | |||
+ | |||
+ | |||
+ | <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script> | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | <body> | ||
+ | |||
+ | |||
+ | </body> | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | <script type="text/javascript"> | ||
+ | /* | ||
+ | * Author: Marco Kuiper (http://www.marcofolio.net/) | ||
+ | */ | ||
+ | |||
+ | // Speed of the automatic slideshow | ||
+ | var slideshowSpeed = 6000; | ||
+ | |||
+ | // Variable to store the images we need to set as background | ||
+ | // which also includes some text and url's. | ||
+ | var photos = [ { | ||
+ | "title" : "Gilman Hall", | ||
+ | "image" : "../../wiki/images/7/73/Hopkins.gif", | ||
+ | "url" : "http://www.sxc.hu/photo/1271909", | ||
+ | "firstline" : "", | ||
+ | "secondline" : "" | ||
+ | }, { | ||
+ | "title" : "Johns Hopkins Hospital", | ||
+ | "image" : "../../wiki/images/6/64/Hospital.gif", | ||
+ | "url" : "", | ||
+ | "firstline" : "", | ||
+ | "secondline" : "" | ||
+ | }, { | ||
+ | "title" : "Peabody Library", | ||
+ | "image" : "../../wiki/images/f/f7/Library.gif", | ||
+ | "url" : "", | ||
+ | "firstline" : "", | ||
+ | "secondline" : "" | ||
+ | } | ||
+ | ]; | ||
+ | |||
+ | |||
+ | |||
+ | $(document).ready(function() { | ||
+ | |||
+ | // Backwards navigation | ||
+ | $("#back").click(function() { | ||
+ | stopAnimation(); | ||
+ | navigate("back"); | ||
+ | }); | ||
+ | |||
+ | // Forward navigation | ||
+ | $("#next").click(function() { | ||
+ | stopAnimation(); | ||
+ | navigate("next"); | ||
+ | }); | ||
+ | |||
+ | var interval; | ||
+ | $("#control").toggle(function(){ | ||
+ | stopAnimation(); | ||
+ | }, function() { | ||
+ | // Change the background image to "pause" | ||
+ | $(this).css({ "background-image" : "url(images/btn_pause.png)" }); | ||
+ | |||
+ | // Show the next image | ||
+ | navigate("next"); | ||
+ | |||
+ | // Start playing the animation | ||
+ | interval = setInterval(function() { | ||
+ | navigate("next"); | ||
+ | }, slideshowSpeed); | ||
+ | }); | ||
+ | |||
+ | |||
+ | 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; | ||
+ | } | ||
+ | } else { | ||
+ | currentImg--; | ||
+ | if(currentImg == 0) { | ||
+ | currentImg = photos.length; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | // 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(images/" + photoObject.image + ")", | ||
+ | "display" : "block", | ||
+ | "z-index" : currentZindex | ||
+ | }); | ||
+ | |||
+ | // Hide the header text | ||
+ | $("#headertxt").css({"display" : "none"}); | ||
+ | |||
+ | // Set the new header text | ||
+ | $("#firstline").html(photoObject.firstline); | ||
+ | $("#secondline") | ||
+ | .attr("href", photoObject.url) | ||
+ | .html(photoObject.secondline); | ||
+ | $("#pictureduri") | ||
+ | .attr("href", photoObject.url) | ||
+ | .html(photoObject.title); | ||
+ | |||
+ | |||
+ | // Fade out the current container | ||
+ | // and display the header text when animation is complete | ||
+ | $("#headerimg" + currentContainer).fadeOut(function() { | ||
+ | setTimeout(function() { | ||
+ | $("#headertxt").css({"display" : "block"}); | ||
+ | animating = false; | ||
+ | }, 500); | ||
+ | }); | ||
+ | }; | ||
+ | |||
+ | 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"> | ||
+ | |||
+ | /********************* | ||
+ | //* jQuery Drop Line Menu- By Dynamic Drive: http://www.dynamicdrive.com/ | ||
+ | //* Last updated: May 9th, 11' | ||
+ | //* Menu avaiable at DD CSS Library: http://www.dynamicdrive.com/style/ | ||
+ | *********************/ | ||
+ | |||
+ | var droplinemenu={ | ||
+ | |||
+ | /*arrowimage: {classname: 'downarrowclass', src: '', leftpadding: 5}, //customize down arrow image*/ | ||
+ | animateduration: {over: 80, out: 50}, //duration of slide in/ out animation, in milliseconds | ||
+ | |||
+ | buildmenu:function(menuid){ | ||
+ | jQuery(document).ready(function($){ | ||
+ | var $mainmenu=$("#"+menuid+">ul") | ||
+ | var $headers=$mainmenu.find("ul").parent() | ||
+ | $headers.each(function(i){ | ||
+ | var $curobj=$(this) | ||
+ | var $subul=$(this).find('ul:eq(0)') | ||
+ | this._dimensions={h:$curobj.find('a:eq(0)').outerHeight()} | ||
+ | this.istopheader=$curobj.parents("ul").length==1? true : false | ||
+ | if (!this.istopheader) | ||
+ | $subul.css({left:0, top:this._dimensions.h}) | ||
+ | var $innerheader=$curobj.children('a').eq(0) | ||
+ | $innerheader=($innerheader.children().eq(0).is('span'))? $innerheader.children().eq(0) : $innerheader //if header contains inner SPAN, use that | ||
+ | /* $innerheader.append( | ||
+ | '<img src="'+ droplinemenu.arrowimage.src | ||
+ | +'" class="' + droplinemenu.arrowimage.classname | ||
+ | + '" style="border:0; padding-left: '+droplinemenu.arrowimage.leftpadding+'px" />' | ||
+ | )*/ | ||
+ | $curobj.hoverIntent( | ||
+ | function(e){ | ||
+ | var $targetul=$(this).children("ul:eq(0)") | ||
+ | if ($targetul.queue().length<=1) //if 1 or less queued animations | ||
+ | if (this.istopheader) | ||
+ | $targetul.css({left: $mainmenu.position().left, top: $mainmenu.position().top+this._dimensions.h}) | ||
+ | if (document.all && !window.XMLHttpRequest) //detect IE6 or less, fix issue with overflow | ||
+ | $mainmenu.find('ul').css({overflow: (this.istopheader)? 'hidden' : 'visible'}) | ||
+ | $targetul.dequeue().slideDown(droplinemenu.animateduration.over) | ||
+ | }, | ||
+ | function(e){ | ||
+ | var $targetul=$(this).children("ul:eq(0)") | ||
+ | $targetul.dequeue().slideUp(droplinemenu.animateduration.out) | ||
+ | } | ||
+ | ) //end hover | ||
+ | }) //end $headers.each() | ||
+ | $mainmenu.find("ul").css({display:'none', visibility:'visible', width:$mainmenu.width()}) | ||
+ | }) //end document.ready | ||
+ | } | ||
+ | } | ||
+ | |||
+ | </text> | ||
+ | |||
+ | |||
+ | <script type="text/javascript"> | ||
+ | |||
+ | |||
+ | var DDSPEED = 10; | ||
+ | var DDTIMER = 15; | ||
+ | |||
+ | // main function to handle the mouse events // | ||
+ | function ddMenu(id,d){ | ||
+ | var h = document.getElementById(id + '-ddheader'); | ||
+ | var c = document.getElementById(id + '-ddcontent'); | ||
+ | clearInterval(c.timer); | ||
+ | if(d == 1){ | ||
+ | clearTimeout(h.timer); | ||
+ | if(c.maxh && c.maxh <= c.offsetHeight){return} | ||
+ | else if(!c.maxh){ | ||
+ | c.style.display = 'block'; | ||
+ | c.style.height = 'auto'; | ||
+ | c.maxh = c.offsetHeight; | ||
+ | c.style.height = '0px'; | ||
+ | } | ||
+ | c.timer = setInterval(function(){ddSlide(c,1)},DDTIMER); | ||
+ | }else{ | ||
+ | h.timer = setTimeout(function(){ddCollapse(c)},50); | ||
+ | } | ||
+ | } | ||
+ | |||
+ | // collapse the menu // | ||
+ | function ddCollapse(c){ | ||
+ | c.timer = setInterval(function(){ddSlide(c,-1)},DDTIMER); | ||
+ | } | ||
+ | |||
+ | // cancel the collapse if a user rolls over the dropdown // | ||
+ | function cancelHide(id){ | ||
+ | var h = document.getElementById(id + '-ddheader'); | ||
+ | var c = document.getElementById(id + '-ddcontent'); | ||
+ | clearTimeout(h.timer); | ||
+ | clearInterval(c.timer); | ||
+ | if(c.offsetHeight < c.maxh){ | ||
+ | c.timer = setInterval(function(){ddSlide(c,1)},DDTIMER); | ||
+ | } | ||
+ | } | ||
+ | |||
+ | // incrementally expand/contract the dropdown and change the opacity // | ||
+ | function ddSlide(c,d){ | ||
+ | var currh = c.offsetHeight; | ||
+ | var dist; | ||
+ | if(d == 1){ | ||
+ | dist = (Math.round((c.maxh - currh) / DDSPEED)); | ||
+ | }else{ | ||
+ | dist = (Math.round(currh / DDSPEED)); | ||
+ | } | ||
+ | if(dist <= 1 && d == 1){ | ||
+ | dist = 1; | ||
+ | } | ||
+ | c.style.height = currh + (dist * d) + 'px'; | ||
+ | c.style.opacity = currh / c.maxh; | ||
+ | c.style.filter = 'alpha(opacity=' + (currh * 100 / c.maxh) + ')'; | ||
+ | if((currh < 2 && d != 1) || (currh > (c.maxh - 2) && d == 1)){ | ||
+ | clearInterval(c.timer); | ||
+ | } | ||
+ | } | ||
+ | |||
+ | </script> | ||
+ | |||
+ | |||
+ | <script type="text/javascript"> | ||
+ | /** | ||
+ | * jQuery Opacity Rollover plugin | ||
+ | * | ||
+ | * Copyright (c) 2009 Trent Foley (http://trentacular.com) | ||
+ | * Licensed under the MIT License: | ||
+ | * http://www.opensource.org/licenses/mit-license.php | ||
+ | */ | ||
+ | ;(function($) { | ||
+ | var defaults = { | ||
+ | mouseOutOpacity: 0.67, | ||
+ | mouseOverOpacity: 1.0, | ||
+ | fadeSpeed: 'fast', | ||
+ | exemptionSelector: '.selected' | ||
+ | }; | ||
+ | |||
+ | $.fn.opacityrollover = function(settings) { | ||
+ | // Initialize the effect | ||
+ | $.extend(this, defaults, settings); | ||
+ | |||
+ | var config = this; | ||
+ | |||
+ | function fadeTo(element, opacity) { | ||
+ | var $target = $(element); | ||
+ | |||
+ | if (config.exemptionSelector) | ||
+ | $target = $target.not(config.exemptionSelector); | ||
+ | |||
+ | $target.fadeTo(config.fadeSpeed, opacity); | ||
+ | } | ||
+ | |||
+ | this.css('opacity', this.mouseOutOpacity) | ||
+ | .hover( | ||
+ | function () { | ||
+ | fadeTo(this, config.mouseOverOpacity); | ||
+ | }, | ||
+ | function () { | ||
+ | fadeTo(this, config.mouseOutOpacity); | ||
+ | }); | ||
+ | |||
+ | return this; | ||
+ | }; | ||
+ | })(jQuery); | ||
+ | |||
+ | </script> | ||
+ | |||
+ | |||
+ | <script type="text/javascript"> | ||
+ | $(function() { | ||
+ | |||
+ | var offset = $("#navigation_low").offset(); | ||
+ | var topPadding = 0; | ||
+ | |||
+ | $(window).scroll(function() { | ||
+ | |||
+ | if ($(window).scrollTop() > offset.top) { | ||
+ | |||
+ | $("#navigation_low").stop().animate({ | ||
+ | |||
+ | marginTop: $(window).scrollTop() - offset.top + topPadding | ||
+ | |||
+ | }); | ||
+ | |||
+ | } else { | ||
+ | |||
+ | $("#navigation_low").stop().animate({ | ||
+ | |||
+ | marginTop: 0 | ||
+ | |||
+ | }); | ||
+ | |||
+ | } | ||
+ | |||
+ | |||
+ | }); | ||
+ | |||
+ | }); | ||
+ | |||
+ | |||
+ | </script> | ||
+ | |||
+ | |||
+ | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> | ||
+ | <script type="text/javascript"> | ||
+ | //build menu with DIV ID="myslidemenu" on page: | ||
+ | droplinemenu.buildmenu("mydroplinemenu") | ||
+ | |||
+ | //Nivoslider | ||
+ | $(window).load(function() { | ||
+ | $('#slider').nivoSlider({ | ||
+ | effect:'fade', | ||
+ | pauseOnHover:true | ||
+ | }); | ||
+ | }); | ||
+ | |||
+ | //Profile script from http://www.willmaster.com/library/web-development/replace-div-content.php | ||
+ | function ReplaceContentInContainer(id,content) { | ||
+ | var container = document.getElementById(id); | ||
+ | container.innerHTML = content; | ||
+ | } | ||
+ | |||
+ | </script> | ||
+ | |||
<div id="project_temp"> | <div id="project_temp"> | ||
Line 13: | Line 434: | ||
</center> | </center> | ||
</div> | </div> | ||
- | |||
<div id="project_description"> | <div id="project_description"> | ||
- | <br><font size ="2" color = "white"> | + | <br> |
- | + | <i> | |
- | <br><br> | + | <font size="2" color = "white">AutoPlasmid</font><br><font size ="2" color = "white"> |
- | + | <br>AutoPlasmid is a simple-to-use annotation tool. Hand it a sequence of DNA, however big or small you'd like, and sit back and watch. AutoPlasmid will search through a database containing 40,000 features and look for matches. Not only does it find perfect matches, but if you specify, you can search for imperfect matches with any threshold you'd like (ex. 90% match).<br><br><img src="https://static.igem.org/mediawiki/2012/8/8d/AnnotationOptionsJHU.png"/></font> | |
- | <br><br> | + | |
- | + | ||
- | <br><br> | + | <br><br> After searching for annotations, open your plasmid to look inside. Interact with it by selecting features, manipulating the DNA, and adding any custom annotations you'd like. You can even view amino acid translations or oligo matches. |
- | + | <br><br><img src="https://static.igem.org/mediawiki/2012/6/6e/Puc18JHU.png"/> | |
- | + | ||
+ | |||
+ | </font> | ||
+ | </i> | ||
</div> | </div> | ||
</div> | </div> | ||
+ | |||
+ | |||
+ | <div id="navigation"></div> | ||
+ | |||
+ | |||
+ | <div id="header_body"> | ||
+ | <div id="header_new"> | ||
+ | <div id="header_title"> | ||
+ | <a href="https://2012.igem.org/Team:Johns_Hopkins-Software"><img src="https://static.igem.org/mediawiki/2012/0/09/AutogeneHeader.png"></a><a class="returnLink" title="Return to iGem" href="https://igem.org"></a> | ||
+ | |||
+ | |||
+ | |||
+ | </div> | ||
+ | </div> | ||
+ | <div id = "navigation_wrapper"> | ||
+ | <div id="navigation_low"> | ||
+ | |||
+ | |||
+ | |||
+ | <div id="mydroplinemenu" class="droplinebar"> | ||
+ | <ul> | ||
+ | <li><a href="#">the Software</a> | ||
+ | <ul> | ||
+ | <li><a href="https://2012.igem.org/Team:Johns_Hopkins-Software/comingsoon">Overview</a></li> | ||
+ | <li><a href="https://2012.igem.org/Team:Johns_Hopkins-Software/comingsoon">Screencast</a></li> | ||
+ | <li><a href="https://2012.igem.org/Team:Johns_Hopkins-Software/comingsoon">Cloud</a></li> | ||
+ | <li><a href="https://2012.igem.org/Team:Johns_Hopkins-Software/comingsoon">Database</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li><a href="#">the Team</a> | ||
+ | <ul> | ||
+ | <li><a href="https://2012.igem.org/Team:Johns_Hopkins-Software/comingsoon">Members</a></li> | ||
+ | <li><a href="https://2012.igem.org/Team:Johns_Hopkins-Software/comingsoon">Advisors</a></li> | ||
+ | <li><a href="https://2012.igem.org/Team:Johns_Hopkins-Software/comingsoon">Attributions</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li><a href="#">Human Practices</a> | ||
+ | </li> | ||
+ | <li><a href="#">Medal Fulfillment</a> | ||
+ | </li> | ||
+ | <li><a href="#">Safety</a> | ||
+ | </li> | ||
+ | |||
+ | </div> | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | <img style="position: absolute; right: 0px; top: 5px;" src="https://static.igem.org/mediawiki/2012/f/f3/HopkinsBanner.png"> | ||
+ | <div style="clear:both" /></div> | ||
+ | </div> | ||
+ | |||
+ | |||
+ | </div> | ||
+ | |||
+ | |||
+ | |||
+ | </div> | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> | ||
+ | <script src="https://2011.igem.org/Team:Johns_Hopkins/Templates/droplinemenu?action=raw&ctype=text/javascript" type="text/javascript"></script> | ||
+ | <script type="text/javascript" src="https://2011.igem.org/Team:Johns_Hopkins/Templates/nivosliderpack?action=raw&ctype=text/javascript"></script> | ||
+ | <script type="text/javascript" src="https://2011.igem.org/Team:Johns_Hopkins/Templates/hoverintent?action=raw&ctype=text/javascript"></script> | ||
+ | <script type="text/javascript" src="https://2011.igem.org/Team:Johns_Hopkins/Templates/galleriffic?action=raw&ctype=text/javascript"></script> | ||
+ | <script type="text/javascript" src="https://2011.igem.org/Team:Johns_Hopkins/Templates/js/opacityrollover?action=raw&ctype=text/javascript"></script> | ||
+ | <script type="text/javascript" src="https://2011.igem.org/Team:Johns_Hopkins/Templates/js/jqueryhistory?action=raw&ctype=text/javascript"></script> | ||
+ | <script type="text/javascript" src="https://2011.igem.org/Team:Johns_Hopkins/Templates/js/profile?action=raw&ctype=text/javascript"></script> | ||
+ | <script type="text/javascript" | ||
+ | src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"> | ||
+ | </script> | ||
+ | <script type="text/javascript"> | ||
+ | //build menu with DIV ID="myslidemenu" on page: | ||
+ | droplinemenu.buildmenu("mydroplinemenu") | ||
+ | |||
+ | //Nivoslider | ||
+ | $(window).load(function() { | ||
+ | $('#slider').nivoSlider({ | ||
+ | effect:'fade', | ||
+ | pauseOnHover:true | ||
+ | }); | ||
+ | }); | ||
+ | |||
+ | //Profile script from http://www.willmaster.com/library/web-development/replace-div-content.php | ||
+ | function ReplaceContentInContainer(id,content) { | ||
+ | var container = document.getElementById(id); | ||
+ | container.innerHTML = content; | ||
+ | } | ||
+ | |||
+ | </script> | ||
</html> | </html> | ||
- |
Latest revision as of 01:55, 1 October 2012