Template:UOttawa Scripts

From 2013.igem.org

(Difference between revisions)
(Replaced content with "<html> <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script type="text/javascript"> $(function() { $(".paneLink").click(function(e) { e.preventDefa...")
Line 21: Line 21:
});
});
</script>
</script>
 +
<script>
 +
var fade_in_from = 0;
 +
var fade_in_fromT = 0;
 +
var fade_out_from = 30;
 +
var xPosition = 30;
 +
var yPosition = 300;
 +
var yPositionY = 300;
 +
var timerlen = 30;
 +
var slideAniLen = 250;
 +
 +
var timerID = new Array();
 +
var startTime = new Array();
 +
var obj = new Array();
 +
var endHeight = new Array();
 +
var moving = new Array();
 +
var dir = new Array();
 +
 +
function slidedown(objname){
 +
        if(moving[objname])
 +
                return;
 +
 +
        if(document.getElementById(objname).style.display != "none")
 +
                return; // cannot slide down something that is already visible
 +
 +
        moving[objname] = true;
 +
        dir[objname] = "down";
 +
        startslide(objname);
 +
}
 +
 +
function slideup(objname){
 +
        if(moving[objname])
 +
                return;
 +
 +
        if(document.getElementById(objname).style.display == "none")
 +
                return; // cannot slide up something that is already hidden
 +
 +
        moving[objname] = true;
 +
        dir[objname] = "up";
 +
        startslide(objname);
 +
}
 +
 +
function startslide(objname){
 +
        obj[objname] = document.getElementById(objname);
 +
 +
        endHeight[objname] = parseInt(obj[objname].style.height);
 +
        startTime[objname] = (new Date()).getTime();
 +
 +
        if(dir[objname] == "down"){
 +
                obj[objname].style.height = "1px";
 +
        }
 +
 +
        obj[objname].style.display = "block";
 +
 +
        timerID[objname] = setInterval('slidetick(\'' + objname + '\');',timerlen);
 +
}
 +
 +
function slidetick(objname){
 +
        var elapsed = (new Date()).getTime() - startTime[objname];
 +
 +
        if (elapsed > slideAniLen)
 +
                endSlide(objname)
 +
        else {
 +
                var d =Math.round(elapsed / slideAniLen * endHeight[objname]);
 +
                if(dir[objname] == "up")
 +
                        d = endHeight[objname] - d;
 +
 +
                obj[objname].style.height = d + "px";
 +
        }
 +
 +
        return;
 +
}
 +
 +
function endSlide(objname){
 +
        clearInterval(timerID[objname]);
 +
 +
        if(dir[objname] == "up")
 +
                obj[objname].style.display = "none";
 +
 +
        obj[objname].style.height = endHeight[objname] + "px";
 +
 +
        delete(moving[objname]);
 +
        delete(timerID[objname]);
 +
        delete(startTime[objname]);
 +
        delete(endHeight[objname]);
 +
        delete(obj[objname]);
 +
        delete(dir[objname]);
 +
 +
        return;
 +
}
 +
 +
function drawToxin(){
 +
var toxinCanvas = document.getElementById('graph');
 +
var context = toxinCanvas.getContext('2d');
 +
context.beginPath();
 +
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
 +
      context.fillStyle = 'green';
 +
}
 +
 +
function drawGraph(){
 +
 +
var canvas = document.getElementById('graph');
 +
var ctx = canvas.getContext('2d');
 +
 +
ctx.beginPath();
 +
ctx.moveTo(30,0);
 +
ctx.lineTo(30,305);
 +
ctx.stroke();
 +
 +
ctx.beginPath();
 +
ctx.moveTo(30,305);
 +
ctx.lineTo(300,305);
 +
ctx.stroke();
 +
 +
ctx.save();
 +
ctx.font="20px Open Sans";
 +
ctx.fillText("Time (t)",100,325);
 +
ctx.restore();
 +
 +
ctx.save();
 +
ctx.translate(15, 300);
 +
ctx.rotate(-Math.PI/2);
 +
ctx.font="20px Open Sans";
 +
ctx.fillText("Variation of Transcription factor", 0, 0);
 +
ctx.restore();
 +
 +
}
 +
 +
