Documentation

HDLabel

The HDLabel object is used to display static text.

By setting the object's properties, either at design-time in Handheld Designer, or at run-time in code, you can:

  • Set the label's text with the value property.
  • Position and size the label with the top, left, width and height properties.
  • Adjust the way text is displayed in the label with the fontFamily, fontSize, textShadow, and lineHeight properties.
  • Define a border with the borderStyle, borderColor, borderWidth, and borderRadius properties.

Example:

// set the value of the label object
label1.value = "Label text";

For more detail, view the full object documentation on HandheldDesigner.com.

Object Properties & Methods

Background
 backgroundAttachmentDetermines whether the background scrolls with the page, or remains fixed.
 backgroundColorThe background color of the object.
 backgroundGradientThe background gradient of the object.
 backgroundImageThe background image of the object.
 backgroundPositionDetermines the starting position of the background image.
 backgroundRepeatSets how the background image will be repeated.
Borders
 borderBottomColorThe color of border on the bottom of the object.
 borderBottomStyleThe style of border on the bottom of the object (if any).
 borderBottomWidthThe width of the border on the bottom of the object, in pixels.
 borderColorThe color of the object's border.
 borderLeftColorThe color of border on the left edge of the object.
 borderLeftStyleThe style of border on the left edge of the object (if any).
 borderLeftWidthThe width of the border on the left edge of the object, in pixels.
 borderRadiusThe radius of the corners of the object's border, in pixels.
 borderRightColorThe color of border on the right edge of the object.
 borderRightStyleThe style of border on the right edge of the object (if any).
 borderRightWidthThe width of the border on the right edge of the object, in pixels.
 borderStyleThe style of border surrounding the object (if any).
 borderTopColorThe color of border on the top of the object.
 borderTopStyleThe style of border on the top of the object (if any).
 borderTopWidthThe width of the border on the top of the object, in pixels.
 borderWidthThe width of the object's border, in pixels.
 boxShadowDefines a shadow displayed behind the control.
 colorThe color of the object.
 domElementMethod that returns the HTML DOM element associated with the HD object
Events
 onClickEvent that occurs when the object is tapped/clicked.
 onTouchEndEvent that occurs at the end of a touch event.
 onTouchMoveEvent that occurs during a touch event when the touch point moves.
 onTouchStartEvent that occurs when the object is touched.
 focusManually assign user focus to the control
Font & Text
 fontFamilyThe font family used to render the text associated with object.
 fontSizeThe font size used to render the text associated with object.
 fontStyleThe font style used to render the text associated with object.
 fontWeightThe font weight used to render the text associated with object.
 letterSpacingIncrease or decrease the amount of space between characters.
 lineHeightIncrease or decrease the amount of space between lines of text.
 textAlignThe font style used to render the text associated with object.
 textShadowDefines a shadow displayed behind the text.
 heightThe height of the object, measured in pixels.
 idThe object's unique identifier. Also used as the variable name in code.
 leftThe location of the left of the object from the left edge of the page, measured in pixels.
 lockedLocks the object in the design view, preventing it from being moved accidentally.
 opacityA number between zero and one that determines the transparency of the object.
Padding
 paddingThe space between the object's border and its content
 paddingBottomThe space between the object's bottom border and its content
 paddingLeftThe space between the object's left border and its content
 paddingRightThe space between the object's right border and its content
 paddingTopThe space between the object's top border and its content
 removeRemove the object from the page
 styleClassA reference to an HDStyleClass object defining a set of shared visual properties to be applied to this object.
 topThe location of the top of the object, as measured from the top of the page, in pixels.
 userdataAn object for storing user data.
 valueThe text displayed by the label.
 visibleDetermines if the object is visible on the page.
 widthThe width of the object, measured in pixels.
 zIndexThe stack order of the object. Objects with higher numbers appear in front of objects with lower numbers.

backgroundAttachment

PropertyFirst available in version 1.0.0

Determines whether the background scrolls with the page, or remains fixed. Can have one of the following values:

"scroll" (or empty)Background scrolls with the page.
"fixed"Background is fixed and does not scroll with the page.

Example:

// Set the background to fixed and not scroll with the page.
object1.backgroundAttachment = "fixed"; 

backgroundColor

