$w.Slideshow

$w.Slideshow

Slideshows are playable containers for slides.

Mixes In

$w.Element, $w.HiddenCollapsedMixin, $w.PlayableMixin, $w.ClickableMixin, $w.ContainableMixin

Contents

children Gets an array of the elements that are contained within the element.
collapsed Indicates if the element is collapsed or expanded.
currentIndex Gets the index of the slideshow's current slide.
currentSlide Gets the slideshow's current slide.
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.
isPlaying Indicates if the element is currently playing.
isVisible Indicates if the element is actually visible.
parent Gets the element's parent element.
rendered Indicates if an element is currently displayed.
showNavigationButtons Sets or gets whether a slideshow's navigation buttons are shown.
showSlideButtons Set or returns whether a slideshow's slide buttons are shown.
slides Gets a list of all the slides contained in the slideshow.
type Gets the element's type.
changeSlide( ) Change the slideshow's current slide to a specific slide or index.
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.
next( ) Moves to the next item.
onChange( ) Adds an event handler that runs when the slideshow moves to a new slide.
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.
onPause( ) Adds an event handler that runs when playback is paused.
onPlay( ) Adds an event handler that runs when playback is started or restarted.
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.
pause( ) Pauses playback.
play( ) Begins or resumes playback.
previous( ) Moves to the previous image or slide.
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.
children

children

Gets an array of the elements that are contained within the element.

Syntax

get children(): Element[]

Description

Some elements, such as pages, headers, footers, and boxes, can contain other elements. This occurs when you drag an element onto a container element and attach it. These attached elements are considered the parent element's children.

Type

Element[ ]

Examples

Get an element's children

bGV0IG15Q2hpbGRyZW4gPSAkdygiI215Q29udGFpbmVyIikuY2hpbGRyZW47CgpsZXQgZmlyc3RDaGlsZCA9IG15Q2hpbGRyZW5bMF07Cg==
let myChildren = $w("#myContainer").children;

let firstChild = myChildren[0];

Default Value

An empty array

Mixed In From

$w.ContainableMixin

See Also

parent

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 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) is still not displayed if:

Even if the element is not be displayed due to the conditions mentioned above, if its collapsed property is false, it's 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

currentIndex

currentIndex

Gets the index of the slideshow's current slide.

Syntax

get currentIndex(): Number

Description

Note that the slide indices in a slideshow are zero-based, even though they are numbered starting from 1 in the Editor.

Type

Number

Examples

Get the name of the current slide's index

bGV0IGluZGV4ID0gJHcoIiNteVNsaWRlc2hvdyIpLmN1cnJlbnRJbmRleDsgIC8vIDMK
let index = $w("#mySlideshow").currentIndex;  // 3

See Also

currentSlide

currentSlide

currentSlide

Gets the slideshow's current slide.

Syntax

get currentSlide(): Slide

Type

Slide

Examples

Get the current slide and its name

bGV0IHNsaWRlID0gJHcoIiNteVNsaWRlc2hvdyIpLmN1cnJlbnRTbGlkZQoKbGV0IHNsaWRlTmFtZSA9IHNsaWRlLm5hbWU7IC8vICJTbGlkZSAxIgo=
let slide = $w("#mySlideshow").currentSlide

let slideName = slide.name; // "Slide 1"

See Also

currentIndex

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 is still not displayed if:

Even if the element is not displayed due to the conditions mentioned above, if its hidden property is set to false, it's 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

isPlaying

isPlaying

Indicates if the element is currently playing.

Syntax

get isPlaying(): boolean

Description

To set the isPlaying property on an element, use the element's play() and pause() functions.

If you select Autoplays on loading in the element's Settings panel in the Editor, the isPlaying property is set to true when the page loads.

Type

Boolean

Examples

Get an element's current playing status

bGV0IGlzUGxheWluZyA9ICR3KCIjbXlFbGVtZW50IikuaXNQbGF5aW5nOyAvLyBmYWxzZQo=
let isPlaying = $w("#myElement").isPlaying; // false

Toggle an element's current playing state

aWYoICR3KCIjbXlFbGVtZW50IikuaXNQbGF5aW5nICkgewogICR3KCIjbXlFbGVtZW50IikucGF1c2UoKTsKfQplbHNlIHsKICAkdygiI215RWxlbWVudCIpLnBsYXkoKTsKfQo=
if( $w("#myElement").isPlaying ) {
  $w("#myElement").pause();
}
else {
  $w("#myElement").play();
}

