Skip to content

Getting the height of a div after typesetting some math in the div

Jump to bottom Edit New page
Davide P. Cervone edited this page May 26, 2013 · 3 revisions

So, I need exactly that you wrote as second way, i.e. to put MathML code equation inside a <div> container, to let the math typesetting by MathJax, to get a new <div>'s height with equation completly done (typeseted) and then use the getted value for my script purposes. How can I do it?)))

Probably the best idea is to wrap the math expression in a separate <div> with an ID attribute, then get the clientHeight of that <div> after the math has been typeset. In order to make sure you don't try to get the height until after the math is typeset, you should push the code that uses the clientHeight onto the MathJax processing queue. Consider, for example, the following test HTML page:

<!doctype html>
<html>
<head>
<script type="text/javascript"
  src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>
<script type="text/javascript">
MathJax.Hub.Queue(function () {
  document.getElementById("myresultdiv").innerHTML =
      "math div height: "+document.getElementById("mymathdiv").clientHeight+" pixels";
});
</script>
</head>
<body>
<div id="mymathdiv">\[\sum_{n=1}^\infty\frac1{n^2}=\frac{\pi^2}6\]</div><br/>
<div id="myresultdiv"></div>
</body>
</html>

For me, this page displays "math div height: 71 pixels" (actually the clientHeight of the enclosing "mymathdiv"). Other browsers may give somewhat different results, though. I hope this helps.

Thank you very-very much for your answer and attention, I very appreciate it, but, unfortunately I've a little bit more complicated situation....

Actually, my script loads page information via xml and then positions it block-by-block on the page, on the screen. Some blocks may contains equation, some not. After all blocks will be position at their places, script define whole page height by calculating sum of heights of some blocks. Then it draws <canvas> element that using as background and have this height. I used Firefox with its native MathML capability, and to define actual height of each block is no problem just by calling .clientHeight property. It works certainly and immediatly. Now, I need that this function works everywhere. And MathJax processes equations after all scripts done, and does it in background mode, is this because I need to use queue for execute height define code? So, may be there is any function that can define height inside script, like .clientHeight does it, is there? Or typesets equation like "normal" function without queue?

I still think the .clientHeight approach is going to be the right way for you to go -- but you need to use the MathJax queue for more of your tasks. The dimensions of the background <canvas> element depend on the accumulated heights of all of the math elements in the page, right? So drawing the background <canvas> can't happen until after all of the .clientHeight's of the math elements have been determined by the typesetting routines. Only after the typesetting has completed will the .clientHeight's give you the values you need to determine the dimensions of the <canvas>. That means that you need to put the drawing routines for the <canvas> onto the MathJax queue, too, in order to be sure that they wait for the .clientHeight information to become available. If you launch the <canvas> drawing routines before typesetting has completed, all of the .clientHeight's of <div>'s enclosing math expressions will give a value of 0, and the <canvas> will be drawn too short on your page.

Ok. Now, I think I know what to do, how to correct my script. And I'd like to thank-you for your courtesy and every word you wrote to help me. You really helped me to resolve my doubts. Thank's a lot.

Add a custom sidebar
Clone this wiki locally