$w.Image

$w.Image

Images are images stored in the Media Manager or retreived from an external web location.

The URL formats for images are:

  • Images from the Media Manager: wix:image://...
  • Images from the web: http(s)://<image url>

Mixes In

$w.Element, $w.HiddenCollapsedMixin, $w.LinkableMixin, $w.ClickableMixin

Contents

alt Sets or gets an image's alt text.
collapsed Indicates if the element is collapsed or expanded.
global Indicates if an element appears on all pages or only on the current page.
hidden Indicates if the element is visible or hidden.
id Gets the elements's ID.
isVisible Indicates if the element is actually visible.
link Sets or gets the element's link.
parent Gets the element's parent element.
rendered Indicates if an element is currently displayed.
src Sets or gets the file location of the image.
target Sets or gets the target of the element's link.
tooltip Sets or gets an image's tooltip. An image's tooltip text is displayed when a user hovers over the image or when the image opens in a popup.
type Gets the element's type.
collapse( ) Collapses the element and sets its collapsed property to true.
expand( ) Expands the element and sets its collapsed property to false.
hide( ) Hides the element and sets its hidden property to true, using an effect if specified.
onClick( ) Adds an event handler that runs when the element is clicked.
onDblClick( ) Adds an event handler that runs when the element is double-clicked.
onMouseIn( ) Adds an event handler that runs when the mouse pointer is moved onto the element.
onMouseOut( ) Adds an event handler that runs when the mouse pointer is moved off of the element.
onViewportEnter( ) Adds an event handler that runs when an element is displayed in the viewable part of the current window.
onViewportLeave( ) Adds an event handler that runs when an element is no longer displayed in the viewable part of the current window.
scrollTo( ) Scrolls the page to the element using an animation.
show( ) Shows the element and sets its hidden property to false, using an effect if specified.
alt

alt

Sets or gets an image's alt text.

Syntax

get alt(): string
set alt(value: string): void

Description

An image's alternative text is typically a relatively short phrase that describes what the image depicts.

The alternative text is used:

  • If the browser cannot display the image.
  • If the user is utilizing a screen reader.
  • By search engines to understand what images are on your site.

Type

String

Examples

Get the image's alt text

bGV0IGFsdFRleHQgPSAkdygiI215SW1hZ2UiKS5hbHQ7IC8vICJBbHQgdGV4dCIK
let altText = $w("#myImage").alt; // "Alt text"

Set the image's alt text

JHcoIiNteUltYWdlIikuYWx0ID0gIkFsdCB0ZXh0IjsK
$w("#myImage").alt = "Alt text";

Default Value

An empty string

collapsed

collapsed

Indicates if the element is collapsed or expanded.

Syntax

get collapsed(): boolean

Description

If collapsed is true, the element is not displayed on the page under any circumstances. A collapsed element, unlike a hidden element, does not take up any space on the page. When collapsed, elements positioned within 70 pixels below the collapsed element and each other will move up to take the collapsed element's place where possible. The elements that move up maintain their positions relative to one another.

If collapsed is false, the element may be displayed on the page. Elements that moved up to take the collapsed element's place on the page are moved back down.

However, an expanded element (an element whose collapsed property is false) will still not be displayed if:

Even if the element will not be displayed due to the conditions mentioned above, if its collapsed property is false, it will be displayed when the conditions no longer apply.

To set the collapsed property on an element, use the element's collapse() and expand() functions.

If you select Collapsed on load in the element's Properties panel in the Editor, the collapsed property is set to true when the page loads.

Type

Boolean

Examples

Get an element's collapsed status

bGV0IGlzQ29sbGFwc2VkID0gJHcoIiNteUVsZW1lbnQiKS5jb2xsYXBzZWQ7IC8vIGZhbHNlCg==
let isCollapsed = $w("#myElement").collapsed; // false

Toggle an element's collapsed state

aWYoICR3KCIjbXlFbGVtZW50IikuY29sbGFwc2VkICkgewogICR3KCIjbXlFbGVtZW50IikuZXhwYW5kKCk7Cn0KZWxzZSB7CiAgJHcoIiNteUVsZW1lbnQiKS5jb2xsYXBzZSgpOwp9Cg==
if( $w("#myElement").collapsed ) {
  $w("#myElement").expand();
}
else {
  $w("#myElement").collapse();
}

Default Value

false

Mixed In From

$w.HiddenCollapsedMixin

See Also

collapse( ), expand( ), hide( ), show( ), hidden

global

global

Indicates if an element appears on all pages or only on the current page.

Syntax

get global(): boolean

Description

If global is true, the element appears on all pages.

If global is false, the element only appears on the current page.

Type

Boolean

Examples

Get whether an element is displayed on all pages

bGV0IGlzR2xvYmFsID0gJHcoIiNteUVsZW1lbnQiKS5nbG9iYWw7IC8vIGZhbHNlCg==
let isGlobal = $w("#myElement").global; // false

