The following are example JavaScript snippets that can be used to customize the user web tools interface. Functions from the JavaScript library JQuery are used in many of the examples below. Documentation on the JQuery site may assist with additional customization.

The snippets below are best placed in the footer.inc file for user web tools customization. See the article Customizing the User Web Tools interface for more details.

Moving logged-in-as into the header

Moves the section that shows the currently logged in user from the footer to the header. This example will place the 'logged in as' div element after an element with the id 'header-logo' (this ID will not exist by default and must be created in a custom header.inc file).

<script type="text/javascript">
  $(function() {
    $('div#logged-in-as').remove().insertAfter('#header-logo');
  });
</script>

Adding an extra navigation menu item

<script type="text/javascript">
  $(function() {
    $('div#nav ul').append('<li><a href="/help">Help</a></li>');
  });
</script>

Change the label of a navigation menu item

<script type="text/javascript">
  $(function() {
    $('a#linkUserTopUpCards').text('Activate Card');
  });
</script>

Adding text to a page

<script type="text/javascript">
  $(function() {
    if ($('div#main h1').text() == 'Transfers') {
      $('div#main h1').after("<p>Enter the receiving user's login name in 'Transfer to user'.</p>");
    }
  });
</script>

Hiding data table columns

<script type="text/javascript">
  $(function() {
    $('th.accountNameColumnHeader').hide();
    $('td.accountNameColumnValue').hide();
    $('th.printerDisplayNameColumnHeader').hide();
    $('td.printerDisplayNameColumnValue').hide();
  });
</script>

Removing user balance and the balance graph

<script type="text/javascript">
  $(function() {
    // check that we're on the Summary page
    if ($('div#main h1:eq(0)').text() == 'Summary') {
      // hide the current balance display (blanks out the second row in the table)
      $('table.userDataTable tbody tr:eq(1) th').text("");
      $('table.userDataTable tbody tr:eq(1) td').text("");

      // remove the activity heading and balance graph (hides the second heading and following section on the page)
      $('div#main h1:eq(1)').next().hide();
      $('div#main h1:eq(1)').hide();
    }
  });
</script>

Replacing 'Balance' with 'MB Remaining'

Changes the displayed balance on the Summary page into a displayed 'MB Remaining'. Uses a specified cost per MB to perform the calculation.

<script type="text/javascript">
  $(function() {
    var costPerMB = 0.20;
    var balance = $('table.userDataTable tbody tr:eq(1) td').text().substring(2);
    var mb = balance / costPerMB;

    // change heading
    $('table.userDataTable tbody tr:eq(1) th').text("MB Remaining");
    // change value
    $('table.userDataTable tbody tr:eq(1) td').text(mb + " MB");
  });
</script>