Mixed In From

$w.PlayableMixin

See Also

play( ), pause( )

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 is 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

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

showNavigationButtons

showNavigationButtons

Sets or gets whether a slideshow's navigation buttons are shown.

Syntax

get showNavigationButtons(): boolean
set showNavigationButtons(value: boolean): void

Description

Setting the showNavigationButtons property to true shows the slideshow's navigation buttons. Setting it to false hides the slideshow's navigation buttons.

Getting the showNavigationButtons property returns whether a slideshow's navigation buttons are shown or hidden.

Type

Boolean

Examples

Get whether navigation buttons are shown

bGV0IGFyZU5hdkJ0blNob3duID0gJHcoIiNteVNsaWRlc2hvdyIpLnNob3dOYXZpZ2F0aW9uQnV0dG9uczsgLy8gdHJ1ZQo=
let areNavBtnShown = $w("#mySlideshow").showNavigationButtons; // true

Set navigation buttons to be hidden

JHcoIiNteVNsaWRlc2hvdyIpLnNob3dOYXZpZ2F0aW9uQnV0dG9ucyA9IGZhbHNlOwo=
$w("#mySlideshow").showNavigationButtons = false;

Toggle whether navigation buttons are shown

bGV0IG15U2hvdyA9ICR3KCIjbXlTbGlkZXNob3ciKTsKbXlTaG93LnNob3dOYXZpZ2F0aW9uQnV0dG9ucyA9ICFteVNob3cuc2hvd05hdmlnYXRpb25CdXR0b25zOwo=
let myShow = $w("#mySlideshow");
myShow.showNavigationButtons = !myShow.showNavigationButtons;
showSlideButtons

showSlideButtons

Set or returns whether a slideshow's slide buttons are shown.

Syntax

get showSlideButtons(): boolean
set showSlideButtons(value: boolean): void

Description

Setting the showSlideButtons property to true shows the slideshow's slide buttons. Setting it to false hides the slideshow's slide buttons.

Getting the showSlideButtons property returns whether a slideshow's slide buttons are shown or hidden.

Type

Boolean

Examples

Get whether slide buttons are shown

bGV0IGFyZVNsaWRlQnRuU2hvd24gPSAkdygiI215U2xpZGVzaG93Iikuc2hvd1NsaWRlQnV0dG9uczsgLy8gdHJ1ZQo=
let areSlideBtnShown = $w("#mySlideshow").showSlideButtons; // true

Set slide buttons to be hidden

JHcoIiNteVNsaWRlc2hvdyIpLnNob3dTbGlkZUJ1dHRvbnMgPSBmYWxzZTsK
$w("#mySlideshow").showSlideButtons = false;

Toggle whether slide buttons are shown

bGV0IG15U2hvdyA9ICR3KCIjbXlTbGlkZXNob3ciKTsKbXlTaG93LnNob3dTbGlkZUJ1dHRvbnMgPSAhbXlTaG93LnNob3dTbGlkZUJ1dHRvbnM7Cg==
let myShow = $w("#mySlideshow");
myShow.showSlideButtons = !myShow.showSlideButtons;
slides

slides

Gets a list of all the slides contained in the slideshow.

Syntax

get slides(): Slide[]

Description

Note that the slide indices in a slideshow are zero-based, even though they are numbered starting from 1 in the Editor.

Type

Slide[ ]

Examples

Get a slidshow's slides

bGV0IG15U2xpZGVzID0gJHcoIiNteVNsaWRlc2hvdyIpLnNsaWRlczsK
let mySlides = $w("#mySlideshow").slides;

Get the slides, number of slides, and name of the first slide from a slideshow

bGV0IG15U2xpZGVzID0gJHcoIiNteVNsaWRlc2hvdyIpLnNsaWRlczsKCmxldCBudW1TbGlkZXMgPSBteVNsaWRlcy5sZW5ndGg7ICAgICAgICAvLyA3CmxldCBmaXJzdFNsaWRlTmFtZSA9IG15U2xpZGVzWzBdLm5hbWU7ICAvLyAiU2xpZGUgMSIK
let mySlides = $w("#mySlideshow").slides;

let numSlides = mySlides.length;        // 7
let firstSlideName = mySlides[0].name;  // "Slide 1"
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