function drawX(){
 +
 +
var canvas = document.getElementById('graph');
 +
var ctx = canvas.getContext('2d');
 +
xPosition ++;
 +
yPosition = 100*1/(0.1*xPosition-3)+100;
 +
 +
ctx.beginPath();
 +
ctx.strokeStyle = '#0000FF';
 +
ctx.strokeRect(xPosition,yPosition,1,1);
 +
 +
 +
if(xPosition == 250){
 +
clearTimeout(loopTimer);
 +
xPosition = 30;
 +
yPosition = 300;
 +
var button = document.getElementById('spikeZ');
 +
button.disabled = false;
 +
ctx.font="15px Open Sans";
 +
ctx.fillText("1. Toxin will stimulate production of X",50,20);
 +
return false;
 +
}
 +
var loopTimer = setTimeout('drawX()',10);
 +
 +
}
 +
 +
 +
function drawZ(){
 +
var button = document.getElementById('spikeZ');
 +
button.disabled = true;
 +
var canvas = document.getElementById('graph');
 +
var ctx = canvas.getContext('2d');
 +
xPosition ++;
 +
yPosition = 100*1/(0.1*xPosition-3)+100;
 +
yPositionY = 100*1/(0.01*xPosition+0.1)+100;
 +
 +
ctx.beginPath();
 +
ctx.strokeStyle = '#ff0000';
 +
ctx.strokeRect(xPosition,yPosition,5,5);
 +
if (yPositionY < 300){
 +
ctx.beginPath();
 +
ctx.strokeStyle = '#008000';
 +
ctx.strokeRect(xPosition,yPositionY,5,5);
 +
}
 +
 +
if(xPosition == 80){
 +
clearTimeout(loopTimer);
 +
xPosition = 80;
 +
yPosition = 0;
 +
yPositionY = 0;
 +
ctx.font="15px Open Sans";
 +
ctx.fillText("2. X stimulates production of both Z and Y",50,40);
 +
var twoButton = document.getElementById('spikeZ');
 +
var two = document.getElementById("two");
 +
button.disabled = true;
 +
two.style.display = "none";
 +
twoButton.style.display = "none";
 +
return false;
 +
}
 +
var loopTimer = setTimeout('drawZ()',10);
 +
 +
}
 +
 +
function drawY(){
 +
var button = document.getElementById('spikeY');
 +
button.disabled = true;
 +
var canvas = document.getElementById('graph');
 +
var ctx = canvas.getContext('2d');
 +
xPosition ++;
 +
yPosition = -(100*1/(0.08*xPosition-6.4))+300;
 +
yPositionY = 100*1/(0.01*xPosition+0.1)+100;
 +
 +
if(yPosition>100){
 +
ctx.beginPath();
 +
ctx.strokeStyle = '#ff0000';
 +
ctx.strokeRect(xPosition,yPosition,5,5);
 +
}
 +
 +
 +
ctx.beginPath();
 +
ctx.strokeStyle = '#008000';
 +
ctx.strokeRect(xPosition,yPositionY,5,5);
 +
 +
 +
if(xPosition == 250){
 +
clearTimeout(loopTimer);
 +
xPosition = 80;
 +
yPosition = 0;
 +
yPositionY = 0;
 +
var button = document.getElementById('spikeZ');
 +
button.disabled = true;
 +
ctx.font="15px Open Sans";
 +
ctx.fillText("3. Sufficient repression from Y",50,60);
 +
ctx.fillText("terminates Z production",50,80);
 +
var twoButton = document.getElementById('spikeY');
 +
var restartButton = document.getElementById('restartButton');
 +
var two = document.getElementById("three");
 +
button.disabled = true;
 +
two.style.display = "none";
 +
restartButton.style.display = "block";
 +
twoButton.style.display = "none";
 +
return false;
 +
}
 +
var loopTimer = setTimeout('drawY()',10);
 +
 +
}
 +
 +
