Hello,
I just started working with “code” in velo. I’ve only successfully gotten 1 action to work with code. I do understand that syntax & structure are very important. I have read and watched a few videos. I plan to do alot more of this. Right now though I really need what I’m calling a “talking button”. I need my button to do several things. Actions onMouseIn such as change .label. Maybe “bounce” after a time interval. I also need it to have pop-up bubbles, which I’ve not found the technical term for. After a certain amount of time that a user is on a page, I want the button to pop-up a few words in a bubble, like chat icons do “click here for help”, etc. Now what I’m not understanding is how to link or combine actions. Again so far, I’ve gotten the button to “float” away upon user entering page. I deleted this code prior to copying it (as it’s not the effect I really wanted), and have not gotten it to work again. This brings me to wonder if there is not a bug in the velo compiler itself. I’m also having problems with the editor-x color picker being stuck in the corner, rendering it almost useless. I have screenshots of some code, as well as the color picker being stuck. I can’t drag it into position. I have restarted my browser and cleared my browser history/cache. Here are some screenshots. Any help is appreciated.
This photo (above) is my color picker simply stuck. I can not move it into position to use it. I’ve tried changing the color with code and it don’t work. You can also see the button in question in the center of the screen. Currently Blue.
Here is some code. I believe is slightly wrong. Changes I tried were. Line 2 ending like this (float);
Line 3 “duration” = 5000. I found similar code in velo documentation. Just can’t get it to work.
2 questions on this screenshot. First: Is that red ~ (which when played with becomes the squiggly lines under misspelled words) supposed to be there? I can’t get rid of it. Second: Is this Dollar w basically a pointer if I’m understanding correctly. It points to an element. onReady always necessary when entering code? For instance in the next photo, which is copyable from velo documentation that starting code is not there.
This starts at line 1 and does not start with the onReady. I do understand that the first line is telling the code to use wix animation api. This next example starts on line 1 and calls on no api prior to calling on the style attribute. What am I missing?
The copyable code on the right does not call on any api prior to addressing the style of the element. If I copy & paste this code, changing the element Id of course to my buttons id. It does not work for me. Any reasons?
This post is getting long enough. I feel pretty dumb right now, but I know if I get the understanding of the syntax and structure of this coding. I will do great things. Please help. Thanks in advance to all volunteers. Dan
Hey! Dan 
It’s great to hear you’re starting to use Velo. It’s an awesome tool that unlocks a whole world of potential.
Firstly, here are some quick links to resources that might be beneficial for you:
Velo Resources for Getting Started:
API Reference: API Overview - Velo API Reference - Wix.com
Wix Learn: https://www.wix.com/learn/online-course/coding-with-velo/start-coding-with-velo
Help Center: What is Velo? | Help Center | Wix.com
Free Codecademy Course: Create a Professional Website with Velo by Wix | Codecademy
Free Udemy Course: https://www.udemy.com/course/corvid-for-wix-part-1-editor-and-corvid-basics/
Video Tutorials: https://www.wix.com/velo/video-tutorials
Velo Examples: https://www.wix.com/velo/examples
Velo Glossary: Velo Glossary | Help Center | Wix.com
Velo Blog: https://www.wix.com/velo/blog
Velo Forum: https://www.wix.com/velo/forum
How to Submit a Bug: https://www.wix.com/velo/forum/coding-with-velo/how-to-report-a-bug-1
Velo Wishlist: https://www.wix.com/velo/wishlist
And in answer to the questions/photos:
Photo 1 - Likely a local issue (happening to you only). I recommend clearing your cache and refreshing the page. If that doesn’t work, get in contact with Wix Support.
Photo 2 - Here’s a link to the Velo API docs that should point you in the right direction - https://www.wix.com/velo/reference/$w/hiddencollapsedmixin/show
If the docs don’t help here’s some things to note:
-
Currently, your calling the onViewportEnter event handler, however, it doesn’t define an element to trigger it, so nothing’s happening.
-
You’re currently telling the haggleButton to hide and then immediately telling it to show.
-
If your code has a red line under it, there’s likely a syntax issue
Here’s how I would format it:
$w.onReady(function () {
let floatOptions = {
"duration": 5000
};
$w('#elementID').onViewportEnter(() => {
$w('#haggleButton').show("float", floatOptions)
});
});
Photo 3 - You’re seeing that red line as the onReady has not been closed. You’re missing a }) at the end
$w is a selector. It’s how we tell the code to choose that element
Most code will be contained within a function or within onReady.
Photo 4 - For us to use API’s from the Velo API docs, we need to import them to be able to use them. If you’re changing attributes of elements, you’re not likely going to need to import an API. Styling an element doesn’t require any additional API.
Photo 5 - This is simply showing you how to style an element. In order to style the element you will need to put this within an onReady. You have to wait for the page to load in order for the code to be useable. The code would potentially look like this:
$w.onReady(function () {
$w("#myElement").style.backgroundColor = "rgba(255,0,0,0.5)";
});
Thank you very much. I am getting the hang of it more and more. The syntax is new to me of course. Structure as you see, I am not familiar with. I am getting some things to work. My button currently gets angry (grows & changes color to red/black). I am wondering how you stack functions. Can I put several functions inside one onReady command if I call on several api’s from the start? Such as animation helpers and whatnot, possibly help or chat bubbles? Or do I have to use new onReady commands each step? Thanks again for your help. Dan
Put multiple functions within onReady. You should only ever have 1 onReady per page.
It might look something like:
$w.onReady(function(){
$w("#Button").onClick((event) => {
$w("#Box").show();
});
$w("#Button").onClick((event) => {
$w("#Box").show();
});
});
