Difference between revisions of "Circles on circles"

From JSXGraph Wiki
Jump to navigationJump to search
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 12:54, 29 June 2009