Default Value

false

Mixed In From

$w.Element

hidden

hidden

Indicates if the element is visible or hidden.

Syntax

get hidden(): boolean

Description

If hidden is true, the element is not displayed on the page under any circumstances. A hidden element, unlike a collapsed element, continues to take up the same space on the page as it did when it was visible.

If hidden is false, the element may be displayed on the page.

However, an element whose hidden property is false will still not be displayed if:

Even if the element will not be displayed due to the conditions mentioned above, if its hidden property is set to false, it will be displayed when the conditions no longer apply.

To determine if the element is actually visible, use the isVisible property.

To set the hidden property on an element, use the element's hide() or show() functions.

If you select Hidden on load in the element's Properties panel in the Editor, the hidden property is set to true when the page loads.

Type

Boolean

Examples

Get an element's hidden status

bGV0IGlzSGlkZGVuID0gJHcoIiNteUVsZW1lbnQiKS5oaWRkZW47ICAvLyBmYWxzZQo=
let isHidden = $w("#myElement").hidden;  // false

Toggle an element's hidden state

aWYoICR3KCIjbXlFbGVtZW50IikuaGlkZGVuICkgewogICR3KCIjbXlFbGVtZW50Iikuc2hvdygpOwp9CmVsc2UgewogICR3KCIjbXlFbGVtZW50IikuaGlkZSgpOwp9Cg==
if( $w("#myElement").hidden ) {
  $w("#myElement").show();
}
else {
  $w("#myElement").hide();
}

Default Value

false

Mixed In From

$w.HiddenCollapsedMixin

See Also

hide( ), show( ), collapse( ), expand( ), collapsed, rendered

id

id

Gets the elements's ID.

Syntax

get id(): string

Description

The ID is the element's unique identifier. It is used when selecting elements using the $w() function.

An element's id is set in the Editor using the Properties panel.

Type

String

Examples

Get the ID

bGV0IG15SWQgPSAkdygiI215RWxlbWVudCIpLmlkOyAvLyAibXlFbGVtZW50Igo=
let myId = $w("#myElement").id; // "myElement"

Mixed In From

$w.Element

isVisible

isVisible

Indicates if the element is actually visible.

Syntax

get isVisible(): boolean

Description

If isVisible is true, the element is displayed on the page.

If isVisible is false, the element is not displayed on the page.

The value of the isVisible property is calculated based on the hidden, collapsed, and rendered properties of the element and all of its ancestors. It will be true only if the conditions exist in the element's property values and the property values of its ancestors such that the element is actually displayed on the page.

Type

Boolean

Examples

Get whether an element is visible

bGV0IGlzVmlzaWJsZSA9ICR3KCIjbXlFbGVtZW50IikuaXNWaXNpYmxlOyAgLy8gdHJ1ZQo=
let isVisible = $w("#myElement").isVisible;  // true

Default Value

true

Mixed In From

$w.HiddenCollapsedMixin

See Also

hidden, collapsed, rendered

link

link

Sets or gets the element's link.

Syntax

get link(): string
set link(value: string): void

Description

When the element is clicked, the browser navigates to the link location.

The different types of links you can use are:

  • /localPageURL — another page on your site
  • / — your site's home page
  • http(s)://<url> — an external web address
  • wix:document://<location> - a document stored in the Media Manager
  • mailto:<email-address>?subject=<subject> - an email
  • tel:<phone number> - a phone number

The link property will attempt to properly encode the URL value that you set. For example, .../some page will be encoded to .../some%20page. However, some URLs do not have one unambiguous encoding. In those cases it is up to you to encode the URL to reflect your intentions. Because of these situations, it is a best practice to always encode URLs before you set them as the value of the link property. Regardless of how you set the link property, when you get its value, it returns an encoded URL.

Note that Wix URLs do not contain spaces. A page which has spaces in its name has its spaces replaced with dashes (-). Similarly, a dynamic page URL which contains the value of a field in your collection with spaces will have its spaces replaced with dashes (-).

Type

String

Examples

Get the link URL from an element

bGV0IHVybCA9ICR3KCIjbXlFbGVtZW50IikubGluazsgICAvLyAiaHR0cDovL215c2l0ZS5jb20iCg==
let url = $w("#myElement").link;   // "http://mysite.com"

Set an element to open a local link

JHcoIiNteUVsZW1lbnQiKS5saW5rID0gIi9hYm91dC1tZSI7Cg==
$w("#myElement").link = "/about-me";

Set an element to open an external web link

JHcoIiNteUVsZW1lbnQiKS5saW5rID0gImh0dHA6Ly93aXguY29tIjsK
$w("#myElement").link = "http://wix.com";

Set an element to open an external web link in a new browser page when clicked