function toxIn(){
 +
 +
var toxin = document.getElementById("toxin");
 +
toxin.style.display = "block";
 +
var newSetting = fade_in_from / 30;
 +
toxin.style.opacity = newSetting;
 +
fade_in_from++;
 +
if(fade_in_from == 30){
 +
toxin.style.opacity = 1;
 +
clearTimeout(loopTimer);
 +
fade_in_from = 0;
 +
 +
return false;
 +
}
 +
var loopTimer = setTimeout('toxIn()',30);
 +
}
 +
 +
function toxMore(){
 +
var button = document.getElementById('start');
 +
button.disabled = true;
 +
var toxin = document.getElementById("toxinM");
 +
 +
toxin.style.display = "block";
 +
 +
var newSetting = fade_in_fromT / 30;
 +
 +
toxin.style.opacity = newSetting;
 +
 +
fade_in_fromT++;
 +
 +
if(fade_in_fromT == 30){
 +
toxin.style.opacity = 1;
 +
clearTimeout(loopTimer);
 +
fade_in_fromT = 0;
 +
 +
 +
timer = setTimeout('scrollDown()',500);
 +
 +
return false;
 +
}
 +
 +
var loopTimer = setTimeout('toxMore()',10);
 +
}
 +
 +
function toxOut()
 +
{
 +
var toxin = document.getElementById("toxin");
 +
var newSetting = fade_out_from / 10;
 +
toxin.style.opacity = newSetting;
 +
fade_out_from--;
 +
if(fade_out_from == 0){
 +
toxin.style.opacity = 0;
 +
clearTimeout(loopTimer);
 +
fade_out_from = 10;
 +
return false;
 +
}
 +
var loopTimer = setTimeout('toxOut()',10);
 +
};
 +
 +
function scrollDown(){
 +
var button = document.getElementById('start');
 +
var mainContainer = document.getElementById('mainContainer');
 +
mainContainer.style.height = "800px";
 +
button.disabled = true;
 +
var newSetting = fade_in_from;
 +
 +
window.scroll(0, newSetting);
 +
fade_in_from=fade_in_from+5;
 +
 +
 +
if(fade_in_from == 590){
 +
fade_in_from = 0;
 +
clearTimeout(loopTimer);
 +
timer = setTimeout('drawGraph()',400);
 +
timer2 = setTimeout('drawX()',400);
 +
timer3 = setTimeout('fadeIn();',400);
 +
var button = document.getElementById('spikeZ');
 +
var start = document.getElementById('start');
 +
var one = document.getElementById("one");
 +
button.disabled = true;
 +
start.style.display = "none";
 +
one.style.display = "none";
 +
return false;
 +
}
 +
var loopTimer = setTimeout('scrollDown()',3);
 +
 +
 +
}
 +
 +
function fadeIn()
 +
{
 +
 +
var target = document.getElementById("theX");
 +
var targetY = document.getElementById("theY");
 +
var targetZ = document.getElementById("theZ");
 +
var bigArrow = document.getElementById("bigArrow");
 +
var downArrow = document.getElementById("downArrow");
 +
var xEquation = document.getElementById("xEquation");
 +
var titleX = document.getElementById("titledX");
 +
var affinityX = document.getElementById("affinityX");
 +
var two = document.getElementById("two");
 +
var spikeZ = document.getElementById("spikeZ");
 +
var repressionArrow = document.getElementById("repressionArrow");
 +
var titledAX = document.getElementById("titledAX");
 +
var titledAY = document.getElementById("titledAY");
 +
var equation = document.getElementById("equation");
 +
var graphI = document.getElementById("graphId");
 +
 +
 +
equation.style.display = "block";
 +
graphI.style.display = "block";
 +
target.style.display = "block";
 +
targetY.style.display = "block";
 +
targetZ.style.display = "block";
 +
bigArrow.style.display = "block";
 +
downArrow.style.display = "block";
 +
xEquation.style.display = "block";
 +
titleX.style.display = "block";
 +
affinityX.style.display = "block";
 +
two.style.display = "block";
 +
spikeZ.style.display = "block";
 +
repressionArrow.style.display = "block";
 +
 +
titledAX.style.display = "block";
 +
 +
 +
var newSetting = fade_in_from / 30;
 +
target.style.opacity = newSetting;
 +
targetY.style.opacity = newSetting/5;
 +
targetZ.style.opacity = newSetting/5;
 +
bigArrow.style.opacity = newSetting;
 +
downArrow.style.opacity = newSetting;
 +
xEquation.style.opacity = newSetting;
 +
titleX.style.opacity = newSetting;
 +
titledAX.style.opacity = newSetting;
 +
affinityX.style.opacity = newSetting;
 +
repressionArrow.style.opacity = newSetting;
 +
two.style.opacity = newSetting;
 +
spikeZ.style.opacity = newSetting;
 +
// opacity ranges from 0 to 1
 +
 +
fade_in_from++;
 +
 +
if(fade_in_from == 30){
 +
target.style.opacity = 1;
 +
targetY.style.opacity = 0.2;
 +
targetZ.style.opacity = 0.2;
 +
bigArrow.style.opacity = 1;
 +
downArrow.style.opacity = 1;
 +
xEquation.style.opacity = 1;
 +
titledAX.style.opacity = 1;
 +
titleX.style.opacity = 1;
 +
affinityX.style.opacity = 1;
 +
repressionArrow.style.opacity = 1;
 +
two.style.opacity = 1;
 +
spikeZ.style.opacity = 1;
 +
clearTimeout(loopTimer);
 +
fade_in_from = 6;
 +
return false;
 +
}
 +
var loopTimer = setTimeout('fadeIn()',40);
 +
 +
 +
};
 +
 +
 +
