How to position a symbol rendered by MathJax ?

ause...@gmail.com

unread,

Jul 25, 2016, 1:50:31 AM7/25/16

to MathJax Users

Here is the code that I'm working with. I want to be able to position the symbol within a HTML box using JQuery. Any help would be appreciated. I also need to be able to be able to change the size of the rendered and position symbol by using the following .css("font-size","75%")

<!DOCTYPE HTML>
<html>
<head>

<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script>

function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {

    ev.dataTransfer.setData("text", ev.target.id);
}

//ev.target.id this gives us the id of the symbol being dragged

function drop(ev) {

    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");

    //ev.target.appendChild(document.getElementById(data));

    switch(data)
    {
           case("drag1"):

             $('#second').append('$$\\sum$$');
             break;

       case("drag2"):

         $('#second').append('$$\\int$$');
             break;

           case("drag3"):

         $('#second').append('$$\\alpha$$');
             break;

           case("drag4"):

         //$('#second').css("font-size","150%");
             $('#second').append('$$\\beta$$').css("font-size","150%");
             break;

            case("drag5"):

             $('#second').append('$${du}$$');
             break;

            case("drag6"):

             $('#second').append('$${dt}$$');
             break;

            case("drag7"):

             $('#second').append('$${t}$$');
             break;

           case("drag8"):

              //$('#second').append('$$\\beta$$').css("font-size","150%");
              $('#second').append('$${t}^x\sqrt{t}^x$$');
              $('#container').append('<div id="third" ondrop="drop(event)" ondragover="allowDrop(event)"></div>');
              $('#third').append('$${t}^x\sqrt{t}^x$$').css("font-size","75%"); // works
          //$('#third').append('$${t}^x\sqrt{t}^x$$').css( { position: 'relative', zIndex:1000, left: 10px} ); //not working

              //$('#third').append('<label>Filename:</label> <input type="text" name="file" id="file" />');

              break;

           default:
        }
        MathJax.Hub.Queue(["Typeset",MathJax.Hub,"second"]);
        MathJax.Hub.Queue(["Typeset",MathJax.Hub,"third"]);

}
</script>

<style>

#header {
    width: 100%;
    background-color: white;
    height: 30px;
}

#container {
    width: 600px;
    height:1500px
    background-color: #ffffff;
    margin: auto;
}
#first {
    width: 100px;
    border: 2px solid black;
    float: left;
    height: 400px;

}
#second {
    width: 300px;
    border: 2px solid black;
    top:0;
    float: right;
    height: 100px;

}

#third {

    position: absolute;
    top: 180px;
    border: 2px solid black;
    right:430px;
    width: 200px;
    height: 100px;

}

#third .power1{

width: 20px;
height: 10px;
float: left;
border: 2px solid black;
}

#clear {
    clear: both;
}

</style>

</head>
<body>

<div id="header"></div>
<div id="container">
    <div id="first">
    <span id="drag1" style="text-decoration:overline;" draggable="true" ondragstart="drag(event)" >$$\sum$$</span>
    <span id="drag2" style="text-decoration:overline;" draggable="true" ondragstart="drag(event)" >$$\int$$</span>
    <span id="drag3" style="text-decoration:overline;" draggable="true" ondragstart="drag(event)" >$$\alpha$$</span>
    <span id="drag4" style="text-decoration:overline;" draggable="true" ondragstart="drag(event)" >$$\beta$$</span>
    <span id="drag5" style="text-decoration:overline;" draggable="true" ondragstart="drag(event)" >$${du}$$</span>
    <span id="drag6" style="text-decoration:overline;" draggable="true" ondragstart="drag(event)" >$${dt}$$</span>
    <span id="drag7" style="text-decoration:overline;" draggable="true" ondragstart="drag(event)" >$${t}$$</span>
    <span id="drag8" style="text-decoration:overline;" draggable="true" ondragstart="drag(event)" >$${t}^x\sqrt{t}^x$$</span>

    </div>
    <div id="second" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    <div id="clear"></div>
</div>

</body>
</html>

Davide Cervone

unread,

Jul 25, 2016, 10:56:04 AM7/25/16

to mathja...@googlegroups.com

You need to put quotation marks around your 10px in

$('#third').append('$${t}^x\sqrt{t}^x$$').css( { position: 'relative', zIndex:1000, left: 10px} );

Also, you will probably want to double the backslashes in your math, since the backslash is an escape character in javascript strings, as in '$${t}^x\\sqrt{t}^x$$’.

Finally, note that the problems you have been having are not MathJax problems, but general javascript problems. We are able to help you with problems that are actually MathJax related, but do not have the resources to do general programming assistance like this.

Davide

--
You received this message because you are subscribed to the Google Groups "MathJax Users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to mathjax-user...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Message has been deleted

ause...@gmail.com

unread,

Jul 26, 2016, 11:59:24 PM7/26/16

to MathJax Users

Hi Dr. Cervone.

Thank you for the response. Can I ask one question about MathJax rendered symbols. Can they be treated exactly the same as any other HTML element like a input text box or a HTML link or HTML menu items and so on ? So basically the MathJax are basically HTML elements and have properties such as position and font size and so on ? The reason I am asking is that I could not get the posted code to work..

Davide Cervone

unread,

Jul 27, 2016, 3:50:33 PM7/27/16

to mathja...@googlegroups.com

> Can I ask one question about MathJax rendered symbols. Can they be treated exactly the same as any other HTML element like a input text box or a HTML link or HTML menu items and so on ? So basically the MathJax are basically HTML elements and have properties such as position and font size and so on ?

You should not apply css directly to MathJax output, but you can use a container element and style that. When you append plain text to an element, I assume that jQuery appends a text node (I don’t use jQuery myself, so don’t have much experience with it). Text nodes don’t accept CSS styling directly (the style of the parent element is what applies to text nodes), so I’m not sure what the jQuery .css() function will do in this case. Presumably it styles the parent? Or perhaps it is ignored. You will probably get better results by asking a jQuery forum rather than the MathJax forum about such issues.

Davide

Reply all

Reply to author

Forward