Team:SDU-Denmark/testmodel

From 2013.igem.org

Revision as of 15:20, 21 October 2013

<style> .slider-volume { width: 300px; } .slider-volume > .dragger { width: 16px; height: 16px; margin: 0 auto; border: 1px solid rgba(255,255,255,0.6); -moz-box-shadow: 0 0px 2px 1px rgba(0,0,0,0.5), 0 2px 5px 2px rgba(0,0,0,0.2); -webkit-box-shadow: 0 0px 2px 1px rgba(0,0,0,0.5), 0 2px 5px 2px rgba(0,0,0,0.2); box-shadow: 0 0px 2px 1px rgba(0,0,0,0.5), 0 2px 5px 2px rgba(0,0,0,0.2); -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; background: #c5c5c5; background: -moz-linear-gradient(90deg, rgba(180,180,180,1) 20%, rgba(230,230,230,1) 50%, rgba(180,180,180,1) 80%); background: -webkit-radial-gradient( 50% 0%, 12% 50%, hsla(0,0%,100%,1) 0%, hsla(0,0%,100%,0) 100%), -webkit-radial-gradient( 50% 100%, 12% 50%, hsla(0,0%,100%,.6) 0%, hsla(0,0%,100%,0) 100%), -webkit-radial-gradient( 50% 50%, 200% 50%, hsla(0,0%,90%,1) 5%, hsla(0,0%,85%,1) 30%, hsla(0,0%,60%,1) 100%); } .slider-volume > .track, .slider-volume > .highlight-track { height: 11px; background: #787878; background: -moz-linear-gradient(top, #787878, #a2a2a2); background: -webkit-linear-gradient(top, #787878, #a2a2a2); background: linear-gradient(top, #787878, #a2a2a2); -moz-box-shadow: inset 0 2px 5px 1px rgba(0,0,0,0.15), 0 1px 0px 0px rgba(230,230,230,0.9), inset 0 0 1px 1px rgba(0,0,0,0.2); -webkit-box-shadow: inset 0 2px 5px 1px rgba(0,0,0,0.15), 0 1px 0px 0px rgba(230,230,230,0.9), inset 0 0 1px 1px rgba(0,0,0,0.2); box-shadow: inset 0 2px 5px 1px rgba(0,0,0,0.15), 0 1px 0px 0px rgba(230,230,230,0.9), inset 0 0 1px 1px rgba(0,0,0,0.2); -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; } .slider-volume > .highlight-track { background-color: #c5c5c5; background: -moz-linear-gradient(top, #c5c5c5, #a2a2a2); background: -webkit-linear-gradient(top, #c5c5c5, #a2a2a2); background: linear-gradient(top, #c5c5c5, #a2a2a2); } .calculator-arrows { width: 1000px; height: 1000px; position: relative; } .cal-output { position: absolute; font-family: sans-serif; font-size: small; } #calculator_input-slider { display: inline-block; width: 120px; } #input-box { font-family: sans-serif; font-size: small; position: absolute; top: 120px; left: 320px; } #input-box span { vertical-align: top; } </style> <script type="text/javascript" > /* * jQuery Simple Slider: Unobtrusive Numerical Slider * Version 1.0.0 * * Copyright (c) 2013 James Smith (http://loopj.com) * * Licensed under the MIT license (http://mit-license.org/) * */ var __slice=[].slice,__indexOf=[].indexOf||function(e){for(var t=0,n=this.length;t<n;t++)if(t in this&&this[t]===e)return t;return-1};(function(e,t){var n;return n=function(){function t(t,n){var r,i=this;this.input=t,this.defaultOptions={animate:!0,snapMid:!1,classPrefix:null,classSuffix:null,theme:null,highlight:!1},this.settings=e.extend({},this.defaultOptions,n),this.settings.theme&&(this.settings.classSuffix="-"+this.settings.theme),this.input.hide(),this.slider=e("<div>").addClass("slider"+(this.settings.classSuffix||"")).css({position:"relative",userSelect:"none",boxSizing:"border-box"}).insertBefore(this.input),this.input.attr("id")&&this.slider.attr("id",this.input.attr("id")+"-slider"),this.track=this.createDivElement("track").css({width:"100%"}),this.settings.highlight&&(this.highlightTrack=this.createDivElement("highlight-track").css({width:"0"})),this.dragger=this.createDivElement("dragger"),this.slider.css({minHeight:this.dragger.outerHeight(),marginLeft:this.dragger.outerWidth()/2,marginRight:this.dragger.outerWidth()/2}),this.track.css({marginTop:this.track.outerHeight()/-2}),this.settings.highlight&&this.highlightTrack.css({marginTop:this.track.outerHeight()/-2}),this.dragger.css({marginTop:this.dragger.outerWidth()/-2,marginLeft:this.dragger.outerWidth()/-2}),this.track.mousedown(function(e){return i.trackEvent(e)}),this.settings.highlight&&this.highlightTrack.mousedown(function(e){return i.trackEvent(e)}),this.dragger.mousedown(function(e){if(e.which!==1)return;return i.dragging=!0,i.dragger.addClass("dragging"),i.domDrag(e.pageX,e.pageY),!1}),e("body").mousemove(function(t){if(i.dragging)return i.domDrag(t.pageX,t.pageY),e("body").css({cursor:"pointer"})}).mouseup(function(t){if(i.dragging)return i.dragging=!1,i.dragger.removeClass("dragging"),e("body").css({cursor:"auto"})}),this.pagePos=0,this.input.val()===""?(this.value=this.getRange().min,this.input.val(this.value)):this.value=this.nearestValidValue(this.input.val()),this.setSliderPositionFromValue(this.value),r=this.valueToRatio(this.value),this.input.trigger("slider:ready",{value:this.value,ratio:r,position:r*this.slider.outerWidth(),el:this.slider})}return t.prototype.createDivElement=function(t){var n;return n=e("<div>").addClass(t).css({position:"absolute",top:"50%",userSelect:"none",cursor:"pointer"}).appendTo(this.slider),n},t.prototype.setRatio=function(e){var t;return e=Math.min(1,e),e=Math.max(0,e),t=this.ratioToValue(e),this.setSliderPositionFromValue(t),this.valueChanged(t,e,"setRatio")},t.prototype.setValue=function(e){var t;return e=this.nearestValidValue(e),t=this.valueToRatio(e),this.setSliderPositionFromValue(e),this.valueChanged(e,t,"setValue")},t.prototype.trackEvent=function(e){if(e.which!==1)return;return this.domDrag(e.pageX,e.pageY,!0),this.dragging=!0,!1},t.prototype.domDrag=function(e,t,n){var r,i,s;n==null&&(n=!1),r=e-this.slider.offset().left,r=Math.min(this.slider.outerWidth(),r),r=Math.max(0,r);if(this.pagePos!==r)return this.pagePos=r,i=r/this.slider.outerWidth(),s=this.ratioToValue(i),this.valueChanged(s,i,"domDrag"),this.settings.snap?this.setSliderPositionFromValue(s,n):this.setSliderPosition(r,n)},t.prototype.setSliderPosition=function(e,t){t==null&&(t=!1);if(t&&this.settings.animate){this.dragger.animate({left:e},200);if(this.settings.highlight)return this.highlightTrack.animate({width:e},200)}else{this.dragger.css({left:e});if(this.settings.highlight)return this.highlightTrack.css({width:e})}},t.prototype.setSliderPositionFromValue=function(e,t){var n;return t==null&&(t=!1),n=this.valueToRatio(e),this.setSliderPosition(n*this.slider.outerWidth(),t)},t.prototype.getRange=function(){return this.settings.allowedValues?{min:Math.min.apply(Math,this.settings.allowedValues),max:Math.max.apply(Math,this.settings.allowedValues)}:this.settings.range?{min:parseFloat(this.settings.range[0]),max:parseFloat(this.settings.range[1])}:{min:0,max:1}},t.prototype.nearestValidValue=function(t){var n,r,i,s;return i=this.getRange(),t=Math.min(i.max,t),t=Math.max(i.min,t),this.settings.allowedValues?(n=null,e.each(this.settings.allowedValues,function(){if(n===null||Math.abs(this-t)<Math.abs(n-t))return n=this}),n):this.settings.step?(r=(i.max-i.min)/this.settings.step,s=Math.floor((t-i.min)/this.settings.step),(t-i.min)%this.settings.step>this.settings.step/2&&s<r&&(s+=1),s*this.settings.step+i.min):t},t.prototype.valueToRatio=function(e){var t,n,r,i,s,o,u,a;if(this.settings.equalSteps){a=this.settings.allowedValues;for(i=o=0,u=a.length;o<u;i=++o){t=a[i];if(typeof n=="undefined"||n===null||Math.abs(t-e)<Math.abs(n-e))n=t,r=i}return this.settings.snapMid?(r+.5)/this.settings.allowedValues.length:r/(this.settings.allowedValues.length-1)}return s=this.getRange(),(e-s.min)/(s.max-s.min)},t.prototype.ratioToValue=function(e){var t,n,r,i,s;return this.settings.equalSteps?(s=this.settings.allowedValues.length,i=Math.round(e*s-.5),t=Math.min(i,this.settings.allowedValues.length-1),this.settings.allowedValues[t]):(n=this.getRange(),r=e*(n.max-n.min)+n.min,this.nearestValidValue(r))},t.prototype.valueChanged=function(t,n,r){var i;if(t.toString()===this.value.toString())return;return this.value=t,i={value:t,ratio:n,position:n*this.slider.outerWidth(),trigger:r,el:this.slider},this.input.val(t).trigger(e.Event("change",i)).trigger("slider:changed",i)},t}(),e.extend(e.fn,{simpleSlider:function(){var t,r,i;return i=arguments[0],t=2<=arguments.length?__slice.call(arguments,1):[],r=["setRatio","setValue"],e(this).each(function(){var s,o;return i&&__indexOf.call(r,i)>=0?(s=e(this).data("slider-object"),s[i].apply(s,t)):(o=i,e(this).data("slider-object",new n(e(this),o)))})}}),e(function(){return e("[data-slider]").each(function(){var t,n,r,i;return t=e(this),r={},n=t.data("slider-values"),n&&(r.allowedValues=function(){var e,t,r,s;r=n.split(","),s=[];for(e=0,t=r.length;e<t;e++)i=r[e],s.push(parseFloat(i));return s}()),t.data("slider-range")&&(r.range=t.data("slider-range").split(",")),t.data("slider-step")&&(r.step=t.data("slider-step")),r.snap=t.data("slider-snap"),r.equalSteps=t.data("slider-equal-steps"),t.data("slider-theme")&&(r.theme=t.data("slider-theme")),t.attr("data-slider-highlight")&&(r.highlight=t.data("slider-highlight")),t.data("slider-animate")!=null&&(r.animate=t.data("slider-animate")),t.simpleSlider(r)})})})(this.jQuery||this.Zepto,this); var calculatorData = [["increase","V - dxr","V - IspD","V - IspE","V - IspF","V - IspG","V - IspH venstre","V - IspH h\u00f8jre","C - vitamin B"],["0.0000","0.0000","0.0000","0.0000","0.0000","0.0000","0.0000","0.0000","0.0000"],["1.0000","1.0000","1.0000","1.0000","1.0000","1.0000","0.2500","0.7500","0.8122"],["2.0000","2.0000","2.0000","2.0000","2.0000","2.0000","0.5000","1.5000","1.6232"],["3.0000","3.0000","3.0000","3.0000","3.0000","3.0000","0.7500","2.2500","2.4343"],["4.0000","4.0000","4.0000","4.0000","4.0000","4.0000","1.0000","3.0000","3.2432"],["5.0000","5.0000","5.0000","5.0000","5.0000","5.0000","1.2500","3.7500","4.0511"],["6.0000","6.0000","6.0000","6.0000","6.0000","6.0000","1.5000","4.5000","4.8579"],["7.0000","7.0000","7.0000","7.0000","7.0000","7.0000","1.7500","5.2500","5.6637"],["8.0000","8.0000","8.0000","8.0000","8.0000","8.0000","2.0000","6.0000","6.4685"],["9.0000","9.0000","9.0000","9.0000","9.0000","9.0000","2.2500","6.7500","7.2723"],["10.0000","10.0000","10.0000","10.0000","10.0000","10.0000","2.5000","7.5000","8.0751"],["11.0000","11.0000","11.0000","11.0000","11.0000","11.0000","2.7500","8.2500","8.8770"],["12.0000","12.0000","12.0000","12.0000","12.0000","11.7750","2.9438","8.8313","9.6779"],["13.0000","13.0000","13.0000","13.0000","13.0000","11.9166","2.9792","8.9375","10.4778"],["14.0000","14.0000","14.0000","14.0000","14.0000","11.9494","2.9874","8.9621","11.2769"],["15.0000","15.0000","15.0000","15.0000","15.0000","11.9630","2.9908","8.9723","12.0750"],["16.0000","16.0000","16.0000","16.0000","16.0000","11.9703","2.9926","8.9777","12.8722"],["17.0000","17.0000","17.0000","17.0000","17.0000","11.9748","2.9937","8.9811","13.6686"],["18.0000","18.0000","18.0000","18.0000","18.0000","11.9779","2.9945","8.9834","14.4519"],["19.0000","19.0000","19.0000","19.0000","19.0000","11.9801","2.9950","8.9851","15.2160"],["20.0000","20.0000","20.0000","20.0000","20.0000","11.9818","2.9955","8.9864","15.9787"],["21.0000","21.0000","21.0000","21.0000","21.0000","11.9832","2.9958","8.9874","16.7399"],["22.0000","22.0000","22.0000","22.0000","22.0000","11.9842","2.9961","8.9882","17.4995"],["23.0000","23.0000","23.0000","23.0000","23.0000","11.9851","2.9963","8.9888","18.2577"],["24.0000","24.0000","24.0000","24.0000","24.0000","11.9858","2.9965","8.9894","19.0145"],["25.0000","25.0000","25.0000","25.0000","25.0000","11.9864","2.9966","8.9898","19.7697"],["26.0000","26.0000","26.0000","26.0000","26.0000","11.9870","2.9968","8.9903","20.5236"],["27.0000","27.0000","27.0000","27.0000","27.0000","11.9874","2.9969","8.9906","21.2760"],["28.0000","28.0000","28.0000","28.0000","28.0000","11.9878","2.9970","8.9909","22.0270"],["29.0000","29.0000","29.0000","29.0000","29.0000","11.9882","2.9971","8.9912","22.7766"],["30.0000","30.0000","30.0000","30.0000","30.0000","11.9885","2.9971","8.9914","23.5248"],["31.0000","31.0000","31.0000","31.0000","31.0000","11.9888","2.9972","8.9916","24.2716"],["32.0000","32.0000","32.0000","32.0000","32.0000","11.9890","2.9973","8.9918","25.0171"],["33.0000","33.0000","33.0000","33.0000","33.0000","11.9893","2.9973","8.9920","25.7612"],["34.0000","34.0000","34.0000","34.0000","34.0000","11.9895","2.9974","8.9921","26.5039"],["35.0000","35.0000","35.0000","35.0000","35.0000","11.9896","2.9974","8.9922","27.2453"],["36.0000","36.0000","36.0000","36.0000","35.9961","11.9898","2.9975","8.9924","27.9854"],["37.0000","37.0000","37.0000","37.0000","36.8462","11.9899","2.9975","8.9924","28.7242"],["38.0000","38.0000","38.0000","38.0000","37.2785","11.9900","2.9975","8.9925","29.4616"],["39.0000","39.0000","39.0000","39.0000","37.4590","11.9900","2.9975","8.9925","30.1978"],["40.0000","40.0000","40.0000","40.0000","37.5461","11.9900","2.9975","8.9925","30.9326"],["41.0000","41.0000","41.0000","41.0000","37.5952","11.9901","2.9975","8.9926","31.6662"],["42.0000","42.0000","42.0000","42.0000","37.6261","11.9901","2.9975","8.9926","32.3986"],["43.0000","43.0000","43.0000","43.0000","37.6471","11.9901","2.9975","8.9926","33.1296"],["44.0000","44.0000","44.0000","44.0000","37.6623","11.9901","2.9975","8.9926","33.8594"],["45.0000","45.0000","45.0000","45.0000","37.6738","11.9901","2.9975","8.9926","34.5880"],["46.0000","46.0000","46.0000","46.0000","37.6827","11.9901","2.9975","8.9926","35.3154"],["47.0000","47.0000","47.0000","47.0000","37.6898","11.9901","2.9975","8.9926","36.0415"],["48.0000","48.0000","48.0000","48.0000","37.6956","11.9901","2.9975","8.9926","36.7664"],["49.0000","49.0000","49.0000","49.0000","37.7005","11.9901","2.9975","8.9926","37.4902"],["50.0000","50.0000","50.0000","50.0000","37.7046","11.9901","2.9975","8.9926","38.2127"],["51.0000","51.0000","51.0000","51.0000","37.7081","11.9901","2.9975","8.9926","38.9341"],["52.0000","52.0000","52.0000","52.0000","37.7111","11.9901","2.9975","8.9926","39.6542"],["53.0000","53.0000","53.0000","53.0000","37.7137","11.9901","2.9975","8.9926","40.3732"],["54.0000","54.0000","54.0000","54.0000","37.7161","11.9901","2.9975","8.9926","41.0911"],["55.0000","55.0000","55.0000","55.0000","37.7181","11.9901","2.9975","8.9926","41.8078"],["56.0000","56.0000","56.0000","56.0000","37.7200","11.9901","2.9975","8.9926","42.5234"],["57.0000","57.0000","57.0000","57.0000","37.7217","11.9901","2.9975","8.9926","43.2378"],["58.0000","58.0000","58.0000","58.0000","37.7232","11.9901","2.9975","8.9926","43.9511"],["59.0000","59.0000","59.0000","59.0000","37.7245","11.9901","2.9975","8.9926","44.6633"],["60.0000","60.0000","60.0000","60.0000","37.7258","11.9901","2.9975","8.9926","45.3744"],["61.0000","61.0000","61.0000","61.0000","37.7269","11.9901","2.9975","8.9926","46.0844"],["62.0000","62.0000","62.0000","62.0000","37.7279","11.9901","2.9975","8.9926","46.7933"],["63.0000","63.0000","63.0000","63.0000","37.7289","11.9901","2.9975","8.9926","47.5011"],["64.0000","64.0000","64.0000","64.0000","37.7298","11.9901","2.9975","8.9926","48.2078"],["65.0000","65.0000","65.0000","65.0000","37.7306","11.9901","2.9975","8.9926","48.9135"],["66.0000","66.0000","66.0000","66.0000","37.7314","11.9901","2.9975","8.9926","49.6181"],["67.0000","67.0000","67.0000","67.0000","37.7321","11.9901","2.9975","8.9926","50.3216"],["68.0000","68.0000","68.0000","68.0000","37.7328","11.9901","2.9975","8.9926","51.0241"],["69.0000","69.0000","69.0000","69.0000","37.7334","11.9901","2.9975","8.9926","51.7256"],["70.0000","70.0000","70.0000","70.0000","37.7340","11.9901","2.9975","8.9926","52.4260"],["71.0000","71.0000","71.0000","71.0000","37.7345","11.9901","2.9975","8.9926","53.1254"],["72.0000","72.0000","72.0000","72.0000","37.7351","11.9901","2.9975","8.9926","53.8238"],["73.0000","73.0000","73.0000","73.0000","37.7355","11.9901","2.9975","8.9926","54.5212"],["74.0000","74.0000","74.0000","74.0000","37.7360","11.9901","2.9975","8.9926","55.2176"],["75.0000","75.0000","75.0000","75.0000","37.7365","11.9901","2.9975","8.9926","55.9129"],["76.0000","76.0000","76.0000","76.0000","37.7369","11.9901","2.9975","8.9926","56.6073"],["77.0000","77.0000","77.0000","77.0000","37.7373","11.9901","2.9975","8.9926","57.3007"],["78.0000","78.0000","78.0000","78.0000","37.7376","11.9901","2.9975","8.9926","57.9931"],["79.0000","79.0000","79.0000","79.0000","37.7380","11.9901","2.9975","8.9926","58.6846"],["80.0000","80.0000","80.0000","80.0000","37.7383","11.9901","2.9975","8.9926","59.3751"],["81.0000","81.0000","81.0000","81.0000","37.7387","11.9901","2.9975","8.9926","60.0646"],["82.0000","82.0000","82.0000","82.0000","37.7390","11.9901","2.9975","8.9926","60.7531"],["83.0000","83.0000","83.0000","83.0000","37.7393","11.9901","2.9975","8.9926","61.4408"],["84.0000","84.0000","84.0000","84.0000","37.7396","11.9901","2.9975","8.9926","62.1274"],["85.0000","85.0000","85.0000","85.0000","37.7398","11.9901","2.9975","8.9926","62.8132"],["86.0000","86.0000","86.0000","86.0000","37.7401","11.9901","2.9975","8.9926","63.4980"],["87.0000","87.0000","87.0000","87.0000","37.7404","11.9901","2.9975","8.9926","64.1819"],["88.0000","88.0000","88.0000","88.0000","37.7406","11.9901","2.9975","8.9926","64.8648"],["89.0000","89.0000","89.0000","89.0000","37.7408","11.9901","2.9975","8.9926","65.5469"],["90.0000","90.0000","90.0000","90.0000","37.7410","11.9901","2.9975","8.9926","66.2281"],["91.0000","91.0000","91.0000","91.0000","37.7413","11.9901","2.9975","8.9926","66.9083"],["92.0000","92.0000","92.0000","92.0000","37.7415","11.9901","2.9975","8.9926","67.5877"],["93.0000","93.0000","93.0000","93.0000","37.7417","11.9901","2.9975","8.9926","68.2661"],["94.0000","94.0000","94.0000","94.0000","37.7419","11.9901","2.9975","8.9926","68.9437"],["95.0000","95.0000","95.0000","95.0000","37.7420","11.9901","2.9975","8.9926","69.6204"],["96.0000","96.0000","96.0000","96.0000","37.7422","11.9901","2.9975","8.9926","70.2963"],["97.0000","97.0000","97.0000","97.0000","37.7424","11.9901","2.9975","8.9926","70.9712"],["98.0000","98.0000","98.0000","98.0000","37.7426","11.9901","2.9975","8.9926","71.6453"],["99.0000","99.0000","99.0000","99.0000","37.7427","11.9901","2.9975","8.9926","72.3186"],["100.0000","100.0000","100.0000","100.0000","37.7429","11.9901","2.9975","8.9926","72.9910"]] $(function() { $('#calculator_input').change(function() { $('#input-box').find('span').html($(this).val() + ' %'); $('#cal-vdxr').find('span').html(calculatorData[parseInt($(this).val())+1][1] + ' %'); $('#cal-vispd').find('span').html(calculatorData[parseInt($(this).val())+1][2]+ ' %'); $('#cal-vispe').find('span').html(calculatorData[parseInt($(this).val())+1][3]+ ' %'); $('#cal-vispf').find('span').html(calculatorData[parseInt($(this).val())+1][4]+ ' %'); $('#cal-vispg').find('span').html(calculatorData[parseInt($(this).val())+1][5]+ ' %'); $('#cal-visphL').find('span').html(calculatorData[parseInt($(this).val())+1][6]+ ' %'); $('#cal-visphR').find('span').html(calculatorData[parseInt($(this).val())+1][7]+ ' %'); $('#cal-cvit').find('span').html(calculatorData[parseInt($(this).val())+1][8]+ ' %'); }); $('#calculator_input').change(); }); </script> <div class="calculator-arrows"> <img src="http://lrm.dk/igem/igem.png" alt="igem"> <form id="input-box"> <input size="10" type="text" id="calculator_input" data-slider-theme="volume" data-slider="true" data-slider-range="0,100" data-slider-step="1" data-slider-s nap="true"> <span></span> </form> <div style="top:310px; left:330px;" class="cal-output" id="cal-vdxr">V = <span></span></div> <div style="top:485px; left:330px;" class="cal-output" id="cal-vispd">V = <span></span></div> <div style="top:700px; left:330px;" class="cal-output" id="cal-vispe">V = <span></span></div> <div style="top:910px; left:330px;" class="cal-output" id="cal-vispf">V = <span></span></div> <div style="top:1095px; left:330px;" class="cal-output" id="cal-vispg">V = <span></span></div> <div style="top:1248px; left:20px;" class="cal-output" id="cal-visphL">V = <span></span></div> <div style="top:1248px; left:430px;" class="cal-output" id="cal-visphR">V = <span></span></div> <div style="top:215px; left:485px;" class="cal-output" id="cal-cvit">C = <span></span></div> </div>