JHcoIiNteUVsZW1lbnQiKS5saW5rID0gImh0dHA6Ly93aXguY29tIjsKJHcoIiNteUVsZW1lbnQiKS50YXJnZXQgPSAiX2JsYW5rIjsK
$w("#myElement").link = "http://wix.com";
$w("#myElement").target = "_blank";

Set an element to open a new email window when clicked

JHcoIiNteUVsZW1lbnQiKS5saW5rID0gIm1haWx0bzphQGIuY29tP3N1YmplY3Q9U29tZXRoaW5nJTIwSW50ZXJzdGluZyI7Cg==
$w("#myElement").link = "mailto:a@b.com?subject=Something%20Intersting";

Set an element to open a document

JHcoIiNteUVsZW1lbnQiKS5saW5rID0gIndpeDpkb2N1bWVudDovL3YxLzliZWNfNTJmYjA2ZWEvZmlsZW5hbWUueGxzIjsK
$w("#myElement").link = "wix:document://v1/9bec_52fb06ea/filename.xls";

Set an element to make a phone call when clicked

JHcoIiNteUVsZW1lbnQiKS5saW5rID0gInRlbDorMS01NTUtNTU1LTU1NTUiOwo=
$w("#myElement").link = "tel:+1-555-555-5555";

Default Value

An empty string

Mixed In From

$w.LinkableMixin

See Also

target

parent

parent

Gets the element's parent element.

Syntax

get parent(): Node

Description

Some elements can contain other elements. This occurs when you drag an element onto a container element. The container is the parent of all the elements it contains.

Page, Header, and Footer are top-level elements and have no parent.

Type

Node

Examples

Get the parent element and the parent's ID

bGV0IHBhcmVudEVsZW1lbnQgPSAkdygiI215RWxlbWVudCIpLnBhcmVudDsKCmxldCBwYXJlbnRJZCA9IHBhcmVudEVsZW1lbnQuaWQ7IC8vICJwYWdlMSIK
let parentElement = $w("#myElement").parent;

let parentId = parentElement.id; // "page1"

Default Value

null

Mixed In From

$w.Element

See Also

children

rendered

rendered

Indicates if an element is currently displayed.

Syntax

get rendered(): boolean

Description

If rendered is true, the element is in the current DOM structure and can be used.

If rendered is false the element is not in the current DOM structure.

Some reasons the element might not be in the DOM inclue:

  • It is in a slide which is not currently showing.
  • It is in a mode which is not currently active. For example, it is in the hover mode of a hover box.

Type

Boolean

Default Value

false

Mixed In From

$w.Element

See Also

collapsed, hidden, isVisible

src

src

Sets or gets the file location of the image.

Syntax

get src(): string
set src(value: string): void

Description

Setting the src property changes the displayed image to the image found at the new src value.

Getting the src property returns the location of the current image file.

The image file can either be an image file from the Media Manager or an external file from any web location.

The URL formats supported are:

  • Images from the Media Manager: wix:image://v1/<uri>/<filename>#originWidth=<width>&originHeight=<height>[&watermark=<watermark_manifest_string>]
  • Images from the web: http(s)://<image url>

Type

String

Examples

Get the image's location

bGV0IGJhY2tncm91bmRTb3VyY2UgPSAkdygiI215SW1hZ2UiKS5zcmM7Ci8vICJ3aXg6aW1hZ2U6Ly92MS82OGQzYTlfMWRlNzUyOWM0NDRiNGM5ZWIzODQwMWY4ZWZlMGNhZDIuanBnL2Zsb3dlcnMuanBnLyNvcmlnaW5XaWR0aD0xOTcwJm9yaWdpbkhlaWdodD0xMTIwIgo=
let backgroundSource = $w("#myImage").src;
// "wix:image://v1/68d3a9_1de7529c444b4c9eb38401f8efe0cad2.jpg/flowers.jpg/#originWidth=1970&originHeight=1120"

Set the image to be an image from the Media Manager

JHcoIiNteUVsZW1lbnQiKS5zcmMgPSAid2l4OmltYWdlOi8vdjEvNjhkM2E5XzFkZTc1MjljNDQ0YjRjOWViMzg0MDFmOGVmZTBjYWQyLmpwZy9mbG93ZXJzLmpwZy8jb3JpZ2luV2lkdGg9MTk3MCZvcmlnaW5IZWlnaHQ9MTEyMCI7Cg==
$w("#myElement").src = "wix:image://v1/68d3a9_1de7529c444b4c9eb38401f8efe0cad2.jpg/flowers.jpg/#originWidth=1970&originHeight=1120";

Set the image to be an image from the web

JHcoIiNteUVsZW1lbnQiKS5zcmMgPSAiaHR0cDovL3BsYWNlaG9sZC5pdC8yNTB4MjUwIjsK
$w("#myElement").src = "http://placehold.it/250x250";

