Wix Built-in Methods and Functions

Introduction

In this article, you’ll dive deeper into working with previously encountered Wix elements. Using Wix’s built-in methods, you can write code to change components of a Wix website and create an engaging, interactive website that will captivate your customers or visitors.

Refresher: The .onReady() Function

Like the other examples of working in the Code Panel that you saw, Wix gives you the following default code, along with some comments, in all the files that make up a Wix site:

$w.onReady(function () {
    
});

Remember that the purpose of this starter code is to run any code you place between the {…} after the elements on the page have loaded. Using $w.onReady(), you can then write code to “listen” for user-initiated events and then make changes to your website based on that action. If you’ve ever visited a website and clicked on a button that led to a pop-up, someone wrote code to listen for your click to make that pop-up appear. This event-driven programming allows you to create more sophisticated experiences for visitors to your website.

If you’d like to learn more about the $w namespace and its associated methods including .onReady(), take a look at the Wix Velo API documentation. For now, just keep in mind that whatever code is being added in the examples throughout the article will always be wrapped inside this method call to .onReady().

Refresher: Methods and Objects

To use the built-in Wix methods, it’s essential to know what objects and methods are. You’ve already seen a few examples of a method in action even if you might not have realized it at the time, like: console.log()! When you look a little deeper, .log() is also a method that is associated with an object called console:

In the image above, the object is console. Objects have properties in which values and functions can be stored. When a property of an object is a function, it’s called a method.

All methods in JavaScript work in the same way that console.log() does: appending the dot operator, ., to the object name followed by the method name and parentheses with any arguments.

Besides console.log(), you’ve also seen at least one Wix method already, too: .onReady()! .onReady() is a method of the $w object, and it takes another function as an argument. Using functions as arguments, along with more in-depth topics about objects and methods, will be covered in later material.

With that said, let’s look more closely at methods that are built-in to Wix elements. Since they’re already defined and included in Wix elements for you, it’s easy and simple to use these methods to alter the appearance or behavior of your Wix site to add effects like animation. We’ll go over several commonly used methods for Wix elements: .show(), .hide(), .onClick(), .onMouseIn() and .onMouseOut() and how to use them with examples.

Setting Up: Using Methods

Before you can use, or invoke a method, you’ll first have to select a Wix element to use it on. This is important because you need to specify which element you want to act on and different Wix elements have different built-in methods. To refresh your memory, let’s take a look at how to select a Wix element by selecting a button element.

To select the button elements, you need to use the selector function: $w(). The $w namespace gives you access to all the available Wix elements on that page when invoked as a function with a selector string between the parentheses (…).

The examples in this article use the ID name to select an element. Remember that you must pass in the selector string in quotes and that the ID it is always preceded by a #:

const submitBtn = $w('#button');

In the example here, the element selected is saved as a constant variable, submitBtn. This allows you to select the element and later, apply other methods without rewriting the same code.

Now that you’ve selected an element, you can invoke a method.

Hiding Elements

Let’s start with one of the most common actions, hiding an element after some user interaction. Hiding an element from a website page can simplify the navigation of a website and redirect users’ attention. For example, imagine an e-commerce store with a limited-time sale. You might want to hide the sale items on the website immediately after the sale is over. If an element ever needs to be hidden, the .hide() method is available. The syntax for using the .hide() method is:

element.hide()

When the page of the website loads, any elements you call .hide() on will be instantly hidden from view. In the example below, when the following code is run the button is hidden when clicked. You’ll learn more about the .onClick() method later in this article, but for now, take a look at the code inside of it to see an example of how to hide an element:

const clothingBtn = $w('#clothingButton');

clothingBtn.onClick((event) => {
  // The code below hides the button
  clothingBtn.hide();
});

That’s all you need to do to hide an element. But maybe you want to have a more subtle change or animation. Wix also makes this easy by allowing you to pass in options regarding the animation of your element disappearing as an object. You’ll learn more about objects in JavaScript later on but if you’re curious and want to try customizing hiding elements, use the syntax in the example code below. For example, an animation that gradually hides the Wix element from view can be achieved by passing the string “fade” or customizing the duration and delay of the animation. The syntax for .hide() is:

element.hide(animation, options);

The following code gradually fades the button when it is clicked. Note the code inside of .onClick() that saves the options of the “fade” animation and how they are passed to the .hide() method:

$w.onReady(function () {
  const clothingBtn = $w('#clothingButton');

  clothingBtn.onClick( (event) => {
    // The code below fades out the button
    const fadeOptions = {
      duration: 1000,  // how long to play the animation in milliseconds
      delay: 250  // how long to wait before playing the animation in milliseconds
    };

    clothingBtn.hide('fade', fadeOptions);
  });
});