PropertyFirst available in version 1.0.0

The background color of the object. Colors can be specified as:

  • by name: "red", "blue", "green"
  • by hex format: "#c0c0a0"
  • by red/green/blue values: "rgb(12,34,56)"

Example:

// get the background color of object1
var c = object1.backgroundColor;

// set the color of object1 to grey
object1.backgroundColor = "grey"; 

backgroundGradient

PropertyFirst available in version 1.0.0

The background gradient of the object. Can set to a string, using the CSS3 linear gradient syntax.

The HDGradient class provides an easy way to construct gradients. In addition, the HDGradient class allows you to construct more complex gradients, including radial and repeating gradients.

Note: when setting a background gradient on an HDPage object, you almost certainly want to set the backgroundAttachment property to "fixed". Otherwise your gradient will probably not be displayed correctly.

Example:

// set the background gradient of object1
// using CSS3 linear gradient syntax:
o1.backgroundGradient = "90deg, #00ABEB, blue 50%, red";

// same gradient, using HDGradient:
var g = new HDGradient();
g.angle = "90";
g.addStop("#00ABEB");
g.addStop("blue", "50%");
g.addStop("red");
o1.backgroundGradient = g;

backgroundImage

PropertyFirst available in version 1.0.0

The background image of the object.

Example:

// set the background image of object1
object1.backgroundImage = "images/background-image-1.png"; 

backgroundPosition

PropertyFirst available in version 1.0.0

Determines the starting position of the background image. Can be specified using one of the following forms:

KeywordsA keyword specifying horizontal position (left/center/right) and one for vertical (top/center/bottom). For example: "left bottom".
PercentageHorizontal position, then vertical position, expressed as percentages. For example: "25% 50%".
PixelHorizontal position, then vertical position, expressed as number of pixels. For example: "30px 50px".

Example:

// Position the background centered on the page
object1.backgroundPosition = "center center"; 

backgroundRepeat

PropertyFirst available in version 1.0.0

Sets how the background image will be repeated. Can have one of the following values:

"repeat" (or empty)Repeated both vertically and horizontally.
"repeat-x"Repeated horizontally.
"repeat-y"Repeated vertically.
"no-repeat"Not repeated.

Example:

// Set the background to only repeat horizontally.
object1.backgroundRepeat = "repeat-x"; 

borderBottomColor

PropertyFirst available in version 1.0.0

The color of border on the bottom of the object. Colors can be specified as:

  • by name: "red", "blue", "green"
  • by hex format: "#c0c0a0"
  • by red/green/blue values: rgb(12,34,56)

Note: The property only has an effect if the object's borderBottomStyle property is set to a value other than "none".

Example:

// get the bottom border color of object1
var c = object1.borderBottomColor;

// set the bottom border color of object1 to grey
object1.borderBottomColor = "grey"; 

borderBottomStyle

PropertyFirst available in version 1.0.0

The style of border on the bottom edge of the object. Can have the following values:

"none" (or empty)No border
"dotted"Dotted border
"dashed"Dashed border
"solid"Solid border
"double"Double-line border
"groove"3D grooved border
"ridge"3D ridged border
"inset"3D inset border
"outset"3D outset border

Note: The property only has an effect if the object's borderBottomStyle property is set to a value other than "none".

Example:

// get the borderBottomStyle property of object1
var bs = object1.borderBottomStyle;

// Give object1 a solid, black, 2-pixel border on its bottom edge.
object1.borderBottomStyle = "solid";
object1.borderBottomColor = "black";
object1.borderBottomWidth = 2;

borderBottomWidth

PropertyFirst available in version 1.0.0

The width of the border on the bottom edge of the object, in pixels.

Note: The property only has an effect if the object's borderBottomStyle property is set to a value other than "none".

Example:

// get the borderBottomWidth property of object1
var w = object1.borderBottomWidth;

// Give object1 a solid, black, 2-pixel border on its top edge
object1.borderBottomStyle = "solid";
object1.borderBottomColor = "black";
object1.borderBottomWidth = 2;

borderColor

PropertyFirst available in version 1.0.0

The color of the object's border. Colors can be specified as:

  • by name: "red", "blue", "green"
  • by hex format: "#c0c0a0"
  • by red/green/blue values: "rgb(12,34,56)"