Default Value

An empty string

target

target

Sets or gets the target of the element's link.

Syntax

get target(): string
set target(value: string): void

Description

An element's target determines where its link opens. The target can be set so the link opens in the current page or in a new page.

Supported values are:

  • "_blank" — The link opens in a new tab or window.
  • "_self" — The link opens in the tab or window.

Type

String

Examples

Get the link target from an element

bGV0IHVybCA9ICR3KCIjbXlFbGVtZW50IikudGFyZ2V0OyAvLyAiX2JsYW5rIgo=
let url = $w("#myElement").target; // "_blank"

Set the link target for an element

JHcoIiNteUVsZW1lbnQiKS50YXJnZXQgPSAiX2JsYW5rIjsK
$w("#myElement").target = "_blank";

Set an element to open an external web link in a new browser page when clicked

JHcoIiNteUVsZW1lbnQiKS5saW5rID0gImh0dHA6Ly93aXguY29tIjsKJHcoIiNteUVsZW1lbnQiKS50YXJnZXQgPSAiX2JsYW5rIjsK
$w("#myElement").link = "http://wix.com";
$w("#myElement").target = "_blank";

Default Value

"_blank"

Mixed In From

$w.LinkableMixin

See Also

link

tooltip

tooltip

Sets or gets an image's tooltip. An image's tooltip text is displayed when a user hovers over the image or when the image opens in a popup.

Syntax

get tooltip(): string
set tooltip(value: string): void

Type

String

Examples

Get the image's alt text

bGV0IGFsdFRleHQgPSAkdygiI215SW1hZ2UiKS5hbHQ7IC8vICJBbHQgdGV4dCIK
let altText = $w("#myImage").alt; // "Alt text"

Set the image's alt text

JHcoIiNteUltYWdlIikuYWx0ID0gIkFsdCB0ZXh0IjsK
$w("#myImage").alt = "Alt text";

Default Value

An empty string

type

type

Gets the element's type.

Syntax

get type(): string

Type

String

Examples

Get the element's type

bGV0IG15VHlwZSA9ICR3KCIjbXlFbGVtZW50IikudHlwZTsgLy8gIiR3LlR5cGUiCg==
let myType = $w("#myElement").type; // "$w.Type"

Mixed In From

$w.Element

collapse( )

collapse( )

Collapses the element and sets its collapsed property to true.

function collapse(): Promise<void>

Description

The collapse() function returns a Promise that is resolved when the element's collapsed property has been set to true.

To learn about the behavior of a collapsed element, see the collapsed property.

You can also collapse an element when the page loads by using the Properties panel in the Editor.

Return Value

Returns a Promise

On fulfillment void When the element's collapsed property has been set to true.

Examples

Collapse an element

JHcoIiNteUVsZW1lbnQiKS5jb2xsYXBzZSgpOwo=
$w("#myElement").collapse();

Collapse an element and log a message when done

JHcoIiNteUVsZW1lbnQiKS5jb2xsYXBzZSgpCiAgLnRoZW4oICgpID0+IHsKICAgIGNvbnNvbGUubG9nKCJEb25lIHdpdGggY29sbGFwc2UiKTsKICB9ICk7Cg==
$w("#myElement").collapse()
  .then( () => {
    console.log("Done with collapse");
  } );

Toggle an element's collapsed state

aWYoICR3KCIjbXlFbGVtZW50IikuY29sbGFwc2VkICkgewogICR3KCIjbXlFbGVtZW50IikuZXhwYW5kKCk7Cn0KZWxzZSB7CiAgJHcoIiNteUVsZW1lbnQiKS5jb2xsYXBzZSgpOwp9Cg==
if( $w("#myElement").collapsed ) {
  $w("#myElement").expand();
}
else {
  $w("#myElement").collapse();
}

Mixed In From

$w.HiddenCollapsedMixin

See Also

expand( ), collapsed, hide( )

expand( )

expand( )

Expands the element and sets its collapsed property to false.

function expand(): Promise<void>

Description

The expand() function returns a Promise that is resolved when the element's collapsed property has been set to false.

To learn about the behavior of an expanded element, see the collapsed property.

Return Value

Returns a Promise

On fulfillment void When the element's collapsed property has been set to false.

Examples

Expand an element

JHcoIiNteUVsZW1lbnQiKS5leHBhbmQoKTsK
$w("#myElement").expand();

Expand an element and log a message when done

JHcoIiNteUVsZW1lbnQiKS5leHBhbmQoKQogIC50aGVuKCAoKSA9PiB7CiAgICBjb25zb2xlLmxvZygiRG9uZSB3aXRoIGV4cGFuZCIpOwogIH0gKTsK
$w("#myElement").expand()
  .then( () => {
    console.log("Done with expand");
  } );

Toggle an element's collapsed state