Before moving on, it’s important to know that hiding an element on a website only hides it from the view of the user. The element still exists and has not been removed from the website.

Showing Hidden Elements

One reason you would want to hide an element but not remove it from a website is that you might want to show it later, depending on certain conditions. Some examples of this might be customizing content based on user location or hiding out of stock items in an e-commerce store until they become available.

To reveal a hidden element, use the .show() method. The syntax for using this method is:

element.show()

In the example below, the button is set to “hidden on load” in the Wix Editor, but the code using .show() reveals it:

$w.onReady(function () {
  const clothingBtn = $w('#clothingButton');
  clothingBtn.show();
});

Just as with .hide(), .show() has a variety of options to alter the animation of your element reappearing.

Listening for Clicks

You’ve already seen the .onClick() method in previous code examples in this article. This is a key event listener method that listens for a user clicking and releasing their mouse on an element. Unlike the previous two methods, .onClick() doesn’t affect the elements of a website on its own or run as soon as a website is loaded. Instead, this method only runs a given function or block of code when a user clicks on a specific element. This is important because it allows you to run actions in response to how a user behaves.

To use .onClick(), the syntax is the following:

element.onClick((event) => {
  // Run code after a user clicks on the element
});

Think back to the example of an online clothing store. You might want to only show items of clothing to a user if they are interested in them but otherwise hide them. Using a button that listens for clicks could help you customize what you show.

Running this example code will change whether the clothing section with images is displayed based on clicks:

const clothingSection = $w('#clothing');

clothingSection.hide();

$w('#clothingButton').onClick((event) => {
  // Check if clothingSection is currently hidden
  if(clothingSection.hidden) {
    clothingSection.show();
  } else {
    clothingSection.hide();
  }
});

Mousing In

In addition to .onClick(), there are other methods that run code in reaction to mouse actions. A common one, is .onMouseIn(). This method will run a given function when a user moves a mouse pointer onto an element.

.onMouseIn() is a useful method when you want to highlight a part of a web page or catch the attention of a user when the pointer is above an element. In the example here, when a user mouses onto the button, its color changes.

The syntax for the .onMouseIn() method is:

element.onMouseIn((event) => {
  // Code to do something
});

The .onMouseIn() method in the example waits for the pointer to go onto an element and then executes code to change the button’s color:

const clothingBtn = $w('#button');

clothingBtn.onMouseIn((event) => {
  clothingBtn.style.backgroundColor  = 'lightblue';
});

Mousing Out

In the GIF above, you’ll notice that the color of the button stays blue when the mouse pointer leaves the element. Once the user mouses off the button, there’s no need to have it highlighted and it should change back to its original color.

To help with that, there is a complementary method to .onMouseIn() called .onMouseOut(). This method runs a given function when a user moves a mouse pointer off an element. The syntax for .onMouseOut() works similarly to .onMouseIn():

element.onMouseOut((event) => {
  // Code to run
});

Running the following code results in the button changing from white to blue when the pointer enters the button and back to white when it moves off the button:

const clothingBtn = $w('#button');
// Change on mouse in
clothingBtn.onMouseIn((event) => {
    clothingBtn.style.backgroundColor  = 'lightblue';
});


// Change on mouse out
clothingBtn.onMouseOut((event) => {
  clothingBtn.style.backgroundColor = 'white';
});

Recap

To recap, in this article you learned the following Wix methods:

• .hide() to hide Wix elements
• .show() to show Wix elements
• .onClick() to listen for clicks on a mouse
• .onMouseIn() to listen for a mouse pointer entering an element
• .onMouseOut() to listen for a mouse pointer leaving an element

Although we focused on the Button element in this article, remember that you can use methods with other Wix elements since they share identical or similar methods. Some elements you should also look at and experiment with are the Box, Text, and Image elements. When working with new or unfamiliar methods, remember that you can always check the Wix documentation for more information and examples.

Going Further

If you’d like to continue practicing Wix methods, use the Wix documentation to try out the following with your own Wix site:

• .onDblClick(), a method that listens for double clicks on any element. Try combining this method with at least one of the other Wix methods we covered in this article, like .hide() or show().
• .scrollTo() , a method that adds animation to scroll to an element. Try writing code that listens for a user to click on an image and then scrolls to a related section of text.
• Use the Wix documentation linked in the previous sections to find the options for methods like .show() and .hide() and alter the duration, delay, and type of animation of an element on your web page.