[HOME] jsMath (Authors/2.x) [Prev][Top][Up][Next]

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

      jsMath = {Click: {
        CheckClick: function (event) {
          if (!event) {event = window.event}
          if (event.altKey) {
            your code here
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,
      jsMath = {Click: {CheckDblClick: function (event) {}}};
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:

      jsMath = {styles: {
        '.jsMath_source': 'style-settings',
        '.jsMath_drag':   'style-settings',
        '.jsMath_close':  'style-settings',
        '.jsMath_float':  'style-settings',
The first controls the container for the TeX source itself, the second specifies the look of the drag bar, the third the look of the close box, and the fourth the floating window itself. You probably should not modify the latter unless you are very careful. The default values are:
      jsMath = {styles: {
        '.jsM_source': 'background-color:#E2E2E2; border: outset 1px; '
                         + 'width:auto; height:auto; padding: 8px 15px; '
                         + 'font-family: courier, fixed; font-size: 90%',
        '.jsM_drag':   'background-color:#DDDDDD; border: outset 1px; '
                         + 'height:12px; font-size:1px;',
        '.jsM_close':  'background-color:#E6E6E6; border: inset 1px; '
                         + 'width:8px; height:8px; margin: 1px 2px;',
        '.jsM_float':  'position:absolute; top:0px; left:0px; max-width:80%; '
                         + 'z-index:101; width:auto; height:auto;'
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.

Get jsMath at SourceForge.net. Fast, secure and Free Open Source software downloads [HOME] jsMath web pages
Created: 10 Jul 2005
Last modified: 02 Dec 2005 12:59:07
Comments to: dpvc@union.edu
[Next] Changing Other jsMath Attributes
[Up] Information for jsMath v2.x Authors
[Prev] Changing the jsMath Button Attributes