aWYoICR3KCIjbXlFbGVtZW50IikuY29sbGFwc2VkICkgewogICR3KCIjbXlFbGVtZW50IikuZXhwYW5kKCk7Cn0KZWxzZSB7CiAgJHcoIiNteUVsZW1lbnQiKS5jb2xsYXBzZSgpOwp9Cg==
if( $w("#myElement").collapsed ) {
  $w("#myElement").expand();
}
else {
  $w("#myElement").collapse();
}

Mixed In From

$w.HiddenCollapsedMixin

See Also

expand( ), collapsed, show( )

hide( )

hide( )

Hides the element and sets its hidden property to true, using an effect if specified.

function hide([effectName: Effect], [effectOptions: EffectOptions]): Promise<void>
type Effect = "arc" | "bounce" | "fade" | "flip"
| "float" | "fly" | "fold" | "glide" | "puff"
| "roll" | "slide" | "spin" | "turn" | "zoom"
type EffectOptions = ArcEffectOptions | BounceEffectOptions
| FadeEffectOptions | FlipEffectOptions | FloatEffectOptions
| FlyEffectOptions | FoldEffectOptions | GlideEffectOptions
| PuffEffectOptions | RollEffectOptions | SlideEffectOptions
| SpinEffectOptions | TurnEffectOptions | ZoomEffectOptions

Description

The hide() function hides the element and returns a Promise that is resolved when the effect is complete and the element's hidden property has been set to true.

To learn about the behavior of a hidden element, see the hidden property.

You can optionally apply an effect when hiding the element by providing an effectName value. You can also customize the effect by providing the optional effectOptions object.

Effects:

You can also hide an element when the page loads by using the Properties panel in the Editor.

Parameters

effectName (optional) String The name of the effect to play when hiding the item.
effectOptions (optional) ArcEffectOptions |
BounceEffectOptions |
FadeEffectOptions |
FlipEffectOptions |
FloatEffectOptions |
FlyEffectOptions |
FoldEffectOptions |
GlideEffectOptions |
PuffEffectOptions |
RollEffectOptions |
SlideEffectOptions |
SpinEffectOptions |
TurnEffectOptions |
ZoomEffectOptions
The effect's options.

Return Value

Returns a Promise

On fulfillment void When the effect is complete and the element's hidden property has been set to true.

Examples

Hide an element with no effect

JHcoIiNteUVsZW1lbnQiKS5oaWRlKCk7Cg==
$w("#myElement").hide();

Hide an element with the "fade" effect

JHcoIiNteUVsZW1lbnQiKS5oaWRlKCJmYWRlIik7Cg==
$w("#myElement").hide("fade");

Hide an element with an effect and log message when the effect is done

bGV0IGZhZGVPcHRpb25zID0gewogICJkdXJhdGlvbiI6ICAgMjAwMCwKICAiZGVsYXkiOiAgICAgIDEwMDAKfTsKCiR3KCIjbXlFbGVtZW50IikuaGlkZSgiZmFkZSIsIGZhZGVPcHRpb25zKTsK
let fadeOptions = {
  "duration":   2000,
  "delay":      1000
};

$w("#myElement").hide("fade", fadeOptions);

Hide an element with an effect and log message when the effect is done

JHcoIiNteUVsZW1lbnQiKS5oaWRlKCJmYWRlIikKICAudGhlbiggKCApID0+IHsKICAgIGNvbnNvbGUubG9nKCJEb25lIHdpdGggZmFkZSIpOwp9ICk7Cg==
$w("#myElement").hide("fade")
  .then( ( ) => {
    console.log("Done with fade");
} );

Toggle an element's hidden state

aWYoICR3KCIjbXlFbGVtZW50IikuaGlkZGVuICkgewogICR3KCIjbXlFbGVtZW50Iikuc2hvdygpOwp9CmVsc2UgewogICR3KCIjbXlFbGVtZW50IikuaGlkZSgpOwp9Cg==
if( $w("#myElement").hidden ) {
  $w("#myElement").show();
}
else {
  $w("#myElement").hide();
}

Mixed In From

$w.HiddenCollapsedMixin

See Also

show( ), hidden, collapse( )

onClick( )

onClick( )

Adds an event handler that runs when the element is clicked.

function onClick(handler: MouseEventHandler): Element
callback MouseEventHandler(event: MouseEvent, $w: Function): void

Description

An element receives a click event when a user clicks on the element and releases.

When a user double-clicks an element, two click events are fired before a doubleClick event is also fired.

Parameters

handler function(event, $w) The name of the function or the function expression to run when the element is clicked.
event MouseEvent The mouse event that occurred.
$w $w A selector function. The $w function enables event handlers to work with elements in repeaters and in the global scope.

Return Value

Element The element to which the event handler was added.

Examples

Get the ID of the element that was clicked

