jsMath (Authors)

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 #jsMath_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, where style-settings is a list of key-value pairs indicating the style settings to override. 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',
           cursor:     'hand'
        }
      }};
    </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', right: null} instead. [Note, however, that MSIE (in quirks mode) has to use a hack to make the jsMath button stay in place (since it does not handle the position:fixed CSS attribute), and this hack does not respect the CSS settings for the button. That means MSIE will always put the jsMath button in the lower right. This may be fixed in a future release.]

To remove the button entirely, use

    <SCRIPT> jsMath = {styles: {'#jsMath_button': {display: 'none'}}} </SCRIPT>

before loading jsMath.js. If you also want to prevent the user from being able to open the control panel by ALT-clicking the mathematics, use

    <SCRIPT>
      jsMath = {
        styles: {'#jsMath_button': {display: 'none'}},
        Click: {CheckClick: function () {}}
      };
    </SCRIPT>

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.DIV("button",{});
      button.title = ' Open jsMath Control Panel ';
      button.innerHTML = 
        '<span onclick="jsMath.Controls.Panel()">jsMath</span>';
      if (!jsMath.Global.isLocal && !jsMath.noShowGlobal) {
        button.innerHTML +=
          '<span id="jsMath_global" title=" Open jsMath Global Panel " '
            + 'onclick="jsMath.Global.Show(1)">Global </span>';
      }
      if (button.offsetWidth < 30) {button.style.width = "auto"}
      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 #jsMath_panel CSS style. The default is equivalent to:

    <SCRIPT>
      jsMath = {styles: {
        '#jsMath_panel': {
           position:    'fixed',
           bottom:      '1.5em',
           right:       '1.5em',
           padding:     '.8em 1.6em',
          'background-color': '#DDDDDD',
           border:      'outset 2px',
          'z-index':    '103',
           width:       'auto',
           color:       'black',
          'font-size':  '10pt',
          'font-style': 'normal'
        }
      }};
    </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.

If you are using CSS styles that affect the contents of the control panel, you may want to adjust the styles to make sure the control panel looks as expected. For example, if you change the font size on the page, you might need to adjust the fonts used by the control panel. One way to do this is to include

    <STYLE>
      #jsMath_panel td,
      #jsMath_panel input,
      #jsMath_panel select {font-size: 75%}
      #jsMath_panel {font-size: 85%; bottom: 2.5em}
    </STYLE>

in your page. (You can also do this by adding the appropriate styles to the jsMath variable as shown above.) These definitions reduce the size of the fonts used in the control panel. You can also adjust the colors, spacing, and so on in a similar way. The padding attribute of the #jsMath_panel style can also be adjusted if the spacing around the panel is too large. In addition, the "#jsMath_panel .disabled" class tells how to render the text of disabled options, while "#jsMath_panel .infoLink" class controls the rendering of the informational links at the left on the main control panel.

Changing the Message Window Attributes

The message panel that jsMath uses for its progress messages is controlled by the #jsMath_message style. The default is equivalent to

    <SCRIPT>
      jsMath = {styles: {
        '#jsMath_message': {
           position:   'fixed',
           bottom:     '1px',
           left:       '2px',
          'background-color': '#E6E6E6',
           border:     'solid 1px #959595',
           margin:     '0px',
           padding:    '1px 8px',
          'z-index':   '102',
           color:      'black',
          'font-size': 'small',
           width:      'auto'
        }
      }};
    </SCRIPT>

As with the main control panel, you can adjust the position, the font size and color, and so on.

Note that since MSIE on the PC does not support the position:fixed setting, jsMath automatically converts this to position:absolute, so the message box will not stay in place when teh screen is scrolled in MSIE.

jsMath web pages Created: 10 Jul 2005 Last modified: 13 Sep 2008 09:20:13 Comments to: dpvc@union.edu

Changing the jsMath Button-Click Attributes Browser Support for jsMath Information for jsMath Authors Changing Font Sizes or Other Attributes