jsMath (Authors)

Changing the jsMath Button-Click Attributes

JsMath responds to clicking on typeset equations in two different ways: if you ALT-click on an equation, it opens the jsMath Control Panel, and if you double-click on an equation, jsMath displays the TeX source used to generate the typeset equation. You can override either of these functions with your own, and can control the appearance of the TeX-source panel to suit your needs.

To change the actions taken by clicking or double-clicking on the mathematics, replace the jsMath.Click.CheckClick or jsMath.Click.CheckDblClick routines (see the documentation in replacing jsMath routines with your own for more details). The CheckClick routine is called whenever there is a click on the mathematics, so if you want to check for ALT-clicks, use something like

    <SCRIPT>
      jsMath = {Click: {
        CheckClick: function (event) {
          if (!event) {event = window.event}
          if (event.altKey) {
            your code here
          }
        }
      }};
    </SCRIPT>

If you replace CheckDblClick, it should return false to prevent the double-click from being further processed by the browser. If you wish to disable either behavior, you can do so by specifying a blank function. For example,

    <SCRIPT>
      jsMath = {Click: {CheckDblClick: function (event) {}}};
    </SCRIPT>

will disable double-clicking, so this will no longer bring up the TeX source window.

You can control the look of the TeX-source window using the following styles:

    <SCRIPT>
      jsMath = {Click: {styles: {
        '#jsMath_float':          {style-settings},
        '#jsMath_float .drag':    {style-settings},
        '#jsMath_float .close':   {style-settings},
        '#jsMath_float .source':  {style-settings}
      }};
    </SCRIPT>

where style-settings are lists of key-value pairs indicating the style settings ou wish to override. The first controls the floating window itself (you probably shouldn't modify this unless you are very careful). The next two control the look of the drag bar and the close box within it, while the final one controls the container for the TeX source itself. The default values are:

    <SCRIPT>
      jsMath = {Click: styles: {
        '#jsMath_float': {
           position: 'absolute', top: '0px', left: '0px', 'z-index': '101',
          'max-width': '80%', width: 'auto', height: 'auto',
           padding: '0px', margin: '0px', 'font-size': '100%'
        },
        '#jsMath_float .drag': {
          'background-color': '#DDDDDD',
           border: 'outset 1px', padding: '0px', margin: '0px',
           width: 'auto', height: '12px', 'font-size': '1px'
        },
        '#jsMath_float .close': {
          'background-color': '#E6E6E6',
           border: 'inset 1px', margin: '1px 2px', padding: '0px',
           width: '8px', height: '8px'
        },
        '#jsMath_float .source': {
          'background-color': '#E2E2E2',
           border: 'outset 1px', margin: '0px', padding: '8px 15px',
           width: 'auto', height: 'auto',
          'font-family': 'courier, fixed', 'font-size': '90%'
        }
      }};
    </SCRIPT>

You can adjust the color, size, font, border, and so on. If you specify a width for the source window, it may be reduced in order to fit on the window in some circumstances.

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

Changing Other jsMath Attributes Browser Support for jsMath Information for jsMath Authors Changing the jsMath Button Attributes