JHcoIiNteUVsZW1lbnQiKS5vbkNsaWNrKCAoZXZlbnQsICR3KSA9PiB7CiAgbGV0IHRhcmdldElkID0gZXZlbnQudGFyZ2V0LmlkOyAgLy8gIm15RWxlbWVudCIKfSApOwo=
$w("#myElement").onClick( (event, $w) => {
  let targetId = event.target.id;  // "myElement"
} );

Get a mouse click's coordinates

JHcoIiNteUVsZW1lbnQiKS5vbkNsaWNrKCAoZXZlbnQsICR3KSA9PiB7CiAgbGV0IGNsaWVudFggPSBldmVudC5jbGllbnRYOyAgLy8gMzYyCiAgbGV0IGNsaWVudFkgPSBldmVudC5jbGllbnRZOyAgLy8gMjQ0CiAgbGV0IG9mZnNldFggPSBldmVudC5vZmZzZXRYOyAgLy8gMTAKICBsZXQgb2Zmc2V0WSA9IGV2ZW50Lm9mZnNldFk7ICAvLyAxMgogIGxldCBwYWdlWCA9IGV2ZW50LnBhZ2VYOyAgICAgIC8vIDM2MgogIGxldCBwYWdlWSA9IGV2ZW50LnBhZ2VZOyAgICAgIC8vIDM3NgogIGxldCBzY3JlZW5YID0gZXZlbnQuc2NyZWVuWDsgIC8vIDM4OTcKICBsZXQgc2NyZWVuWSA9IGV2ZW50LnNjcmVlblk7ICAvLyAzNjIKfSApOwo=
$w("#myElement").onClick( (event, $w) => {
  let clientX = event.clientX;  // 362
  let clientY = event.clientY;  // 244
  let offsetX = event.offsetX;  // 10
  let offsetY = event.offsetY;  // 12
  let pageX = event.pageX;      // 362
  let pageY = event.pageY;      // 376
  let screenX = event.screenX;  // 3897
  let screenY = event.screenY;  // 362
} );

Mixed In From

$w.ClickableMixin

See Also

onDblClick( )

onDblClick( )

onDblClick( )

Adds an event handler that runs when the element is double-clicked.

function onDblClick(handler: MouseEventHandler): Element
callback MouseEventHandler(event: MouseEvent, $w: Function): void

Description

An element receives a dblClick event when a user double-clicks on the element and releases.

When a user double-clicks an element, two click events are fired before a doubleClick event is also fired.

Parameters

handler function(event, $w) The name of the function or the function expression to run when the element is clicked.
event MouseEvent The mouse event that occurred.
$w $w A selector function. The $w function enables event handlers to work with elements in repeaters and in the global scope.

Return Value

Element The element to which the event handler was added.

Examples

Get the ID of the element that was double-clicked

JHcoIiNteUVsZW1lbnQiKS5vbkNsaWNrKCAoZXZlbnQsICR3KSA9PiB7CiAgbGV0IHRhcmdldElkID0gZXZlbnQudGFyZ2V0LmlkOyAgLy8gIm15RWxlbWVudCIKfSApOwo=
$w("#myElement").onClick( (event, $w) => {
  let targetId = event.target.id;  // "myElement"
} );

Mixed In From

$w.ClickableMixin

See Also

onClick( )

onMouseIn( )

onMouseIn( )

Adds an event handler that runs when the mouse pointer is moved onto the element.

function onMouseIn(handler: MouseEventHandler): Element
callback MouseEventHandler(event: MouseEvent, $w: Function): void

Parameters

handler function(event, $w) The name of the function or the function expression to run when the mouse pointer is moved onto the element.
event MouseEvent The mouse event that occurred.
$w $w A selector function. The $w function enables event handlers to work with elements in repeaters and in the global scope.

Return Value

Element The element to which the event handler was added.

Examples

Get the mouse event info when the mouse enters an element

JHcoIiNteUVsZW1lbnQiKS5vbk1vdXNlSW4oIChldmVudCwgJHcpID0+IHsKICBsZXQgY2xpZW50WCA9IGV2ZW50LmNsaWVudFg7ICAvLyAzNjIKICBsZXQgY2xpZW50WSA9IGV2ZW50LmNsaWVudFk7ICAvLyAyNDQKICBsZXQgb2Zmc2V0WCA9IGV2ZW50Lm9mZnNldFg7ICAvLyAxMAogIGxldCBvZmZzZXRZID0gZXZlbnQub2Zmc2V0WTsgIC8vIDEyCiAgbGV0IHBhZ2VYID0gZXZlbnQucGFnZVg7ICAgICAgLy8gMzYyCiAgbGV0IHBhZ2VZID0gZXZlbnQucGFnZVk7ICAgICAgLy8gMzc2CiAgbGV0IHNjcmVlblggPSBldmVudC5zY3JlZW5YOyAgLy8gMzg5NwogIGxldCBzY3JlZW5ZID0gZXZlbnQuc2NyZWVuWTsgIC8vIDM2Mgp9ICk7Cg==
$w("#myElement").onMouseIn( (event, $w) => {
  let clientX = event.clientX;  // 362
  let clientY = event.clientY;  // 244
  let offsetX = event.offsetX;  // 10
  let offsetY = event.offsetY;  // 12
  let pageX = event.pageX;      // 362
  let pageY = event.pageY;      // 376
  let screenX = event.screenX;  // 3897
  let screenY = event.screenY;  // 362
} );

