Create your own constructions/visualizations using JavaScript: Difference between revisions
From JSXGraph Wiki
No edit summary |
|||
| Line 12: | Line 12: | ||
<div id="box" class="jxgbox" style="width:400px; height:400px;"></div> | <div id="box" class="jxgbox" style="width:400px; height:400px;"></div> | ||
</source> | </source> | ||
=== Third step === | |||
Connect JXG with the div (usually at the end of the document body) | |||
and call initBoard(): | |||
<source lang="xml"> | |||
<script type="text/javascript"> | |||
var board = JXG.JSXGraph.initBoard('box', {originX: 100, originY: 200, unitX: 50, unitY: 50}); | |||
</script> | |||
</source> | |||
* Parameter 1: id of the division | |||
* Parameter 2: properties of the board. Possible entries are: | |||
- originX | |||
- originY | |||
- unitX | |||
- unitY | |||
- zoomX | |||
- zoomY | |||
Revision as of 19:58, 15 September 2008
First step
Link to prototye.js and to jsxgraphcore.js:
<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/prototype.js"></script>
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>
Second step
Insert a div inside of the document body:
<div id="box" class="jxgbox" style="width:400px; height:400px;"></div>
Third step
Connect JXG with the div (usually at the end of the document body) and call initBoard():
<script type="text/javascript">
var board = JXG.JSXGraph.initBoard('box', {originX: 100, originY: 200, unitX: 50, unitY: 50});
</script>
* Parameter 1: id of the division * Parameter 2: properties of the board. Possible entries are: - originX - originY - unitX - unitY - zoomX - zoomY
