Documentation

HDStyleClass

Shared set of visual attributes.

Visual properties set on a HDStyleClass object can be applied to (i.e. inherited by) another object by setting that object's styleClass property.

For example, suppose you create an HDStyleClass object with the id style1, and set its fontFamily property to "Helvetica". Then, any object with the styleClass property of "style1" will display its text in Helvetica.

While you can change the styleClass property of other objects are runtime, instances of the HDStyleClass object itself are not available at runtime.

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.
 colorThe color of the object.
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.
 idThe object's unique identifier. Also used as the variable name in code.
 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
 userdataAn object for storing user data.
 visibleDetermines if the object is visible on the page.

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;

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)";

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";

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;

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;

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++;
	}
}

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;

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