Note: The property only has an effect if the object's borderStyle property is set to a value other than "none".

Example:

// get the border color of object1
var c = object1.borderColor;

// set the border color of object1 to grey
object1.borderColor = "grey"; 

borderLeftColor

PropertyFirst available in version 1.0.0

The color of border on the left of the object. Colors can be specified as:

  • by name: "red", "blue", "green"
  • by hex format: "#c0c0a0"
  • by red/green/blue values: "rgb(12,34,56)"

Note: The property only has an effect if the object's borderLeftStyle property is set to a value other than "none".

Example:

// get the left border color of object1
var c = object1.borderLeftColor;

// set the left border color of object1 to grey
object1.borderLeftColor = "grey"; 

borderLeftStyle

PropertyFirst available in version 1.0.0

The style of border on the left edge of the object. Can have the following values:

"none" (or empty)No border
"dotted"Dotted border
"dashed"Dashed border
"solid"Solid border
"double"Double-line border
"groove"3D grooved border
"ridge"3D ridged border
"inset"3D inset border
"outset"3D outset border

Example:

// get the borderLeftStyle property of object1
var bs = object1.borderLeftStyle;

// Give object1 a solid, black, 2-pixel border on its left edge.
object1.borderLeftStyle = "solid";
object1.borderLeftColor = "black";
object1.borderLeftWidth = 2;

borderLeftWidth

PropertyFirst available in version 1.0.0

The width of the border on the left edge of the object, in pixels.

Note: The property only has an effect if the object's borderBottomStyle property is set to a value other than "none".

Example:

// get the borderLeftWidth property of object1
var w = object1.borderLeftWidth;

// Give object1 a solid, black, 2-pixel border on its top edge
object1.borderLeftStyle = "solid";
object1.borderLeftColor = "black";
object1.borderLeftWidth = 2;

borderRadius

PropertyFirst available in version 1.0.0

The radius of the corners of the object's border, in pixels. With the default value of blank/zero, the border with have square corners.

Note: The property only has an effect if the object's borderStyle property is set to a value other than "none".

Example:

// get the borderRadius property of object1
var r = object1.borderRadius;

// Give object1 a solid, black, 2-pixel border with rounded corners
object1.borderStyle = "solid";
object1.borderColor = "black";
object1.borderWidth = 2;
object1.borderRadius = 2;

borderRightColor

PropertyFirst available in version 1.0.0

The color of border on the right of the object. Colors can be specified as:

  • by name: "red", "blue", "green"
  • by hex format: "#c0c0a0"
  • by red/green/blue values: "rgb(12,34,56)"

Note: The property only has an effect if the object's borderRightStyle property is set to a value other than "none".

Example:

// get the right border color of object1
var c = object1.borderRightColor;

// set the right border color of object1 to grey
object1.borderRightColor = "grey"; 

borderRightStyle

PropertyFirst available in version 1.0.0

The style of border on the right edge of the object. Can have the following values:

"none" (or empty)No border
"dotted"Dotted border
"dashed"Dashed border
"solid"Solid border
"double"Double-line border
"groove"3D grooved border
"ridge"3D ridged border
"inset"3D inset border
"outset"3D outset border

Note: The property only has an effect if the object's borderRightStyle property is set to a value other than "none".

Example:

// get the borderRightStyle property of object1
var bs = object1.borderRightStyle;

// Give object1 a solid, black, 2-pixel border on its right edge.
object1.borderRightStyle = "solid";
object1.borderRightColor = "black";
object1.borderRightWidth = 2;

borderRightWidth

PropertyFirst available in version 1.0.0

The width of the border on the right edge of the object, in pixels.

Note: The property only has an effect if the object's borderRightStyle property is set to a value other than "none".

Example:

// get the borderRightWidth property of object1
var w = object1.borderRightWidth;

// Give object1 a solid, black, 2-pixel border on its top edge
object1.borderRightStyle = "solid";
object1.borderRightColor = "black";
object1.borderRightWidth = 2;

borderStyle

PropertyFirst available in version 1.0.0

The style of border surrounding the object. Can have the following values:

