conditional MathJax logo on web pages -- coding help?

27 views
Skip to first unread message

Jonathan Poritz

unread,
Jul 1, 2012, 3:57:15 PM7/1/12
to mathja...@googlegroups.com
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!

Jonathan

Davide P. Cervone

unread,
Jul 4, 2012, 5:56:33 PM7/4/12
to mathja...@googlegroups.com
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 do

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

which 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
Reply all
Reply to author
Forward
0 new messages