Victor Mehta - 1 year ago 49
Javascript Question

# How do you position a MathJax element within a box using JQuery?

I'm trying to position a MathJax element within a box. I have tried several different methods but none work. The box itself gets positioned but I want the element that is appended to the box to be positioned within the same box (#third). The code so far actually moves the entire third box not the element that is being appended to the third box. Here is the Javascript/JQuery code. The complete code can be viewed at the following link: MathJax Code

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%"); //var$sqrtEqElement = $('#third').append('$${t}^x\\sqrt{t}^x$$').css("font-size","100%"); //var$sqrtEqElement = document.createElement("$${t}^x\\sqrt{t}^x$$");
//$('#sqrtEqElement').parent().css({position: 'absolute'}); //$('#sqrtEqElement').css( { position: 'absolute', top: 0, left: 0} );

$('#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( { position: 'absolute', top: 10, left: 100} ); //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"]);


}

Answer Source

Have you tried the following :

  var text = '<span style="position:absolute; top: 10px; left: 100px;">$${t}^x\\sqrt{t}^x$$</span>';
\$('#third').append(text);