Howto include JSXGraph into web pages: Difference between revisions
A WASSERMANN (talk | contribs) |
A WASSERMANN (talk | contribs) No edit summary |
||
| (One intermediate revision by the same user not shown) | |||
| Line 2: | Line 2: | ||
For including JSXGraph into HTML, two files are necessary: | For including JSXGraph into HTML, two files are necessary: | ||
* jsxgraphcore.js from [http://jsxgraph. | * jsxgraphcore.js from [http://jsxgraph.org/distrib/jsxgraphcore.js http://jsxgraph.org/distrib/jsxgraphcore.js] | ||
* jsxgraph.css from [http://jsxgraph. | * jsxgraph.css from [http://jsxgraph.org/distrib/jsxgraph.css http://jsxgraph.org/distrib/jsxgraph.css] | ||
You can either download these two files and use the local copy or you can use the online version. | You can either download these two files and use the local copy or you can use the online version. | ||
| Line 18: | Line 18: | ||
=== Usage of the online copy === | === Usage of the online copy === | ||
If you want to include the online of JSXGraph in your HTML file | If you want to include the online of JSXGraph in your HTML file, the preferred way is to include JSXGraph from one of the CDNs | ||
(Content Delivery Network), see [https://jsxgraph.org/wp/download/]. | |||
You also may include JSXGraph from its homepage (not recommended): | |||
<source lang="xml"> | <source lang="xml"> | ||
<head> | <head> | ||
<link rel="stylesheet" type="text/css" href="https://jsxgraph.org/distrib/jsxgraph.css" /> | <link rel="stylesheet" type="text/css" href="https://jsxgraph.org/distrib/jsxgraph.css" /> | ||
<script type="text/javascript" src=" | <script type="text/javascript" src="https://jsxgraph.org/distrib/jsxgraphcore.js"></script> | ||
</head> | </head> | ||
</source> | </source> | ||
=== Include a drawing panel into the HTML === | === Include a drawing panel into the HTML === | ||
Latest revision as of 13:12, 8 December 2020
Including JSXGraph into HTML
For including JSXGraph into HTML, two files are necessary:
- jsxgraphcore.js from http://jsxgraph.org/distrib/jsxgraphcore.js
- jsxgraph.css from http://jsxgraph.org/distrib/jsxgraph.css
You can either download these two files and use the local copy or you can use the online version.
For optimal page loading speed we recommend to include the content of jsxgraph.css into other stylesheet files of the web page.
Usage of a local copy
If you want to include a local copy of JSXGraph in your HTML file then you have to write the following lines into the document head:
<head>
<link rel="stylesheet" type="text/css" href="jsxgraph.css" />
<script type="text/javascript" src="jsxgraphcore.js"></script>
</head>
Usage of the online copy
If you want to include the online of JSXGraph in your HTML file, the preferred way is to include JSXGraph from one of the CDNs (Content Delivery Network), see [1].
You also may include JSXGraph from its homepage (not recommended):
<head>
<link rel="stylesheet" type="text/css" href="https://jsxgraph.org/distrib/jsxgraph.css" />
<script type="text/javascript" src="https://jsxgraph.org/distrib/jsxgraphcore.js"></script>
</head>
Include a drawing panel into the HTML
The geometric construction which is displayed by JSXGraph resides in an HTML element. Usually, a div-element is taken. This division needs an ID. Using this ID, we declare this element to be a drawing panel of JSXGraph.
The following code has to be placed into the body part of an HTML file:
<div id="box" class="jxgbox" style="width:500px; height:500px;"></div>
<script type="text/javascript">
var board = JXG.JSXGraph.initBoard('box', {boundingbox: [-10, 10, 10, -10], axis:true});
</script>
We can use as many different drawing panels as we like in one HTML file.
