You're not eligible to view this page. Click here to access this course or Log In if you've purchased it already

Basic Codes

Hide & Show/onclick

This tutorial shows you how to work with hide/show with a given button.

In this example we will be using a button that once clicked will show a second button.

The second button is "Hidden on load", which means that when the page is ready and loaded the 2nd button won't appear, but it will show only if the 1st Button is clicked.

Click on the "button 1" to see this in action.

*** REMEMBER TO ACTIVATE THE onClick event for Button 1 from the Properties Panel, check the image below to guide you ***

wix properties Panel.png

Check the image as reference

Button 1
Button 2

Try again

Page code:

$w.onReady(function () {

    //TODO: write your page related code here...

$w("#button2").hide();

});

 

export function button1_click(event) {

$w("#button2").show();

}

Collapse & expand

This tutorial shows you how to work with collapse/expand with a given button.

In this example we will be using a button that once clicked will expand a second button.

The second button is "Collapsed on load", which means that when the page is ready and loaded the 2nd button won't appear, but it will expand only if the 1st Button is clicked.

Click on the "button 1" to see this in action.

*** REMEMBER TO ACTIVATE THE onClick event for Button 1 from the Properties Panel, check the image below to guide you ***

wix properties Panel.png

Check the image as reference

Button 1
Button 2

Try again

Page code:

$w.onReady(function () {

    //TODO: write your page related code here...

$w("#button2").collapse();

 

});

 

export function button1_click(event) {

$w("#button2").expand();

}

mousein & mouseout

This tutorial shows you how to work with onMouseIn/onMouseOut with a given button.

In this example we will be using a button that once moused In will show a second button and will be hidden again once the 1st button is moused out.

The second button is "Hidden on load", which means that when the page is ready and loaded the 2nd button won't appear, but it will show only if the mouse will be on the 1st Button.

Hover your mouse on the "button 1" to see this in action.

*** REMEMBER TO ACTIVATE THE onMouseIn and the onMouseOut events for Button 1 from the Properties Panel, check the image below to guide you ***

onmousein and onmouseout.png

Check the images as reference

Button 1
Button 2

Page code:

$w.onReady(function () {

    //TODO: write your page related code here...

$w("#button2").hide();

});

 

export function button1_mouseIn(event) {

$w("#button2").show();

}

 

export function button1_mouseOut(event) {

$w("#button2").hide();

}

mousein & mouseout 2

This tutorial shows you how to work with onMouseIn/onMouseOut with a given button.

In this example we will be using a button that once moused In will show a second button but won't be hidden once the 1st button is moused out, instead it will be hidden only once we mouse out from button 2.

The second button is "Hidden on load", which means that when the page is ready and loaded the 2nd button won't appear, but it will show only if the mouse will be on the 1st Button.

Hover your mouse on the "button 1" and mouse out from button 2 to see this in action.

*** REMEMBER TO ACTIVATE THE onMouseIn event for Button 1 and the onMouseOut for Button 2 from the Properties Panel, check the image below to guide you ***

Check the images as reference

Button 1
Button 2

Page code:

$w.onReady(function () {

    //TODO: write your page related code here...

$w("#button2").hide();

});

export function button1_mouseIn(event) {

$w("#button2").show();

}

 

export function button2_mouseOut(event) {

$w("#button2").hide();

}

Screen Shot 2019-09-30 at 7.33.14 PM.png
Screen Shot 2019-09-30 at 7.33.31 PM.png

viewportenter/

viewportleave

This tutorial shows you how to work with onViewportEnter/onViewPortLeave using a button.

In this example once we scroll down till the text "Check the image as reference", a button will appear and once we navigate on a different either up or down far from the button, this will disappear.

The button is "Hidden on load", which means that when the page is ready and loaded the button won't appear, but it will show only if we scroll until his position on the screen.

Scroll slowly down and up to see this in action.

*** IN THIS EXAMPLE we used two new functions that are "FadeIn"  and "FadeOut. These effects will  show and hide the button in a more professional way.***

Screen Shot 2019-09-30 at 8.03.00 PM.png

Check the image as reference

