Home

Example 5 - Moving Toolbar

This example implements a moving toolbar, which works across multiple input boxes:

It has also been embedded within a form that could use to submit to equations to 3rd party application - like Google docs.


Question 1

Question 2

Question 3

HTML format for Q3:

Key HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
<title>Example 5 - Moving Toolbar</title>

<!-- Scripts needed by CodeCogs Equation Editor -->
<link rel="stylesheet" type="text/css" href="http://latex.codecogs.com/css/equation-embed.css" />
<script type="text/javascript" src="http://latex.codecogs.com/js/eq_config.js" ></script>
<script type="text/javascript" src="http://latex.codecogs.com/js/eq_editor-lite-18.js" ></script>
<!-- End of Scripts needed -->
<style type="text/css">
#EqnEditor { text-align:left }
</style>
</head>
<body>
<h1>Example 5</h1>
<p>This example implements a moving toolbar, which works across multiple input boxes.</p>
<hr />

<form name="answerform">
<h3>Question 1</h3>
<div id="editor"></div>
<textarea name="entry.0.single" id="entry_0" onClick="EqEditor.moveto('editor')"></textarea>
<p><img id="equation1" /></p>

<h3>Question 2</h3>
<div id="editor1"></div>
<textarea name="entry.1.single" id="entry_1" onClick="EqEditor.moveto('editor1')"></textarea>
<p><img id="equation2" /></p>

<h3>Question 3</h3>
<div id="editor2"></div>
<textarea name="entry.2.single" id="entry_2" onClick="EqEditor.moveto('editor2')"></textarea>
<p><img id="equation3" /></p>

<p>Q3 in HTML format:</p>
<textarea name="entry.3.single" id="entry_3" cols="80"></textarea>
</form>

<!-- Initialize Editor 1 -->
<script type="text/javascript">
EqEditor.embed('editor','things','mini','en-us');
var a=new EqTextArea('equation1', 'entry_0');
var b=new EqTextArea('equation2', 'entry_1');
var c=new EqTextArea('equation3', 'entry_2');
EqEditor.add(a,false);
EqEditor.add(b,false);
EqEditor.add(c,false);
c.addExportArea('entry_3','html');
</script>

</body>
</html>

© 2004-2013 www.CodeCogs.com, Zyba Ltd.