MathJax Equation Demo

by navyflower

HTML

<script src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML&amp;dummy=.js"></script>
<script type="text/x-mathjax-config"> 

</script>

<div id="mydiv-1">
<p>This is an equation: $\cssId{gflmathcontainer-1}{x = \dfrac {-b \pm \sqrt{b^2-\cssId{gfltextbox-1}{\;\;4ac\;\;}} }{2a}}$ . End of equation.</p>
</div>
<div id="mydiv-2">
<p>Another equation: $\cssId{gflmathcontainer-2}{x = \dfrac {-b \pm \sqrt{b^2-4ac} }{\cssId{gfltextbox-2}{2a}}}$ . End of equation.</p>

</div>
<div id="gflmathinput-1" class="hidden"><input type="text" name="fname1"></div>
<div id="gflmathinput-2" class="hidden"><input type="text" name="fname2"></div>

CSS

#gflmathinput-1 {
    width: 0.9em;
    height: 0.9em;
    background: blue;
    position: absolute;
    top:0;
    left:0;
    z-index: 1;
}
#gflmathinput-1 input {
    max-width: 100%;
    text-align: center;
}
#gflmathinput-1.hidden {
    display: none;
}
#mydiv-1, #mydiv-2 {
    font-family: Verdana;
    font-size: 18px;
    margin: 40px;
    padding: 10px;
    border: 1px solid lightgreen;
}

JavaScript

$( document ).ready(function() {
    MathJax.Hub.Config({   
        tex2jax: {
            inlineMath: [['$','$'], ['\\(','\\)']]
        },
        skipStartupTypeset: true
    }); 
    MathJax.Hub.Config({ scale: 0.9  });
    MathJax.Hub.Queue(//["Typeset",MathJax.Hub]);
        ["setRenderer",MathJax.Hub,"HTML-CSS"], 
        ["Typeset",MathJax.Hub,"mydiv-1"], 
        ["setRenderer",MathJax.Hub,"SVG"], 
        ["Typeset",MathJax.Hub] 
    )
    MathJax.Hub.Queue(myfunction);
});


function myfunction() {
    //debugger;
    var container = $('#gflmathcontainer-1')[0].offsetParent;
    var $element = $("#gfltextbox-1");
    var pos_inner = findPos($element[0]);
    var pos_outer = findPos(container);
    var diffLeft = pos_inner[0] - pos_outer[0];
    var diffTop = pos_inner[1] - pos_outer[1];
    $(container).prepend($('#gflmathinput-1'));
    $('#gflmathinput-1').css('left', diffLeft + 'px').css('top', diffTop + 'px');
    $('#gflmathinput-1').width($element.width()).height($element.height());
    $('#gflmathinput-1').removeClass('hidden');

}
function findPos(obj) {
	var curleft = 0;
    var curtop = 0;
    if (obj.offsetParent) {
        do {
			curleft += obj.offsetLeft;
			curtop += obj.offsetTop;
        } while (obj = obj.offsetParent);
    }
    return [curleft,curtop];
}