"none" (or empty)No border
"dotted"Dotted border
"dashed"Dashed border
"solid"Solid border
"double"Double-line border
"groove"3D grooved border
"ridge"3D ridged border
"inset"3D inset border
"outset"3D outset border

Example:

// get the borderStyle property of object1
var bs = object1.borderStyle;

// Give object1 a solid, black, 2-pixel border with rounded corners
object1.borderStyle = "solid";
object1.borderColor = "black";
object1.borderWidth = 2;
object1.borderRadius = 2;

borderTopColor

PropertyFirst available in version 1.0.0

The color of border on the top of the object. Colors can be specified as:

  • by name: "red", "blue", "green"
  • by hex format: "#c0c0a0"
  • by red/green/blue values: "rgb(12,34,56)"

Note: The property only has an effect if the object's borderTopStyle property is set to a value other than "none".

Example:

// get the top border color of object1
var c = object1.borderTopColor;

// set the top border color of object1 to grey
object1.borderTopColor = "grey"; 

borderTopStyle

PropertyFirst available in version 1.0.0

The style of border on the top edge of the object. Can have the following values:

"none" (or empty)No border
"dotted"Dotted border
"dashed"Dashed border
"solid"Solid border
"double"Double-line border
"groove"3D grooved border
"ridge"3D ridged border
"inset"3D inset border
"outset"3D outset border

Note: The property only has an effect if the object's borderTopStyle property is set to a value other than "none".

Example:

// get the borderTopStyle property of object1
var bs = object1.borderTopStyle;

// Give object1 a solid, black, 2-pixel border on its top edge.
object1.borderTopStyle = "solid";
object1.borderTopColor = "black";
object1.borderTopWidth = 2;

borderTopWidth

PropertyFirst available in version 1.0.0

The width of the border on the top edge of the object, in pixels.

Note: The property only has an effect if the object's borderTopStyle property is set to a value other than "none".

Example:

// get the borderTopWidth property of object1
var w = object1.borderTopWidth;

// Give object1 a solid, black, 2-pixel border on its top edge
object1.borderTopStyle = "solid";
object1.borderTopColor = "black";
object1.borderTopWidth = 2;

borderWidth

PropertyFirst available in version 1.0.0

The width of the object's border, in pixels.

Note: The property only has an effect if the object's borderStyle property is set to a value other than "none".

Example:

// get the borderWidth property of object1
var w = object1.borderWidth;

// Give object1 a solid, black, 2-pixel border with rounded corners
object1.borderStyle = "solid";
object1.borderColor = "black";
object1.borderWidth = 2;
object1.borderRadius = 2;

boxShadow

PropertyFirst available in version 1.0.0

Defines a shadow displayed behind the control. You can define the color of the shadow, the x-axis and y-axis offsets, and the shadow's blur radius.

The box shadow is defined using CSS box-shadow syntax:

shadow-color x-axis-offset y-axis-offset blur-radius

For example, the value: "#cccccc 1px 1px 2px" defines a shadow with color #cccccc, a 1-pixel offset on both the x- and y-axis, and a 2-pixel blur radius.

Code Example:

// get the boxShadow property of object1
var a = object1.boxShadow;

// Set the text shadow of object1
object1.boxShadow = "#cccccc 1px 1px 2px";

color

PropertyFirst available in version 1.0.0

The color of the object. Colors can be specified in a number of ways:

  • by name: "red", "blue", "green"
  • by hex format: "#c0c0a0"
  • by red/green/blue values: "rgb(12,34,56)"

Example:

// get the color of object1
var c = object1.color;

// set the color of object1 to red
object1.color = "red"; 

// set the color of object1 to red
object1.color = "#ff0000";

// set the color of object1 to red
object1.color = "rgb(255,0,0)";

domElement

MethodFirst available in version 1.0.0

Method that returns the HTML DOM element associated with the HD object.

Example:

// Get the object's DOM element
var element = object1.domElement();

onClick

EventFirst available in version 1.0.0

Event that occurs when the object is tapped/clicked. The property is set by selecting an HDFunction object within Handheld Designer, or defined at runtime.

In code, the property can be set to reference an existing function:

object1.onClick = someExistingFunction;

Or, you can define an anonymous function containing the code to be executed by the event:

object1.onClick = function(event) {
	// this code will be executed when the event is triggered
	object2.value = "The event was triggered";
};

