Howto include JSXGraph into web pages - Revision history

A WASSERMANN at 13:12, 8 December 2020

2020-12-08T13:12:20Z

← Older revision		Revision as of 13:12, 8 December 2020
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.~~uni-bayreuth.de~~/distrib/jsxgraphcore.js http://jsxgraph.~~uni-bayreuth.de~~/distrib/jsxgraphcore.js]		* jsxgraphcore.js from [http://jsxgraph.org/distrib/jsxgraphcore.js http://jsxgraph.org/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.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, the ~~prefered~~ way is to include JSXGraph from one of the CDNs		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 [~~http~~://jsxgraph.org/wp/download/].		(Content Delivery Network), see [https://jsxgraph.org/wp/download/].

	You also may include JSXGraph from its homepage (not recommended):		You also may include JSXGraph from its homepage (not recommended):
Line 25:		Line 25:
	<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="~~httsp~~://jsxgraph.org/distrib/jsxgraphcore.js"></script>		<script type="text/javascript" src="https://jsxgraph.org/distrib/jsxgraphcore.js"></script>
	</head>		</head>
	</source>		</source>

A WASSERMANN: /* Usage of the online copy */

2020-12-08T13:10:31Z

Usage of the online copy

← Older revision		Revision as of 13:10, 8 December 2020
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 ~~then you have~~ to ~~write the following lines into~~ the ~~document head~~:		If you want to include the online of JSXGraph in your HTML file, the prefered way is to include JSXGraph from one of the CDNs
			(Content Delivery Network), see [http://jsxgraph.org/wp/download/].

			You also may include JSXGraph from its homepage (not recommended):
	<source lang="xml">		<source lang="xml">
	<head>		<head>
Line 25:		Line 28:
	</head>		</head>
	</source>		</source>
	~~You may also consider to load JSXGraph from a CDN (Content Delivery Network), see [http://jsxgraph.org/wp/download/].~~

	=== Include a drawing panel into the HTML ===		=== Include a drawing panel into the HTML ===

A WASSERMANN: /* Usage of the online copy */

2020-12-08T13:08:41Z

Usage of the online copy

← Older revision		Revision as of 13:08, 8 December 2020
Line 21:		Line 21:
	<source lang="xml">		<source lang="xml">
	<head>		<head>
	<link rel="stylesheet" type="text/css" href="~~http~~://jsxgraph.~~uni-bayreuth.de~~/distrib/jsxgraph.css" />		<link rel="stylesheet" type="text/css" href="https://jsxgraph.org/distrib/jsxgraph.css" />
	<script type="text/javascript" src="~~http~~://jsxgraph.~~uni-bayreuth.de~~/distrib/jsxgraphcore.js"></script>		<script type="text/javascript" src="httsp://jsxgraph.org/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/].		You may also consider to load JSXGraph from a CDN (Content Delivery Network), see [http://jsxgraph.org/wp/download/].

	=== Include a drawing panel into the HTML ===		=== Include a drawing panel into the HTML ===

A WASSERMANN: /* Usage of the online copy */

2013-01-17T13:09:51Z

Usage of the online copy

← Older revision		Revision as of 13:09, 17 January 2013
Line 25:		Line 25:
	</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 ===

A WASSERMANN: /* Including JSXGraph into HTML */

2013-01-17T13:03:16Z

Including JSXGraph into HTML

← Older revision		Revision as of 13:03, 17 January 2013
Line 5:		Line 5:
	* 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 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.

			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 ===

A WASSERMANN: /* Including JSXGraph into HTML */

2013-01-17T13:01:01Z

Including JSXGraph into HTML

← Older revision		Revision as of 13:01, 17 January 2013
Line 4:		Line 4:
	* 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.

	=== Usage of a local copy ===		=== Usage of a local copy ===

Michael at 07:27, 8 June 2011

2011-06-08T07:27:19Z

← Older revision		Revision as of 07:27, 8 June 2011
Line 32:		Line 32:
	<div id="box" class="jxgbox" 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~~, axis:true});		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 class ''jxgbox'' sets "position:relative" which seems to be mandatory for the Internet Explorer 7.~~

	===The result===		===The result===
	<~~html>~~		<jsxgraph box="box" width="500" height="500">
	~~<link rel="stylesheet" type="text/css" href="http://~~jsxgraph~~.uni-bayreuth.de/distrib/jsxgraph.css" />~~		var board = JXG.JSXGraph.initBoard('box', {boundingbox: [-10, 10, 10, -10], axis:true});
	~~<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>~~		</jsxgraph>
	~~<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>~~
	~~</html~~>

	[[Category:Examples]]		[[Category:Examples]]

A WASSERMANN at 14:28, 29 October 2009

2009-10-29T14:28:13Z

← Older revision		Revision as of 14:28, 29 October 2009
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>

A WASSERMANN at 22:08, 23 June 2009

2009-06-23T22:08:59Z

← Older revision		Revision as of 22:08, 23 June 2009
Line 51:		Line 51:
	</script>		</script>
	</html>		</html>

			[[Category:Examples]]

A WASSERMANN at 22:08, 23 June 2009

2009-06-23T22:08:20Z

← Older revision		Revision as of 22:08, 23 June 2009
Line 35:		Line 35:
	<div id="box" class="jxgbox" 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', {originX: 250, originY: 250, unitX: 50, unitY: 50, axis:true});
	</script>		</script>
	</source>		</source>
Line 48:		Line 48:
	<div id="box" class="jxgbox" 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', {originX: 250, originY: 250, unitX: 50, unitY: 50, axis:true});
	</script>		</script>
	</html>		</html>