CODEWITHSUNDEEP
jquerymathml
Frank Vel
Frank Vel

Reputation: 1208

Update when MathML is loaded

For some reason MathML isn't getting the .css() update, and I was wondering if there's a way to check when the MathML is loaded so this can be updated?

http://jsfiddle.net/njz7xaek/

The code shows the problem; the MathML-code isn't updated and stays red, whereas it should become blue, just as the text sample.

HTML

<span class="col1">text</span>
<br />
<math>
  <mi class="col1">a</mi>
  <mi>x</mi>
  <mo>+</mo>
  <mi class="col1">b</mi>
</math>

CSS

.col1 {
  color:red;
}

JS

$(document).ready(function() {
  $('.col1').css('color', 'blue');
});

Is there a way to make the .css() function trigger after the MathML has loaded, so it can change it as well? It seems to me that .css() happens before this, so MathML isn't affected by it. I was hoping for a simple solution like

$(MathML).ready(function() {
  $('.col1').css('color', 'blue');
});

But this didn't seem to work...

Upvotes: 1

Views: 97

Answers (1)

apokryfos
apokryfos

Reputation: 40653

It doesn't seem that the <mi> element has any inline style definition associated with it, for example if you do $("mi")[0].style you'd get an undefined error.

There's a messy workaround for this by doing something like:

var nStyle = $('<style>.col1 { color: blue; }</style>');

$("html > head").append(nStyle);

This will create a "global" style tag and append it to the head.

Example at: http://jsfiddle.net/njz7xaek/5/ (needs Firefox)

Upvotes: 2

Related Questions