Σ Sigma Hosting is mainly a video tutorial website

Σ Sigma Hosting is mainly a video tutorial website that make it easier for you to search within the transcript of videos for solutions of problems you might face during your journey in dealing with different webhosting companies. So, we are very sorry if the text is not well organized and we may work on it in the future but for now we hope you get the benefit mainly from the video then you may need to have a look on the transcript. Thanks for your understanding 🙂

in this video we'll show you how to create custom interactions on your site using simple JavaScript with custom interactions you can control how elements on your site like buttons images and shapes respond to visitor actions like clicking and hovering by adding a few simple lines of JavaScript in this video we'll demonstrate how to create custom interactions such as making a tooltip and textbox appear on hover and having a gallery expand and collapse on click we will start by going into the editor 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 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 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 dorms box under the properties panel here we've given the tooltip 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 onload 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 will choose dorms tooltip then we enter quotation period quotation 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 ctrl + space from the keyboard choose dorms tooltip enter quotation period quotation choose the function hide to make the tooltip disappear when the mouse moves away now let's add code that will make the textbox 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 onload 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 Mouse's 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 asked to view it by clicking on a button in this example we're using two grid galleries to arrow shapes one up and one down and title texts that have already been added to our site in the Wix editor we want one gallery to be visible unload and the other gallery collapsed that it will only expand unclick first we'll select the gallery we want to have collapsed when visitors and our website and in the properties panel here will give it a name alumni gallery – 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 ctrl + space select alumni gallery to type quotation period quotation 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 or 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 you can view the code for these actions here let's have one last preview to see it in action you now you're ready this video is always here so come back and watch again for more help you can also visit our resources page for tutorials articles example code and more .

Video Discription

To learn more visit:

Watch how an art and design academy uses Corvid to create custom interactions by adding a few lines of JavaScript to control how elements on their site respond to visitors actions. A tooltip and a short description appear when visitors hover over the campus map, giving visitors more information about each building. Additionally, a gallery element expands and collapses as visitors explore the alumni gallery.

About Corvid:
Corvid is an open development platform that lets you build advanced web applications. With serverless computing and hassle-free coding, you can manage all your content from integrated databases, add your own code in the built-in IDE or work in your own environment, and connect to 100s of APIs. Plus, you get total design freedom from the Wix Editor and optimized business applications—all in one integrated platform. Build, manage, deploy and scale your next web project with Corvid.

Corvid—Accelerated Development of Web Applications

About Wix:
Wix.com lets everyone create a professional website for free. Choose a template, customize anything and get online today! No matter what business you’re in, Wix lets you create the exact website you want with our intuitive drag and drop website builder. Get stunning designer-made templates, 1000s of free images in the Wix Collection, SEO tools and tons of storage. Best of all, your Wix site is mobile optimized, so your visitors can see it anytime, anywhere.

New to Wix?
Create your own professional website today.

 

Leave a Reply