Mathjax not working in glossary popups

Mathjax not working in glossary popups

by Catherine Berry -
Number of replies: 9

Hi, I am using Moodle 2.4. I use Mathjax by having additional HTML in the 'Additional HTML to be added to every page' within HEAD, as follows

<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
MathJax.Hub.Config({
   tex2jax: {
     inlineMath: [ ['$$','$$'], ['@i','@i'], ["\\(","\\)"] ],
     displayMath:[ ["\\(","\\)"], ['@d','@d'] ],
     processEscapes: true
   }
 });
</script>

It renders fine in quizzes and glossaries - but not in the popups that appear from glossary links. I assume this is because the popups don't have headers in the same way that pages do. Can anyone suggest a solution to this? Is there somewhere else in the Moodle code I can put the extra HTML so that it gets applied to popups?

Many thanks
Average of ratings: -
In reply to Catherine Berry

Re: Mathjax not working in glossary popups

by Daniel Thies -
Picture of Core developers Picture of Plugin developers Picture of Testers

This is not a problem with MathJax being loaded, but instead a synchronization issue. The popup loads its content with your mathematics when the link is clicked. This is normally after MathJax has already typeset the whole page. It needs to be told to reprocess it once again after the popup has loaded.

I was able to get it to work by editing moodle/filter/glossary/yui/build/moodle-filter_glossary-autolinker/moodle-filter_glossary-autolinker.js  and adding the statement

MathJax.Hub.Queue(['Typeset',MathJax.Hub]);

before the line

return true;

After that copy it to the corresponding -min.js file and purge all caches in the admin panel of Moodle. If it works for you, the file should be minified on a production site.

 Alternatively you could use the TeX filter where you are using autolinking.  It seems to run on popups with out any problems.

 

 

Average of ratings: Useful (3)
In reply to Daniel Thies

Re: Mathjax not working in glossary popups

by Mauno Korpelainen -

Thank You Daniel!

In minified file "return true" seems to be "return!0" so I tried adding MathJax.Hub.Queue(['Typeset',MathJax.Hub]); to minified file before "return!0" and it worked too.

There is still a tiny problem with popup z-index and MathJax right-click (in mac control click)-MathMenu that goes behind the popup but it's a not a major issue...

example

 

Average of ratings: Useful (1)
In reply to Mauno Korpelainen

Re: Mathjax not working in glossary popups

by Mauno Korpelainen -

Glossary popups are using z-index 600 so adding to Additional HTML after MathJax.Hub.Config code ( inside <script type="text/x-mathjax-config"> ... </script> )

 MathJax.Hub.Register.StartupHook("MathMenu Ready",function () {
          MathJax.Menu.BGSTYLE["z-index"] = 1000;
        });

gives MathMenu z-index 1000 and popup window goes under MathMenu.

This is not yet perfect solution because Additional HTML can have other scripts and yui based glossary popups may have problems with applets etc.

Average of ratings: Useful (1)
In reply to Mauno Korpelainen

Re: Mathjax not working in glossary popups

by Daniel Thies -
Picture of Core developers Picture of Plugin developers Picture of Testers

Mauno,I tried adding this, and it did open the menu on top with a right-click. However, it did not capture the click when I tried to select an option. I tried both Firefox and Chrome. Are you able to use the select all options successfully?

Average of ratings: -
In reply to Daniel Thies

Re: Mathjax not working in glossary popups

by Mauno Korpelainen -

Daniel, you are right again.

I tried another option, removed that MathMenu code from additional HTML  and added to my test theme (Essential) css

.moodle-dialogue-base .moodle-dialogue {
    z-index: 195;
}

to make popup z-index lower than MathJax menu z-index and it was more functional. The z-index for moodle-dialog is set in base theme core.css for those themes that use base theme as a parent theme, in theme\bootstrapbase\less\moodle\core.less for those themes that use bootstrap and some custom themes may have other values in their custom css files. Value there is 600 with a note

/* Override the z-index set incorrectly by the YUI dialogue */

so I am not sure if setting z-index of dialog popup lower than 200 (MathMenu value) could cause some trouble elsewhere but on my test site this seems to work ok now.

In themes like Essential custom css can be added in (general) settings of theme in Administration menu and you see the change immediately - in such themes that do not have settings for custom css you can add custom css to the end of some theme css file theme/custom theme/style/custom css file... and you need to purge all caches from administration menu to see the change.

Average of ratings: Useful (1)
In reply to Daniel Thies

Re: Mathjax not working in glossary popups

by Catherine Berry -

Thank you very much Daniel!

I am using Moodle 2.4 and the file path is filter/glossary/yui/autolinker.js. There doesn't seem to be a corresponding -min.js file, but just making the change in autolinker.js has worked for me.

Average of ratings: -
In reply to Daniel Thies

Re: Mathjax not working in glossary popups

by Jens Bilgrav -

Hi Daniel,

Thanks a million - this worked in Moodle 2.6 as well.

Cheers,

Jens

Average of ratings: -
In reply to Jens Bilgrav

Odp: Re: Mathjax not working in glossary popups

by Agnieszka Herczak-Ciara -
Hello,

This problem also occurs in the quiz (Moodle 2.7.2+), when teacher select Full screen pop-up with some Java Script security  in browser security options. Is there  a solution similar to that described above? Which files in the quiz module we need to modify?

Kindest regards,
Agnes

Average of ratings: -
In reply to Agnieszka Herczak-Ciara

Odp: Re: Mathjax not working in glossary popups

by Agnieszka Herczak-Ciara -

I discovered that the problem is not with the Moodle engine.  The error is in the layout.  Sorry for my unnecessary entry.

Average of ratings: -