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 tool tip and text 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 panel on mouse in and on mouse out 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 functions 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 tool tip or a text box to appear when a visitor hovers over an element in this example we’ll create a tool tip 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 on mouse in and on
mouse out 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 map building tooltips and text box we will also place a transparent box on the top of the elements to act as our hover zone let’s call it dorm’s box under the properties panel here we’ve given the tool
tip and text box 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 on mouse in and on mouse out 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 on mouse in 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
dollar sign w and enter control plus space from the keyboard choose dorm’s tool tip 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 on mouse in and on mouse out 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 tool tip 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 asked 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 2 and checked 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 dollar sign w control plus 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 the 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