onTouchEnd

EventFirst available in version 1.0.0

Event that occurs at the end of a touch event. The property is set by selecting an HDFunction object within Handheld Designer, or defined at runtime.

In code, the property can be set to reference an existing function:

object1.onTouchEnd = someExistingFunction;

Or, you can define an anonymous function containing the code to be executed by the event:

object1.onTouchEnd = function(event) {
	// this code will be executed when the event is triggered
	object2.value = "The event was triggered";
};

Note: In most cases, the onClick event is simpler and more reliable then the lower-level touch-based events (onTouchStart, onTouchMove, and onTouchEnd). However, the touch-based can be used if you need immediate access to each touch event.

Event Properties

The event parameter passed to the onTouchEnd event has the following key properties:

  • touches: An array of "touch" objects, one for each finger touching the screen.
  • targetTouches: An array of "touch" objects, one for each finger touching the object.
  • changedTouches: An array of "touch" objects, one for each finger involved in the current event.

Each "touch" object contains the following properties:

  • identifier: A unique identification number for the touch point.
  • screenX: The horizontal coordinate of point relative to the screen, in pixels.
  • screenY: The vertical coordinate of point relative to the screen in pixels.
  • pageX: The horizontal coordinate of point relative to the viewport in pixels, including any scroll offset.
  • pageY: The vertical coordinate of point relative to the viewport in pixels, including any scroll offset.
  • clientX: The horizontal coordinate of point relative to the viewport in pixels, excluding any scroll offset.
  • clientY: The vertical coordinate of point relative to the viewport in pixels, excluding any scroll offset.

Example:

object1.onTouchEnd = function(event) {
	// display the touch coordinates in a label
	var touch = event.targetTouches[0];
	label1.value = "Loc: " + touch.pageX + ", " + touch.pageY;
};

onTouchMove

EventFirst available in version 1.0.0

Event that occurs during a touch event when the touch point moves. The property is set by selecting an HDFunction object within Handheld Designer, or defined at runtime.

In code, the property can be set to reference an existing function:

object1.onTouchMove = someExistingFunction;

Or, you can define an anonymous function containing the code to be executed by the event:

object1.onTouchMove = function(event) {
	// this code will be executed when the event is triggered
	object2.value = "The event was triggered";
};

Note: In most cases, the onClick event is simpler and more reliable then the lower-level touch-based events (onTouchStart, onTouchMove, and onTouchEnd). However, the touch-based can be used if you need immediate access to each touch event.

Event Properties

The event parameter passed to the onTouchMove event has the following key properties:

  • touches: An array of "touch" objects, one for each finger touching the screen.
  • targetTouches: An array of "touch" objects, one for each finger touching the object.
  • changedTouches: An array of "touch" objects, one for each finger involved in the current event.

Each "touch" object contains the following properties:

  • identifier: A unique identification number for the touch point.
  • screenX: The horizontal coordinate of point relative to the screen, in pixels.
  • screenY: The vertical coordinate of point relative to the screen in pixels.
  • pageX: The horizontal coordinate of point relative to the viewport in pixels, including any scroll offset.
  • pageY: The vertical coordinate of point relative to the viewport in pixels, including any scroll offset.
  • clientX: The horizontal coordinate of point relative to the viewport in pixels, excluding any scroll offset.
  • clientY: The vertical coordinate of point relative to the viewport in pixels, excluding any scroll offset.

Example:

object1.onTouchMove = function(event) {
	// display the touch coordinates in a label
	var touch = event.targetTouches[0];
	label1.value = "Loc: " + touch.pageX + ", " + touch.pageY;
};

onTouchStart

EventFirst available in version 1.0.0

Event that occurs when the object is touched. The property is set by selecting an HDFunction object within Handheld Designer, or defined at runtime.

In code, the property can be set to reference an existing function:

object1.onTouchStart = someExistingFunction;

Or, you can define an anonymous function containing the code to be executed by the event:

object1.onTouchStart = function(event) {
	// this code will be executed when the event is triggered
	object2.value = "The event was triggered";
};

Note: In most cases, the onClick event is simpler and more reliable then the lower-level touch-based events (onTouchStart, onTouchMove, and onTouchEnd). However, the touch-based can be used if you need immediate access to each touch event.