Button

Page code:

$w.onReady(function () {

    //TODO: write your page related code here...

$w("#button1").hide();

});

 

export function text1_viewportEnter(event) {

$w("#button1").show("FadeIn");

}

 

export function text1_viewportLeave(event) {

$w("#button1").hide();

}

onclick

This tutorial shows you how to work with the onClick event using 2 text boxes.

For this example we will be using two texts: TEXT1 and TEXT2 (which can be added from Add>Text). The first Text  which says "Show Text 2" if clicked will reveal another text saying "Text 2" which is hidden on load.

To see this code in action, click on text1.

*** REMEMBER TO ACTIVATE THE onClick event for the text1 from the Properties Panel, check the image below to guide you ***

Check the image as reference for text1

Screen Shot 2020-03-06 at 12.25.12 AM.pn

SHOW TEXT 2

TEXT2

Try again

Page code:

$w.onReady(function () {

    //TODO: write your page related code here...

$w("#text2").hide();

});

export function text1_onClick(event) {

 

    $w("#text2").show();

}

onchange

This tutorial shows you how to work with the onChange event using a dropdown list.

For this example we will be using a dropdown with 3 color options: Blue, Red  and Yellow and a text that changes text matching the dropdown choice selected (you can find this inside the vertical menu on the left in: Add>User Input>Selection.

The onChange event is used to trigger a certain code once the user choose an option from the dropdown list. To achieve this we will be using the IF/ELSE javascript statement, which means "if this happens then let that happen".

*** REMEMBER TO ACTIVATE THE onChange event for the dropdown from the Properties Panel, check the image below to guide you ***

Screen Shot 2019-10-04 at 12.56.52 AM.pn

Check the image as reference

arrow&v

COLOR

Page code:

$w.onReady(function () {

    //TODO: write your page related code here...

});

export function dropdown1_change(event) {

if ($w("#dropdown1").value === "Blue") {

        $w("#colorTxt").text = $w("#dropdown1").value

 

    } else if ($w("#dropdown1").value === "Red") {

        $w("#colorTxt").text = $w("#dropdown1").value

 

    } else if ($w("#dropdown1").value === "Yellow") {

        $w("#colorTxt").text = $w("#dropdown1").value

    }

}

onchange 2

This tutorial shows you how to work with 2 dropdown.​

We will be using Dropdown A and Dropdown B. The Dropdown B is "disabled on load" and will get enabled only when the user has selected an item from dropdown A.

Check the live example below to see this in action. Select an option from Dropdown A to enable Dropdown B)

*** REMEMBER TO ACTIVATE THE onChange event for the dropdownA from the Properties Panel, check the image below to guide you ***

Check the image as reference

arrow&v
arrow&v
Screen Shot 2019-10-06 at 4.14.13 PM.png

Try again

Page code:

$w.onReady(function () {

    //TODO: write your page related code here...

$w("#dropdownB").disable();

});

 

export function dropdownA_change(event) {

$w("#dropdownB").enable();

}

onkeypress

This tutorial shows you how to work with the onKeyPress event using an input.

For this example we will be using an input (which can be added from Add>User Input>Selection>Input and a dropdown which will be hidden on load) that if contains any character will show the hidden dropdown, else will keep the dropdown hidden.

The onKeyPress event is mainly used to trigger a certain code the user chooses starts typing inside the input. 

To see this code in action, type any character inside the user input to show the dropdown and delete the characters to hide the dropdown.

Also, in this code we included the setTimeout Javascript function which is explained in details here.

*** REMEMBER TO ACTIVATE THE onKeyPress event for the input from the Properties Panel, check the image to guide you ***

Screen Shot 2019-10-06 at 4.58.35 PM.png

Check the image as reference

arrow&v

Page code:

$w.onReady(function () {

    //TODO: write your page related code here...

$w("#dropdown1").hide();

});

export function input1_keyPress(event) {

    setTimeout(() => {

        let val = $w('#input1').value;

        if (val === '') {

            $w("#dropdown1").hide();

        } else {

            $w("#dropdown1").show();

        }

    }, 40);

}