Howto include JSXGraph into web pages: Difference between revisions

From JSXGraph Wiki
No edit summary
No edit summary
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]
Line 12: Line 11:
<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 22: Line 20:
<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>
Line 44: Line 41:
<html>
<html>
  <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>
<div id="box" class="jxgbox" style="width:500px; height:500px;"></div>
<div id="box" class="jxgbox" style="width:500px; height:500px;"></div>

Revision as of 14:28, 29 October 2009

Including JSXGraph into HTML

For including JSXGraph into HTML, two files are necessary:

You can either download these three files and use the local copy or you can use the online version.

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>

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', {originX: 250, originY: 250, unitX: 50, unitY: 50, axis:true});
</script>

We can use as many different drawing panels as we like in one HTML file. The class jxgbox sets "position:relative" which seems to be mandatory for the Internet Explorer 7.

The result