Mixed In From

$w.Element

onMouseOut( )

onMouseOut( )

Adds an event handler that runs when the mouse pointer is moved off of the element.

function onMouseOut(handler: MouseEventHandler): Element
callback MouseEventHandler(event: MouseEvent, $w: Function): void

Parameters

handler function(event, $w) The name of the function or the function expression to run when the mouse pointer is moved off of the element.
event MouseEvent The mouse event that occurred.
$w $w A selector function. The $w function enables event handlers to work with elements in repeaters and in the global scope.

Return Value

Element The element to which the event handler was added.

Examples

Get the mouse event info when the mouse exits an element

JHcoIiNteUVsZW1lbnQiKS5vbk1vdXNlT3V0KCAoZXZlbnQsICR3KSA9PiB7CiAgbGV0IGNsaWVudFggPSBldmVudC5jbGllbnRYOyAgLy8gMzYyCiAgbGV0IGNsaWVudFkgPSBldmVudC5jbGllbnRZOyAgLy8gMjQ0CiAgbGV0IG9mZnNldFggPSBldmVudC5vZmZzZXRYOyAgLy8gMTAKICBsZXQgb2Zmc2V0WSA9IGV2ZW50Lm9mZnNldFk7ICAvLyAxMgogIGxldCBwYWdlWCA9IGV2ZW50LnBhZ2VYOyAgICAgIC8vIDM2MgogIGxldCBwYWdlWSA9IGV2ZW50LnBhZ2VZOyAgICAgIC8vIDM3NgogIGxldCBzY3JlZW5YID0gZXZlbnQuc2NyZWVuWDsgIC8vIDM4OTcKICBsZXQgc2NyZWVuWSA9IGV2ZW50LnNjcmVlblk7ICAvLyAzNjIKfSApOwo=
$w("#myElement").onMouseOut( (event, $w) => {
  let clientX = event.clientX;  // 362
  let clientY = event.clientY;  // 244
  let offsetX = event.offsetX;  // 10
  let offsetY = event.offsetY;  // 12
  let pageX = event.pageX;      // 362
  let pageY = event.pageY;      // 376
  let screenX = event.screenX;  // 3897
  let screenY = event.screenY;  // 362
} );

Mixed In From

$w.Element

onViewportEnter( )

onViewportEnter( )

Adds an event handler that runs when an element is displayed in the viewable part of the current window.

function onViewportEnter(handler: EventHandler): Element
callback EventHandler(event: Event, $w: Function): void

Description

An element enters the viewport when the page is scrolled to show any part of the element. An element also enters the viewport if it was hidden or collapsed and is then shown or expanded in the viewable part of the current window.

Parameters

handler function(event, $w) The name of the function or the function expression to run when the element enters the viewport.
event Event The event that occurred.
$w $w A selector function. The $w function enables event handlers to work with elements in repeaters and in the global scope.

Return Value

Element The element on which the event is now registered.

Examples

Get the ID of the element that has entered the viewport

JHcoIiNteUVsZW1lbnQiKS5vblZpZXdwb3J0RW50ZXIoIChldmVudCwgJHcpID0+IHsKICBsZXQgdGFyZ2V0SWQgPSBldmVudC50YXJnZXQuaWQ7IC8vICJteUVsZW1lbnQiCn0pOwo=
$w("#myElement").onViewportEnter( (event, $w) => {
  let targetId = event.target.id; // "myElement"
});

Mixed In From

$w.Element

See Also

onViewportLeave( )

onViewportLeave( )

onViewportLeave( )

Adds an event handler that runs when an element is no longer displayed in the viewable part of the current window.

function onViewportLeave(handler: EventHandler): Element
callback EventHandler(event: Event, $w: Function): void

Description

An element leaves the viewport when the page is scrolled so that the elements is completely out of view. An element also leaves the viewport if it was shown or expanded and is then hidden or collapsed from the viewable part of the current window.

Parameters

handler function(event, $w) The name of the function or the function expression to run when the element leaves the viewport.
event Event The event that occurred.
$w $w A selector function. The $w function enables event handlers to work with elements in repeaters and in the global scope.

Return Value

Element The element on which the event is now registered.

Examples

Get the ID of the element that has entered the viewport

