Circles on circles: Difference between revisions

From JSXGraph Wiki
No edit summary
No edit summary
Line 11: Line 11:
<script type="text/javascript">
<script type="text/javascript">
$(function() {
$(function() {
$("#slider1").slider({
$("#sliderc1").slider({
orientation: "horizontal",range: "min",min: 0,max: 100,value: 60,
orientation: "horizontal",range: "min",min: 0,max: 100,value: 60,
slide: function(event, ui) {
slide: function(event, ui) {
Line 17: Line 17:
}
}
});
});
$("#slider2").slider({
$("#sliderf1").slider({
orientation: "horizontal",range: "min",min: 0,max: 100,value: 30,
orientation: "horizontal",range: "min",min: 1,max: 100,value: 7,
slide: function(event, ui) {
$("#f1").val(ui.value*0.01);
}
});
$("#c1").val($("#sliderc1").slider("value")*0.01);
$("#f1").val($("#sliderf1").slider("value"));
 
$("#sliderc2").slider({
orientation: "horizontal",range: "min",min: 0,max: 100,value: 60,
slide: function(event, ui) {
slide: function(event, ui) {
$("#c2").val(ui.value*0.01);
$("#c2").val(ui.value*0.01);
}
}
});
});
$("#c1").val($("#slider1").slider("value")*0.01);
$("#sliderf2").slider({
$("#c2").val($("#slider2").slider("value")*0.01);
orientation: "horizontal",range: "min",min: 1,max: 100,value: 17,
slide: function(event, ui) {
$("#f2").val(ui.value);
}
});
$("#c2").val($("#sliderc2").slider("value")*0.01);
$("#f2").val($("#sliderf2").slider("value"));
});
});
</script>
</script>
Line 32: Line 47:
     <label for="c1">c1:</label>
     <label for="c1">c1:</label>
     <input type="text" id="c1" style="border:0; color:#f6931f; font-weight:bold;" />
     <input type="text" id="c1" style="border:0; color:#f6931f; font-weight:bold;" />
    <label for="f1">f1:</label>
    <input type="text" id="f1" style="border:0; color:#f6931f; font-weight:bold;" />
     <label for="c2">c2:</label>
     <label for="c2">c2:</label>
     <input type="text" id="c2" style="border:0; color:#f6931f; font-weight:bold;" />
     <input type="text" id="c2" style="border:0; color:#f6931f; font-weight:bold;" />
    <label for="f2">f2:</label>
    <input type="text" id="f2" style="border:0; color:#f6931f; font-weight:bold;" />
   </p>
   </p>
   <div id="slider1" style="width:200px;margin:5px;"></div>
   <div id="sliderc1" style="width:300px;margin:10px;"></div>
   <div id="slider2" style="width:200px;margin:5px;"></div>
   <div id="sliderf1" style="width:300px;margin:10px;"></div>
  <div id="sliderc2" style="width:300px;margin:10px;"></div>
  <div id="sliderf2" style="width:300px;margin:10px;"></div>
</div>
</div>
<div id="jsxgbox" class="jxgbox" style="width:500px; height:500px;"></div>
<div id="jsxgbox" class="jxgbox" style="width:500px; height:500px;"></div>

Revision as of 10:54, 29 June 2009