Event Properties

The event parameter passed to the onTouchStart event has the following key properties:

  • touches: An array of "touch" objects, one for each finger touching the screen.
  • targetTouches: An array of "touch" objects, one for each finger touching the object.
  • changedTouches: An array of "touch" objects, one for each finger involved in the current event.

Each "touch" object contains the following properties:

  • identifier: A unique identification number for the touch point.
  • screenX: The horizontal coordinate of point relative to the screen, in pixels.
  • screenY: The vertical coordinate of point relative to the screen in pixels.
  • pageX: The horizontal coordinate of point relative to the viewport in pixels, including any scroll offset.
  • pageY: The vertical coordinate of point relative to the viewport in pixels, including any scroll offset.
  • clientX: The horizontal coordinate of point relative to the viewport in pixels, excluding any scroll offset.
  • clientY: The vertical coordinate of point relative to the viewport in pixels, excluding any scroll offset.

Example:

object1.onTouchStart = function(event) {
	// display the touch coordinates in a label
	var touch = event.targetTouches[0];
	label1.value = "Loc: " + touch.pageX + ", " + touch.pageY;
};

focus

MethodFirst available in version 1.3.1

The focus() method manually assigns user focus to the control.

Example:

// Give user focus to the textbox control.
textbox1.focus();

fontFamily

PropertyFirst available in version 1.0.0

The font family used to render the text associated with object. Can be a generic family ("serif", "sans-serif") or a specific font family ("Helvetica", "Times New Roman").

Example:

// get the font family property of object1
var f = object1.fontFamily;

// Set the font family of object1 to Helvetica Neue
object1.fontFamily = "Helvetica Neue";

fontSize

PropertyFirst available in version 1.0.0

The font size used to render the text associated with object, in pixels.

Example:

// get the fontSize property of object1
var f = object1.fontSize;

// Set the font size of object1 to 12
object1.fontSize = 12;

fontStyle

PropertyFirst available in version 1.0.0

The font style used to render the text associated with object. Property value can be:

"normal" (or blank)Normal text style
"italic"Italic text style
"oblique"Oblique text style

Example:

// get the fontStyle property of object1
var f = object1.fontStyle;

// Set the font style of object1 to "italic"
object1.fontStyle = "italic";

fontWeight

PropertyFirst available in version 1.0.0

The font weight used to render the text associated with object. Property value can be:

"normal" (or blank)Normal font weight
"bold"Bold font weight
"bolder"Bolder font weight
"lighter"Lighter font weight

Example:

// get the fontWeight property of object1
var f = object1.fontWeight;

// Set the font weight of object1 to "bold"
object1.fontWeight = "bold";

letterSpacing

PropertyFirst available in version 1.0.0

The letterSpacing property increases or decreases the amount of space between characters.

Example:

// add one additional pixel between characters
object1.letterSpacing = 1;

lineHeight

PropertyFirst available in version 1.0.0

Increase or decrease the amount of space between lines of text. Can be specified in the following forms:

"normal" (or empty)The default line height.
"number"Multiple (or fraction) of the current font size.
"numberpx"Line height in pixels.
"number%"Percentage of current font size.

Example:

// set the line height to 120% of the current font size
object1.lineHeight = "120%";

textAlign

PropertyFirst available in version 1.0.0

The text alignment used to display the text associated with object. Property value can be:

"left" (or blank)Aligns text with the left edge of the object.
"right"Aligns text with the right edge of the object.
"center"Centers the text in the object.
"justify"Full justification; adjusts the text so each line takes the full width of the object.

Example:

// get the textAlign property of object1
var a = object1.textAlign;

// Set the text alignment of object1 to "center"
object1.textAlign = "center";

textShadow

PropertyFirst available in version 1.0.0

Defines a shadow displayed behind the text. You can define the color of the shadow, the x-axis and y-axis offsets, and the shadow's blur radius.

The text shadow is defined using CSS text-shadow syntax:

shadow-color x-axis-offset y-axis-offset blur-radius

For example, the value: "#cccccc 1px 1px 2px" defines a text shadow with color #cccccc, a 1-pixel offset on both the x- and y-axis, and a 2-pixel blur radius.

Code Example:

