Conditional MathJax logo on web pages

From https://groups.google.com/d/msg/mathjax-users/HW9vhUAhC_4/DuA-_zlS2uMJ

---

So I'm loving MathJax and using it in lots of places, and I love to tell people about it.

One way I advertise it is by having that little "Powered by MathJax" sticker on web pages and wikis I'm running where I use it.

Here's a question, whose answer is probably more about javascript programming or fancy CSS than directly MathJax: is there any way I can have that PbMJ sticker appear on a web page conditionally? So it should only appear if indeed MathJax was used to render something on that page; otherwise not. See what I mean?

If I had a bit of canned code like this, I would start simply to include it on all my web pages, wikis, blogs, etc., and it would come out and acknowledge MJ every time it was appropriate to do so!

Any ideas?

Thanks!

---

Well, I suspect that if you include the image but mark it display:none you could use javascript to change the display to visible if window.MathJax is defined (i.e., if you have included MathJax in the page). Something like

<span id="MathJax-Badge" style="display:none"> 
<a href="http://www.mathjax.org/"> 
  <img title="Powered by MathJax" src="http://www.mathjax.org/badge.gif" border="0" alt="Powered by MathJax" />
</a> 
</span> 
<script type="text/javascript"> 
  if (window.MathJax) {document.getElementById("MathJax-Badge").style.display = ""} 
</script> 

should work (this is untested, but is the right idea). If you include MathJax on every page and only want to show the badge on pages that include math, you could add

<script type="text/x-mathjax-config"> 
MathJax.Hub.Queue(function () { 
  if (MathJax.Hub.getAllJax().length) { 
    document.getElementById("MathJax-Badge").style.display = ""; 
  } 
}); 
</script> 

before the script that loads MathJax.js. This checks to see if there is any math on the page (after MathJax typesets it), and displays the badge only when there is.

If you want the badge to take up the room that it normally does but just not be shown, use visibility:hidden instead of display:none.

Hope that fits the bill.

Davide