Examples of things that can be done with JavaScript

Add JavaScript to Prototype

  • In the OnPageLoad event of the page add Open link in current window.
  • In the URL enter:
javascript:
$.getScript('http://www.mysite.com/code.js', function() {
  alert('done');
});
void(0);

This alternative does not provide a callback when the javascript is ready to be used.

javascript:
$("head").append('<script type="text/javascript" src="http://www.mysite.com/code.js"></script>');
void(0);
javascript:
$("head").append('<script type="text/javascript">...</script>');
void(0);

Add Stylesheet to Prototype

  • In the OnPageLoad event of the page add Open link in current window.
  • In the URL enter:
javascript:
$("head").append('<link rel="stylesheet" type="text/css" href="http://www.mysite.com/style.css"><link/>');
void(0);
javascript: $("head").append('<style>...</style>');
void(0);

Add Webfont to Prototype

Adding a Webfont is supported by Axure 7, so this is not so relevant anymore.

  • In the OnPageLoad event of the page add Open link in current window.
  • In the URL enter:
javascript:
$("head").append('<style>@import url(http://fonts.googleapis.com/css?family=Roboto+Slab);<style/>');
void(0);

Pass mouse events to widgets below

Widgets with a “^” in their name forward mouse events to the widgets below them.

javascript:
$('[data-label*="^"]').css('pointer-events', 'none');
void(0);

Disable selection of html elements

Disable selection (only on new browsers):

javascript:
$('head').append('<style>*{-webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}<style/>');
void(0);

Create timer

Start the timer:

javascript:
window.myTimer = setInterval(function() {
  $axure('@name').moveBy(0, 0, {});
}, 1000);
;
void(0);

Stop the timer:

javascript:
window.myTimer = clearInterval(window.myTimer);
void(0);

Scroll a dynamic panel

javascript:
$('[data-label="PANEL"').scrollTop(0);
void(0);

Pass global variables to Java Script

javascript:
alert('[[VARIABLE]]');
void(0);
javascript: (function (){
var value = parseInt('[[VARIABLE]]');
alert('The value is ' + value);
})();

So far the best way I have found to pass values from JavaScript to Axure is to set the text of a widget to the value. In Axure the text on the widget can the be assigned to a variable.

1. “Open link in new window/tab”:

javascript:
$axure('@WIDGET').text('Hello');
void(0);

2. Set variable to text on widget:

Variable = text on widget WIDGET

CSS

$('[data-label="Input"] input').each(function () {
  var input = $(this);
  var text = input.val();
  if (text.match(/^\d{3}$/)) 
    input.css('color', '#333');
  else
    input.css('color', '#F00');
});

Allways show vertical scrollbar

$('body').css('overflow-y', 'scroll');

Other Examples

var style = '';
 
// Remove "x" from IE input fields
style += 'input[type=text]::-ms-clear {display: none;}';
 
// Change border on input fields
style += 'input[type=text] {padding-left: 2px; border: 1px solid #727272; border-radius: 0px;}';
 
// Change border on dropdown selectbox
style += 'select {border: 0px; border-radius: 0px; background-color:transparent;}';
 
// No border on input widgets
style += 'textarea, input, select { outline: none; }';
 
// No resizing of input fields
style += 'textarea {resize: none;}';
 
// Hide selection highlight
style += '* {-webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}'
 
// ?
style += ".label {white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}";
 
if (style != '') $('head').append('<style>' + style + '<style/>');