Difference between revisions of "Howto include JSXGraph into web pages"

From JSXGraph Wiki
Jump to: navigation, search
(Include a drawing panel into the HTML)
(Usage of the online copy)
 
(10 intermediate revisions by 3 users not shown)
Line 1: Line 1:
 
 
== Including JSXGraph into HTML ==
 
== Including JSXGraph into HTML ==
  
For including JSXGraph into HTML, three files are necessary:
+
For including JSXGraph into HTML, two files are necessary:
* prototype.js from [http://www.prototypejs.org http://www.prototypejs.org] or [http://jsxgraph.uni-bayreuth.de/distrib/prototype.js local copy]
 
 
* jsxgraphcore.js from [http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js]
 
* jsxgraphcore.js from [http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js]
 
* jsxgraph.css from [http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css]
 
* jsxgraph.css from [http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css]
You can either download these three 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.
 +
 
 +
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 ===
 
=== Usage of a local copy ===
Line 13: Line 13:
 
<head>
 
<head>
 
  <link rel="stylesheet" type="text/css" href="jsxgraph.css" />
 
  <link rel="stylesheet" type="text/css" href="jsxgraph.css" />
<script type="text/javascript" src="prototype.js"></script>
 
 
  <script type="text/javascript" src="jsxgraphcore.js"></script>
 
  <script type="text/javascript" src="jsxgraphcore.js"></script>
 
</head>
 
</head>
Line 23: Line 22:
 
<head>
 
<head>
 
  <link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" />
 
  <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>
 
  <script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>
 
</head>
 
</head>
 
</source>
 
</source>
 +
You may also consider to load JSXGraph from a CDN (Content Delivery Network), see [http://jsxgraph.uni-bayreuth.de/wp/download/].
  
 
=== Include a drawing panel into the HTML ===
 
=== Include a drawing panel into the HTML ===
Line 34: Line 33:
 
The following code has to be placed into the body part of an HTML file:
 
The following code has to be placed into the body part of an HTML file:
 
<source lang="xml">
 
<source lang="xml">
<div id="jsxgbox" style="width:500px; height:500px;"></div>
+
<div id="box" class="jxgbox" style="width:500px; height:500px;"></div>
 
<script type="text/javascript">
 
<script type="text/javascript">
  var board = JXG.JSXGraph.initBoard('box', {originX: 250, originY: 250, unitX: 50, unitY: 50});
+
  var board = JXG.JSXGraph.initBoard('box', {boundingbox: [-10, 10, 10, -10], axis:true});
 
</script>
 
</script>
 
</source>
 
</source>
 
We can use as many different drawing panels as we like in one HTML file.
 
We can use as many different drawing panels as we like in one HTML file.
 +
 +
===The result===
 +
<jsxgraph box="box" width="500" height="500">
 +
var board = JXG.JSXGraph.initBoard('box', {boundingbox: [-10, 10, 10, -10], axis:true});
 +
</jsxgraph>
 +
 +
[[Category:Examples]]

Latest revision as of 15:09, 17 January 2013

Including JSXGraph into HTML

For including JSXGraph into HTML, two files are necessary:

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 then you have to write the following lines into the document head:

<head>
 <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/jsxgraphcore.js"></script>
</head>

You may also consider to load JSXGraph from a CDN (Content Delivery Network), see [1].

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.

The result