Jump to content

Math editor


Recommended Posts

HiI need help in creating a math editor to my form. Please tell me how to create a math editor which includes all symbols like sigma,pi etc. By clicking a button i want to get open the math editor. And after selecting the symbol from math editorit should seen like <font symbol=√>√</font> Please tell me how to do that.√=√The value alone will seen inbetween font tags √

Edited by gaya
Link to post
Share on other sites
I cann't understand Which part do you need help with? I want help in creating the math symbols with onclick. How shall i create it.
No one wants to waste time explaining things you already know how to do. Here are questions I wonder about. 1. Do you have a special font? Are the symbols available in Webdings? Will you use HTML entities to display the symbols?2. Do you know how to make a click handler?3. Are you using jQuery? (You don't have to)4. Do you know how to add text content to an element? A very basic technique might look like this, but I don't know if it's all you need:
var sigmaButton = document.getElementById("sigmaButton");sigmaButton.onclick = function () {   var display = document.getElementById("display");   var sigma = "Σ";   display.innerHTML += sigma;}

But this is not efficient. This technique requires a unique function for every button, but there are many ways to do it using just one function for all. Knowing which way is best would depend on how you want your HTML to look. So 5. How do you want your HTML to be structured? Do you already have HTML, or do you need someone to design that for you too?

Edited by Deirdre's Dad
Link to post
Share on other sites
I cann't understand Which part do you need help with? I want help in creating the math symbols with onclick. How shall i create it.
In other words, what have you tried? i.e., how far did you get before you came asking for help? If you have nothing, then it will certainly make people less reluctant to help you unless you have already committed some time to the problem yourself first.
Link to post
Share on other sites

I have already tried the following code.

<!DOCTYPE html><html><head>    <style>	    .popup {		    position: absolute;		    left: 100px;		    top: 100px;		    border: 1px solid #000;		    background-color: #f0f0f0;	    }	    .popup .symbol {		    display: inline-block;		    padding: 5px;		    margin: 10px;		    border: 1px solid #000;	    }    </style>    <script>	    var symbolPopup = null;	    function CreateSymbolPopup () {		    if (symbolPopup) {			    return;		    }		    symbolPopup = document.createElement ('div');		    symbolPopup.className = "popup";		    var symbols = [8719, 8721, 8730];		    for (var i = 0; i < symbols.length; i++) {			    var symbolButton = document.createElement ('span');			    symbolButton.innerHTML = '' + symbols[i] + ';';			    symbolButton.onclick = AddSymbol;			    symbolButton.className = "symbol";			    symbolPopup.appendChild (symbolButton);		    }		    document.body.appendChild (symbolPopup);	    }	    function ShowSymbols () {		    CreateSymbolPopup ();		    symbolPopup.style.display = "";	    }	    function HideSymbols () {		    if (symbolPopup) {			    symbolPopup.style.display = "none";		    }	    }	    function AddSymbol () {		    var editor = document.getElementById ('editor');		    editor.value += this.innerHTML;		    HideSymbols ();	    }    </script></head><body>    <button onclick="ShowSymbols ()">Symbols</button>    <textarea id="editor"></textarea></body></html>

In the above code, by clicking the symbol button,I want to display the value inside the textbox and not the symbol.Also i want the value seen inbetween font tags.

Link to post
Share on other sites

This might help, all you have to do is learn what the symbols you want are in javascript ant input it into the code.Here is a calculator that I made, feel free to take it and use it. <html><head><script LANGUAGE="JavaScript">function addChar(input, character) { if(input.value == null || input.value == "0") input.value = character else input.value += character}function cos(form) { form.display.value = Math.cos(form.display.value);}function sin(form) { form.display.value = Math.sin(form.display.value);}function tan(form) { form.display.value = Math.tan(form.display.value);}function sqrt(form) { form.display.value = Math.sqrt(form.display.value);}function ln(form) { form.display.value = Math.log(form.display.value);}function exp(form) { form.display.value = Math.exp(form.display.value);}function deleteChar(input) { input.value = input.value.substring(0, input.value.length - 1)}function changeSign(input) { if(input.value.substring(0, 1) == "-") input.value = input.value.substring(1, input.value.length) else input.value = "-" + input.value}function compute(form) { form.display.value = eval(form.display.value)}function square(form) { form.display.value = eval(form.display.value) * eval(form.display.value)}function checkNum(str) { for (var i = 0; i < str.length; i++) { var ch = str.substring(i, i+1) if (ch < "0" || ch > "9") { if (ch != "/" && ch != "*" && ch != "+" && ch != "-" && ch != "." && ch != "(" && ch!= ")") { alert("incalculable") return false } } } return true}</SCRIPT></head><BODY><FORM NAME="sci-calc"><TABLE CELLSPACING="1" CELLPADDING="3" ALIGN="center" BORDER="10" COLOR="black"><TR><TD COLSPAN="5" ALIGN="center"><INPUT NAME="display" VALUE="0" SIZE="28" MAXLENGTH="25"></TD></TR><TR><TD ALIGN="center"><INPUT TYPE="button" VALUE=" exp " ONCLICK="if (checkNum(this.form.display.value)) { exp(this.form) }"></TD><TD ALIGN="center"><INPUT TYPE="button" VALUE=" 7 " ONCLICK="addChar(this.form.display, '7')"></TD><TD ALIGN="center"><INPUT TYPE="button" VALUE=" 8 " ONCLICK="addChar(this.form.display, '8')"></TD><TD ALIGN="center"><INPUT TYPE="button" VALUE=" 9 " ONCLICK="addChar(this.form.display, '9')"></TD><TD ALIGN="center"><INPUT TYPE="button" VALUE=" / " ONCLICK="addChar(this.form.display, '/')"></TD></TR><TR><TD ALIGN="center"><INPUT TYPE="button" VALUE=" ln " ONCLICK="if (checkNum(this.form.display.value)) { ln(this.form) }"></TD><TD ALIGN="center"><INPUT TYPE="button" VALUE=" 4 " ONCLICK="addChar(this.form.display, '4')"></TD><TD ALIGN="center"><INPUT TYPE="button" VALUE=" 5 " ONCLICK="addChar(this.form.display, '5')"></TD><TD ALIGN="center"><INPUT TYPE="button" VALUE=" 6 " ONCLICK="addChar(this.form.display, '6')"></TD><TD ALIGN="center"><INPUT TYPE="button" VALUE=" x " ONCLICK="addChar(this.form.display, '*')"></TD></TR><TR><TD ALIGN="center"><INPUT TYPE="button" VALUE=" sqrt " ONCLICK="if (checkNum(this.form.display.value)) { sqrt(this.form) }"></TD><TD ALIGN="center"><INPUT TYPE="button" VALUE=" 1 " ONCLICK="addChar(this.form.display, '1')"></TD><TD ALIGN="center"><INPUT TYPE="button" VALUE=" 2 " ONCLICK="addChar(this.form.display, '2')"></TD><TD ALIGN="center"><INPUT TYPE="button" VALUE=" 3 " ONCLICK="addChar(this.form.display, '3')"></TD><TD ALIGN="center"><INPUT TYPE="button" VALUE=" - " ONCLICK="addChar(this.form.display, '-')"></TD></TR><TR><TD ALIGN="center"><INPUT TYPE="button" VALUE=" sq " ONCLICK="if (checkNum(this.form.display.value)) { square(this.form) }"></TD><TD ALIGN="center"><INPUT TYPE="button" VALUE=" 0 " ONCLICK="addChar(this.form.display, '0')"></TD><TD ALIGN="center"><INPUT TYPE="button" VALUE=" . " ONCLICK="addChar(this.form.display, '.')"></TD><TD ALIGN="center"><INPUT TYPE="button" VALUE=" +/- " ONCLICK="changeSign(this.form.display)"></TD><TD ALIGN="center"><INPUT TYPE="button" VALUE=" + " ONCLICK="addChar(this.form.display, '+')"></TD></TR><TR><TD ALIGN="center"><INPUT TYPE="button" VALUE=" ( " ONCLICK="addChar(this.form.display, '(')"></TD><TD ALIGN="center"><INPUT TYPE="button" VALUE="" ONCLICK="if (addChar(this.form.display.value)) { (this.form) }"></TD><TD ALIGN="center"><INPUT TYPE="button" VALUE=" sin" ONCLICK="if (checkNum(this.form.display.value)) { sin(this.form) }"></TD><TD ALIGN="center"><INPUT TYPE="button" VALUE=" tan" ONCLICK="if (checkNum(this.form.display.value)) { tan(this.form) }"></TD><TD ALIGN="center"><INPUT TYPE="button" VALUE=" ) " ONCLICK="addChar(this.form.display, ')')"></TD></TR><TR><TD ALIGN="center"><INPUT TYPE="button" VALUE="AC" ONCLICK="this.form.display.value = 0 "></TD><TD ALIGN="center" COLSPAN="3"><INPUT TYPE="button" VALUE="backspace" ONCLICK="deleteChar(this.form.display)"></TD><TD ALIGN="center"><INPUT TYPE="button" VALUE="=" NAME="enter" ONCLICK="if (checkNum(this.form.display.value)) { compute(this.form) }"></TD></TR></TABLE></FORM></BODY><FORM NAME="sci-calc"></html> excuse the on and off the the capitalization.

Link to post
Share on other sites

Thanks AndrewSmith. I tried your code and its working fine. But what i am expecting is not this. The above code what i have posted is now working fine for me. Now my problem is the above code, I am having only one textarea. But in the case of having more than one textarea means how i can modify the code, that thing i don't know. Please tell me how to do that.

Link to post
Share on other sites

Now i have done for more than one textarea. Still having one problem. By clicking the button the editor is opening. Now i want to do is, again by clicking the button i want to hide the symbols even if i have not selected anything from the editor. Please tell me what to modify for that.

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...