changeSlide( )

changeSlide( )

Change the slideshow's current slide to a specific slide or index.

function changeSlide(slideReference: Number | Slide): Promise<Slide>

Description

The changeSlide() function returns a Promise that is resolved when the slideshow finishes moving from the current slide to the slide referred to by slideReference.

You can retrieve Slide objects to pass to the slideReference parameter from your slideshow using the currentSlide or slides properties.

If passing a number, note that slide indices in a slideshow are zero-based, even though they are numbered starting from 1 in the Editor.

Parameters

slideReference Number |
Slide
The slide to move to. Either the index of the slide or a Slide from the slideshow.

Return Value

Returns a Promise

On fulfillment Slide The slide that the slideshow changed to.

Throws

Error If no argument was provided or the argument is not a number or an existing slide.

Examples

Move to a new slide using an index

This example moves to the third slide in the slideshow.

JHcoIiNteVNsaWRlc2hvdyIpLmNoYW5nZVNsaWRlKDIpOwo=
$w("#mySlideshow").changeSlide(2);

Move to a new slide using a Slide object

This example moves to the slide that is stored in the slide variable.

JHcoIiNteVNsaWRlc2hvdyIpLmNoYW5nZVNsaWRlKHNsaWRlKTsK
$w("#mySlideshow").changeSlide(slide);

Moves to a new slide and logs a message when the move is finished

JHcoIiNteVNsaWRlc2hvdyIpLmNoYW5nZVNsaWRlKDIpCiAgLnRoZW4oIChuZXdTbGlkZSkgPT4gewogICAgY29uc29sZS5sb2coYERvbmUgbW92aW5nIHRvICR7bmV3U2xpZGUubmFtZX1gKTsKICB9ICk7Cg==
$w("#mySlideshow").changeSlide(2)
  .then( (newSlide) => {
    console.log(`Done moving to ${newSlide.name}`);
  } );
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( )

next( )

next( )

Moves to the next item.

function next(): Promise<Element>

Description

The next() function returns a Promise that is resolved when the next item is completely rendered. Calling next() when on the last item, moves to the first item.

Return Value

Returns a Promise

On fulfillment Element The newly displayed image or slide.

Examples

Move to the next item

JHcoIiNteUVsZW1lbnQiKS5uZXh0KCk7Cg==
$w("#myElement").next();

Move to the next item and log a message when done

JHcoIiNteUVsZW1lbnQiKS5uZXh0KCkKICAudGhlbiggKCkgPT4gewogICAgY29uc29sZS5sb2coIkZpbmlzaGVkIG1vdmluZyB0byB0aGUgbmV4dCBpdGVtIik7CiAgfSApOwo=
$w("#myElement").next()
  .then( () => {
    console.log("Finished moving to the next item");
  } );

Mixed In From

$w.PlayableMixin

See Also

previous( ), play( ), pause( )

onChange( )

onChange( )

Adds an event handler that runs when the slideshow moves to a new slide.

function onChange(handler: EventHandler): Slideshow
callback EventHandler(event: Event, $w: Function): void

Description

A slideshow moves to a new slide through user actions, such as clicking on navigation or slide buttons, or programmatically, using functions such as play(), previous( ), and next( ).

The event handler set by the onChange function is run immediately before the slideshow moves to the new slide. Therefore, reading the slideshow's currentIndex or currentSlide within the event handler function returns the index or slide that the slideshow is moving away from.

Parameters

eventHandler function(event, $w) The name of the function or the function expression to run when the slideshow moves to a new slide.
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

Slideshow The slideshow on which the event is now registered.

Examples

Get the index of the slide that the slideshow is moving away from

JHcoIiNteVNsaWRlc2hvdyIpLm9uQ2hhbmdlKCAoZXZlbnQsICR3KSA9PiB7CiAgbGV0IGN1cnJlbnRJbmRleCA9IGV2ZW50LnRhcmdldC5jdXJyZW50SW5kZXg7IC8vIDMKfSApOwo=
$w("#mySlideshow").onChange( (event, $w) => {
  let currentIndex = event.target.currentIndex; // 3
} );

See Also

changeSlide( ), previous( ), next( ), autoplay

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

onPause( )

onPause( )

Adds an event handler that runs when playback is paused.

function onPause(handler: EventHandler): Gallery | Slideshow
callback EventHandler(event: Event, $w: Function): void

