Team:Johns Hopkins-Software/Templates/tpl1

From 2012.igem.org

(Difference between revisions)
 
(29 intermediate revisions not shown)
Line 1: Line 1:
<html>
<html>
 +
</div></div></div></div></div></div></div></div></div></div></div></div>
<head>
<head>
Line 13: Line 14:
<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>
</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>
-
<center>
+
 
 +
 
 +
</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");
 +
});
-
<tr>
+
// Forward navigation
-
<td valign="top" width="300px" style="padding-top: 0px; border-right: 1px solid ffffff;">
+
$("#next").click(function() {
-
<img height="300px" src="https://static.igem.org/mediawiki/2012/f/fd/Autogenelogo_plasmid_bw.png">
+
stopAnimation();
-
<br><br>
+
navigate("next");
-
<center>
+
});
-
<hr width="90%">
+
-
A cloud-based tool for plasmid annotation and design
+
var interval;
-
<hr width="90%">
+
$("#control").toggle(function(){
-
</center>
+
stopAnimation();
-
</td>
+
}, function() {
-
<td valign="top" style="padding-left: 10px;">
+
// Change the background image to "pause"
-
<i>
+
$(this).css({ "background-image" : "url(images/btn_pause.png)" });
-
<br><font size ="2">
+
-
AutoGene is an all-encompassing plasmid design suite meant to streamline the process of both annotating and building sequences. Consisting of two modules -- AutoPlasmid and AutoDesign -- it first uses a highly curated database of features to search an imported plasmid, scanning the sequence for both perfect and imperfect alignments, and generates an interactive visualization of the annotated plasmid. Once a plasmid is annotated, a user is then able to alter its contents, using the AutoGene feature database, the biobrick database, as well as custom components. The design module enables structural optimization by maintaining sets of sequence rules and taking an algorithmic approach to minimizing structural violations. Additionally the program reduces the problems caused by restriction sites during application of designs, and proposes the most suitable enzyme selections through an analysis of standard restriction sites libraries.
+
// Show the next image
-
<br><br>
+
navigate("next");
-
The process will be run on the cloud as a standard web server gateway interface service to dramatically increasing its speed and accessibility while maintaining the same level of accuracy. As a cloud service, it will run its algorithms in parallel and thus have the ability to perform more computationally intense procedures, such as optimizing codons to increase gene expression, and designing the most efficient oligonucleotide sequences for PCR assembly.
+
-
<br><br>
+
// Start playing the animation
-
Furthermore, AutoGene has the potential for integrating fabrication or design software in the future. 3D visualization techniques could provide users with views of protein structures created from the sequences or that of a related ortholog. A process for fabrication of synthetic DNA sequences could be automated through a building block design and benefit the user in assembling the oligonucleotides together. A number of additional features such as evaluating overlapping segments of oligonucleotides and melting temperatures for PCR assembly may also be built on top of this project.
+
interval = setInterval(function() {
-
<br><br>
+
navigate("next");
-
Using a clear user interface, a large, highly curated feature database, and a novel approach through cloud computing, we hope to simplify the process of plasmid design. AutoGene aims on making it faster and easier for a user to both identify and modify the contents of any plasmid, and enhancing sequences for greater viability and expression.</font>
+
}, slideshowSpeed);
-
</i>
+
});
-
</td>
+
-
</tr>
+
-
</table>
+
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);
 +
 +
});
-
<br><br><br>
+
 
-
</center>
+
</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="navigation"></div>
Line 50: Line 434:
-
</body>
+
 
 +
 
 +
 
 +
 
 +
<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 02:59, 29 September 2012

Retrieved from "http://2012.igem.org/Team:Johns_Hopkins-Software/Templates/tpl1"