JHcoIiNteUVsZW1lbnQiKS5vblZpZXdwb3J0TGVhdmUoIChldmVudCwgJHcpID0+IHsKICBsZXQgdGFyZ2V0SWQgPSBldmVudC50YXJnZXQuaWQ7IC8vICJteUVsZW1lbnQiCn0pOwo=
$w("#myElement").onViewportLeave( (event, $w) => {
  let targetId = event.target.id; // "myElement"
});

Mixed In From

$w.Element

See Also

ViewportMixin-onViewportEnter( )

scrollTo( )

scrollTo( )

Scrolls the page to the element using an animation.

function scrollTo(): Promise<void>

Description

The scrollTo() function returns a Promise that is resolved when the animated scroll is complete and the element is now in view.

To scroll to a specific location on the page, see the wix-window scrollTo() function.

Calling the scrollTo() function on an element in a repeated item that is selected from the global scope causes an error.

Return Value

Returns a Promise

On fulfillment void When the scroll is complete.

Examples

Scroll the page to an element

JHcoIiNteUVsZW1lbnQiKS5zY3JvbGxUbygpOwo=
$w("#myElement").scrollTo();

Scroll the page to an element and log message when done

JHcoIiNteUVsZW1lbnQiKS5zY3JvbGxUbygpCiAgLnRoZW4oICggKSA9PiB7CiAgICBjb25zb2xlLmxvZygiRG9uZSB3aXRoIHNjcm9sbCIpOwp9ICk7Cg==
$w("#myElement").scrollTo()
  .then( ( ) => {
    console.log("Done with scroll");
} );

Mixed In From

$w.Element

show( )

show( )

Shows the element and sets its hidden property to false, using an effect if specified.

function show([effectName: Effect], [effectOptions: EffectOptions]): Promise<void>
type Effect = "arc" | "bounce" | "fade" | "flip"
| "float" | "fly" | "fold" | "glide" | "puff"
| "roll" | "slide" | "spin" | "turn" | "zoom"
type EffectOptions = ArcEffectOptions | BounceEffectOptions
| FadeEffectOptions | FlipEffectOptions | FloatEffectOptions
| FlyEffectOptions | FoldEffectOptions | GlideEffectOptions
| PuffEffectOptions | RollEffectOptions | SlideEffectOptions
| SpinEffectOptions | TurnEffectOptions | ZoomEffectOptions

Description

The show() function shows the element and returns a Promise that is resolved when the effect is complete and the element's hidden property has been set to false.

You can optionally apply an effect when showing the element by providing an effectName value. You can also customize the effect by providing the optional effectOptions object.

Effects:

Parameters

effectName (optional) String The name of the effect to play when showing the item.
effectOptions (optional) ArcEffectOptions |
BounceEffectOptions |
FadeEffectOptions |
FlipEffectOptions |
FloatEffectOptions |
FlyEffectOptions |
FoldEffectOptions |
GlideEffectOptions |
PuffEffectOptions |
RollEffectOptions |
SlideEffectOptions |
SpinEffectOptions |
TurnEffectOptions |
ZoomEffectOptions
The effect's options.

Return Value

Returns a Promise

On fulfillment void When the effect is complete and the element's hidden property has been set to false.

Examples

Show an element with no effect

JHcoIiNteUVsZW1lbnQiKS5zaG93KCk7Cg==
$w("#myElement").show();

Show an element with the "fade" effect

JHcoIiNteUVsZW1lbnQiKS5zaG93KCJGYWRlSW4iKTsK
$w("#myElement").show("FadeIn");

Show an element with the "fade" effect and custom options

JHcoIiNteUVsZW1lbnQiKS5zaG93KCJGYWRlSW4iKTsK
$w("#myElement").show("FadeIn");

Show an element with an effect and log message when the effect is done

bGV0IGZhZGVPcHRpb25zID0gewogICJkdXJhdGlvbiI6ICAgMjAwMCwKICAiZGVsYXkiOiAgICAgIDEwMDAKfTsKCiR3KCIjbXlFbGVtZW50Iikuc2hvdygiZmFkZSIsIGZhZGVPcHRpb25zKTsK
let fadeOptions = {
  "duration":   2000,
  "delay":      1000
};

$w("#myElement").show("fade", fadeOptions);

Toggle an element's hidden state

aWYoICR3KCIjbXlFbGVtZW50IikuaGlkZGVuICkgewogICR3KCIjbXlFbGVtZW50Iikuc2hvdygpOwp9CmVsc2UgewogICR3KCIjbXlFbGVtZW50IikuaGlkZSgpOwp9Cg==
if( $w("#myElement").hidden ) {
  $w("#myElement").show();
}
else {
  $w("#myElement").hide();
}

Mixed In From

$w.HiddenCollapsedMixin

See Also

hide( ), hidden, expand( )