Team:SDU-Denmark/testmodel

From 2013.igem.org

(Difference between revisions)
(Created page with "<html> <head> <style> .calculator-arrows { width: 1000px; height: 1000px; position: relative; } .cal-output { position: absolute; font-family: sans-serif; font-size: small...")
 
(9 intermediate revisions not shown)
Line 1: Line 1:
<html>
<html>
-
<head>
+
<iframe  border="0" width="805" style="border:none; overflow:hidden;" height="1500" src="http://lrm.dk/igem/beregner.html">
-
<style>
+
-
.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>
+
-
<!-- Include jQuery -->
+
-
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
+
-
 
+
-
<!-- Include Simple Slider JavaScript and CSS -->
+
-
<script src="simpleslider/simple-slider.min.js"></script>
+
-
<link href="simpleslider/simple-slider-volume.css" rel="stylesheet" type="text/css" />
+
-
 
+
-
<!-- Activate Simple Slider on your input -->
+
-
 
+
-
 
+
-
<script src="data.js"></script>
+
-
<script type="text/javascript" >
+
-
$(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>
+
-
</head>
+
-
<body>
+
-
<div class="calculator-arrows">
+
-
<img src="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>
+
-
 
+
-
</body>
+
</html>
</html>

Latest revision as of 08:58, 22 October 2013