jsMath (Authors/2.x)

Changing the jsMath Button Attributes

By default, jsMath puts a small button at the lower right of the browser page that allows the user to bring up the jsMath control panel. This button stays in position even as the page scrolls or changes, so it is always readily available to the user. This may not be the best position for the jsMath button in your page layout, however, so you can control were this button is placed in several ways.

The first is to set the .jsM_button CSS style, which controls how the button appears. You do this using a command like

    <SCRIPT> jsMath = {styles: {'.jsMath_button': 'style-settings'}}; </SCRIPT>

just before loading jsMath.js. The default is equivalent to

    <SCRIPT>
      jsMath = {styles: {
        '.jsMath_button': 'position:fixed; bottom:1px; right:2px; background-color:white; '
                           + 'border: solid 1px #959595; margin:0px; padding: 0px 3px 1px 3px; '
                           + 'z-index:102; color:black; text-decoration:none; font-size:x-small; width:auto;'
      }};
    </SCRIPT>

If you want to move the button to a different corner, you will want to change the bottom and/or right settings. For example, to use the lower left corner, you might try "bottom: 1px, left:2px" instead.

If you want to make more serious changes to how the button looks or operates, you can override the jsMath function that creates it, as in the following:

    <SCRIPT>
      jsMath = {Controls: {
        Button: function () {
          your-code-here
        }
      }}
    </SCRIPT>

The default button function is

    Button: function () {
      var button = jsMath.Setup.TopHTML("jsMath",{'class':'jsM_button'},{});
      button.innerHTML = 
        '<A HREF="javascript:jsMath.Controls.Panel()" ' +
           'STYLE="text-decoration:inherit; color:inherit">' +
        '<SPAN TITLE="Open jsMath Control Panel">jsMath</SPAN></A>'
      if (!this.cookie.button) {button.style.display = "none"}
    }

Changing the Control Panel Attributes

The placement and rendering of the control panel itself are also customizable via the .jsM_panel CSS style. The default is equaivalent to:

    <SCRIPT>
      jsMath = {styles: {
        '.jsM_panel':  'position:fixed; bottom:1.5em; right:1.5em; padding: 10px 20px; '
                         + 'background-color:#DDDDDD; border: outset 2px; z-index:103; width:auto;',
      }};
    </SCRIPT>

You can change the location of the panel by changing the bottom and right attributes, for example. If you move the jsMath button to a different corner, it may be appropriate to move the panel to the corresponding corner.

jsMath web pages Created: 10 Jul 2005 Last modified: 02 Dec 2005 12:58:50 Comments to: dpvc@union.edu

Changing the jsMath Button-Click Attributes Information for jsMath v2.x Authors Changing Font Sizes or Other Attributes