// get the textShadow property of object1
var a = object1.textShadow;

// Set the text shadow of object1
object1.textShadow = "#cccccc 1px 1px 2px";

height

PropertyFirst available in version 1.0.0

The height of the object, measured in pixels.

Example:

// get the height of object1
var h = object1.height;

// set the height of object1
object1.height = 64;

id

PropertyFirst available in version 1.0.0

The object's unique identifier. Also used as the variable name in code.

Example:

// get height of object with the id "object1".
var h = object1.height;

left

PropertyFirst available in version 1.0.0

The location of the left of the object from the left edge of the page, measured in pixels.

Example:

// get the left location of object1
var x = object1.left;

// set the left location of object1
object1.left = 64;

locked

PropertyFirst available in version 1.2.0

Locks the object in the design view, preventing it from being moved accidentally.

opacity

PropertyFirst available in version 1.0.0

A number between zero and one that determines the transparency of the object. A value of 0 is fully transparent, 1 is fully opaque. A fractional value indicates partial transparency. (For example, an object with a opacity value of 0.25 would be 25% opaque.)

Example:

// set the opacity object1 so that it's 50% opaque
object1.opacity = 0.5;

padding

PropertyFirst available in version 1.0.0

The space between the object's border and its content, in pixels.

Example:

// get the padding property of object1
var p = object1.padding;

// Set the padding of object1 to 4 pixels
object1.padding = 4;

paddingBottom

PropertyFirst available in version 1.0.0

The space between the object's bottom border and its content, in pixels.

Example:

// get the bottom padding property of object1
var p = object1.paddingBottom;

// Set the top padding of object1 to 4 pixels
object1.paddingTop = 4;

paddingLeft

PropertyFirst available in version 1.0.0

The space between the object's left border and its content, in pixels.

Example:

// get the left padding property of object1
var p = object1.paddingBottom;

// Set the left padding of object1 to 4 pixels
object1.paddingLeft = 4;

paddingRight

PropertyFirst available in version 1.0.0

The space between the object's right border and its content, in pixels.

Example:

// get the right padding property of object1
var p = object1.paddingBottom;

// Set the right padding of object1 to 4 pixels
object1.paddingRight = 4;

paddingTop

PropertyFirst available in version 1.0.0

The space between the object's top border and its content, in pixels.

Example:

// get the top padding property of object1
var p = object1.paddingTop;

// Set the top padding of object1 to 4 pixels
object1.paddingTop = 4;

remove

MethodFirst available in version 1.0.0

The remove() method removes the object from the page. After calling remove(), any further operations on the object are invalid.

Example:

// Remove the image object from the page:
image1.remove();

styleClass

PropertyFirst available in version 1.0.0

A reference to an HDStyleClass object defining a set of shared visual properties to be applied to this object.

top

PropertyFirst available in version 1.0.0

The location of the top of the object, as measured from the top of the page, in pixels.

Example:

// get the top location of object1
var y = object1.top;

// set the top location of object1
object1.top = 64;

userdata

PropertyFirst available in version 1.0.0

An JavaScript object for storing user data. You can use this property to store data for later use. (For example, to share data between event handlers.)

Example:

// track the number of times a button is clicked:
function button1_onClick(event) {
	if(button1.userdata.timesClicked === undefined)
	{
		button1.userdata.timesClicked = 0;
	}
	else
	{
		button1.userdata.timesClicked++;
	}
}

value

PropertyFirst available in version 1.0.0

The text displayed by the label.

Example:

// set the value of the label object
label1.value = "Label text";

visible

PropertyFirst available in version 1.0.0

A true/false property that determines whether the object should be visible on the page.

Example:

// make object1 invisible
object1.visible = false;

width

PropertyFirst available in version 1.0.0

The width of the object, measured in pixels.

Example:

// get the width of object1
var w = object1.width;

// set the width of object1
object1.width = 64;

zIndex

PropertyFirst available in version 1.0.0

The stack order of the object. Objects with higher numbers appear in front of objects with lower numbers.

Example:

// "raise" the object
var z = object1.zIndex;
z += 10;

object1.zIndex = z;

Copyright © 2010-2014, Handheld Designer, LLC, All Rights Reserved.
Made by hand in New England, USA.