function fadeZs(){
 +
var theZ = document.getElementById("theZ");
 +
var three = document.getElementById("three");
 +
var spikeY = document.getElementById("spikeY");
 +
var titleZ = document.getElementById("titledZ");
 +
var zEquation = document.getElementById("zEquation");
 +
 +
theZ.style.display = "block";
 +
three.style.display = "block";
 +
spikeY.style.display = "block";
 +
titleZ.style.display = "block";
 +
zEquation.style.display = "block";
 +
 +
var newSetting = fade_in_from / 30;
 +
 +
theZ.style.opacity = newSetting;
 +
three.style.opacity = newSetting;
 +
spikeY.style.opacity = newSetting;
 +
titleZ.style.opacity = newSetting;
 +
zEquation.style.opacity = newSetting;
 +
 +
fade_in_from++;
 +
if(fade_in_from == 30){
 +
 +
theZ.style.opacity = 1;
 +
three.style.opacity = 1;
 +
spikeY.style.opacity = 1;
 +
titleZ.style.opacity = 1;
 +
zEquation.style.opacity = 1;
 +
clearTimeout(loopTimer);
 +
fade_in_from = 6;
 +
return false;
 +
}
 +
var loopTimer = setTimeout('fadeZs()',30);
 +
}
 +
 +
function fadeYs(){
 +
var theY = document.getElementById("theY");
 +
var titleY = document.getElementById("titledY");
 +
var yEquation = document.getElementById("yEquation");
 +
var affinityY = document.getElementById("affinityY");
 +
 +
theY.style.display = "block";
 +
titleY.style.display = "block";
 +
yEquation.style.display = "block";
 +
affinityY.style.display = "block";
 +
titledAY.style.display = "block";
 +
 +
var newSetting = fade_in_from / 30;
 +
theY.style.opacity = newSetting;
 +
titleY.style.opacity = newSetting;
 +
affinityY.style.opacity = newSetting;
 +
titledAY.style.opacity = newSetting;
 +
yEquation.style.opacity = newSetting;
 +
 +
fade_in_from++;
 +
if(fade_in_from == 30){
 +
theY.style.opacity = 1;
 +
titleY.style.opacity = 1;
 +
yEquation.style.opacity = 1;
 +
affinityY.style.opacity = 1;
 +
titledAY.style.opacity = 1;
 +
clearTimeout(loopTimer);
 +
fade_in_from = 0;
 +
return false;
 +
}
 +
var loopTimer = setTimeout('fadeYs()',30);
 +
}
 +
 +
</script>
</html>
</html>

Revision as of 00:35, 27 September 2013

Retrieved from "http://2013.igem.org/Template:UOttawa_Scripts"