Description

An element can be paused by a user clicking the gallery or slideshow's pause button or by calling its pause() function

Parameters

handler function(event, $w) The name of the function or the function expression to run when the element is paused.
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

Gallery Slideshow The gallery or slideshow that triggered the event.

Examples

Get the ID of the element that has been paused

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

Mixed In From

$w.PlayableMixin

See Also

pause( )

onPlay( )

onPlay( )

Adds an event handler that runs when playback is started or restarted.

function onPlay(handler: EventHandler): Gallery | Slideshow
callback EventHandler(event: Event, $w: Function): void

Description

An element can be played by a user clicking the gallery or slideshow's play button, by calling its play() function.

Parameters

handler function(event, $w) The name of the function or the function expression to run when the element is played.
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

Gallery Slideshow The gallery or slideshow that triggered the event.

Examples

Get the ID of the element that has is playing

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

Mixed In From

$w.PlayableMixin

See Also

play( )

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( )

pause( )

pause( )

Pauses playback.

function pause(): void;

Description

The pause() function pauses a slideshow or playable gallery and fires a pause event.

The pause event handlers set on this element by the onPause( ) function or in the Editor is called.

Examples

Pauses playback

JHcoIiNteUVsZW1lbnQiKS5wYXVzZSgpOwo=
$w("#myElement").pause();

Toggle an element's current playing state

aWYoICR3KCIjbXlFbGVtZW50IikuaXNQbGF5aW5nICkgewogICR3KCIjbXlFbGVtZW50IikucGF1c2UoKTsKfQplbHNlIHsKICAkdygiI215RWxlbWVudCIpLnBsYXkoKTsKfQo=
if( $w("#myElement").isPlaying ) {
  $w("#myElement").pause();
}
else {
  $w("#myElement").play();
}

Mixed In From

$w.PlayableMixin

See Also

play( ), onPause( )

play( )

play( )

Begins or resumes playback.

function play(): void;

Description

The play() function plays a slideshow or playable gallery and fires a play event.

The play event handlers set on this element by the onPlay( ) function or in the Editor is called.

Examples

Begins or resumes playback

JHcoIiNteUVsZW1lbnQiKS5wbGF5KCk7Cg==
$w("#myElement").play();

Toggle an element's current playing state

aWYoICR3KCIjbXlFbGVtZW50IikuaXNQbGF5aW5nICkgewogICR3KCIjbXlFbGVtZW50IikucGF1c2UoKTsKfQplbHNlIHsKICAkdygiI215RWxlbWVudCIpLnBsYXkoKTsKfQo=
if( $w("#myElement").isPlaying ) {
  $w("#myElement").pause();
}
else {
  $w("#myElement").play();
}

Mixed In From

$w.PlayableMixin

See Also

pause( ), onPlay( )

previous( )

previous( )

Moves to the previous image or slide.

function previous(): Promise<Element>

Description

The previous() function returns a Promise that is resolved when the previous image or slide is completely rendered. Calling previous() when on the first item, moves to the last item.

Return Value

Returns a Promise

On fulfillment Element The newly displayed image or slide.

Examples

Move to the previous item

JHcoIiNteUVsZW1lbnQiKS5wcmV2aW91cygpOwo=
$w("#myElement").previous();

Move to the previous item and log a message when done

JHcoIiNteUVsZW1lbnQiKS5wcmV2aW91cygpCiAgLnRoZW4oICgpID0+IHsKICAgIGNvbnNvbGUubG9nKCJGaW5pc2hlZCBtb3ZpbmcgdG8gdGhlIHByZXZpb3VzIGl0ZW0iKTsKICB9ICk7Cg==
$w("#myElement").previous()
  .then( () => {
    console.log("Finished moving to the previous item");
  } );

Mixed In From

$w.PlayableMixin

See Also

next( )

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

JHcoIiNteUVsZW1lbnQiKS5zaG93KCJmYWRlIik7Cg==
$w("#myElement").show("fade");

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

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

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

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

JHcoIiNteUVsZW1lbnQiKS5zaG93KCJmYWRlIikKICAudGhlbiggKCApID0+IHsKICAgIGNvbnNvbGUubG9nKCJEb25lIHdpdGggZmFkZSIpOwogIH0gKTsK
$w("#myElement").show("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

hide( ), hidden, expand( )