How to Add Custom Interactions with JavaScript | Velo by Wix

In this video, we'll show you how to create custom interactions on your site with WIX code. Using simple JavaScript, we'll demonstrate how to create custom interactions such as making a tooltip and hex box appear on hover and having a gallery expand and collapse on click. We will start by going into the Editor with Developer tool for Dawn. Notice the Properties panel. Here it presents different options and events you can set for each element selected to create the custom interaction shown in this video, we will use the following events from the Properties onmousein and onmouseout to define what happens when an element is hovered over and on. Click to define what happens when clicking on an element. The code panel is the place where we will write, edit and define the code we need. We will use the following show hide to make elements come in and out of view and expand collapse to make entire sections of the page fold up and down. Let's get started. Hover effects are great for when we want something like a tooltip or a text box to appear when a visitor hovers over an element. In this example, we'll create a tooltip with the building name and a short description when visitors hover over the campus map. We do that by handling two events which control what happens when an element is hovered on onmousein and onmouseout, as seen here in the Properties panel. Then in the code panel, we can assign a set of actions that will take place when these events happen. Here's how we do it in the editor, we've created this page that has various elements which make up the building tooltips and textbox. We will also place a transparent box on the top of the elements to act as our hover zone. Let's call it Dorms box under the Properties panel. Here we've given the tooltip and textbox meaningful names which will help us later when we use them in the code. We will also check this box so that they are hidden on load. Now let's add the events onmousein and onmouseout for our hover zone, which is the transparent box we added earlier. This will generate two separate functions for each event in the code panel, like you see here. Next, we need to connect the tooltip behavior to the events in the code panel. Let's start with onmousein. This will open the code completion panel with a list of all the elements on the page. This is where giving elements a meaningful name comes in handy. From this list we'll choose Dorms Tooltip. Then we enter Period to receive a list of available functions, scroll to find the function needed. In this example, it is show notice on the right. A description appears with more details about each function. Now let's connect on mouse out, type $w and enter control plus space from the keyboard, choose Dorms tooltip, Enter period. Choose the function hide to make the tooltip disappear when the mouse moves away. Now let's add code that will make the text box also show up. When we're hovering over the building, we'll click on the text and in the Properties panel here we'll check the box hidden on load in the code panel. Under the existing onmousein and onmouseout events, we'll add the code to show and hide the text on hover like we did with the tooltip. Let's preview to see how it works. Now, whenever a visitor mouses over the building, the tooltip and text box will appear. Expanding and collapsing sections on your site are useful when you want to keep things neat, organized, and some of the content folded until a visitor asks to view it by clicking on a button. In this example, we're using two grid galleries, two arrow shapes, one up and one down, and title text that have already been added to our site. In the WIX editor, we want one gallery to be visible on load and the other gallery collapsed that it will only expand on. Click first we'll select the gallery we want to have collapsed when visitors enter our website, and in the Properties panel here we'll give it a name, Alumni Gallery two and check Collapsed onload, we'll select our arrow shape and in the Properties panel here call it Expand Shape. Click on the plus sign next to on click and the beginning of the code will be automatically added to the panel. We want the arrows to have the following actions on click Expand and Collapse Gallery, we will type $w control space, select alumni gallery 2, type period and use the expand function on the gallery to make it expand. When clicking the downward arrow to collapse a gallery, we will repeat the process for the on click event of the upward arrow and use the opposite function collapse. We can also add code so that clicking on each arrow will replace it with the other, as well as displaying the appropriate text. Let's have one last preview to see it in action. Now you're ready. This video is always here, so come back and watch again for more help.