Index of Velo Examples

For your convenience, we’ve created an index of our top Velo examples. We’ll be updating the index regularly, so check back here often.

UPDATE: Due to the release of our redesigned Example page, we’re deprecating this article. Check out our new Examples page and see what you can do with Velo!

14 Likes

Hi, I am looking for a way to let visitors to download a PDF file directly from the webpage to the computer through the “save as” dialog box. Is there any idea for that?

Hi @kimkin ,
You can add download functionality to your site without code. See here .

@talyaro ,
I have added the Document Button for PDF, but this button is also open the PDF on the browser first and visitor has to save it from the browser. I need a way when visitor click on this button/a hypertext, the “Save as” dialog box open (pop up) and save it first on his PC and then open it from his own computer.
The main problem is because we cannot change the all documents url through the Wix.com!!

@talyaro ,
I want this window will open


or please let me know if I can change the document url on the browser:

Hey @kimkin ,
You can use Wix Location to force a download. You can also specify a filename for the downloaded document. Whether the “Save as” dialog box opens depends on your visitors’ browser settings for downloads.

  1. Copy the document’s URL from My Uploads.

  2. Add an onClick event handler to your button in the Properties panel.

  3. Add the following code:

import wixLocation from 'wix-location';

export function button1_click(event) {       
    wixLocation.to("MyCopiedDocumentURL?dn=MyChosenFileName");
}

I have looked for a tab element for pages and found here the example of show-hide, which might provide a similar function. But our interest is to have different Google Event Calendar apps for each “tab” or for the list of selections to show-hide. It isn’t clear to me how (or even if) different instances of the app can be placed in the hide-show code (instead of different images or text literals). What kind of elements can be shown-hid?

Thanks for any observations about this.

Hey @dsac
You can use the show() & hide() functions on most elements.

Simulate tabs on your site with Google Event Calendars as follows:

  1. Add as many Google Event Calendars as you want, and layer them on top of each other.

  2. Add a button for each calendar on top. These are the “tabs”.

  3. Add an event handler to each button via the Properties panel that shows the corresponding calendar and hides all other calendars. For example:

export function button1_click(event) {
    $w('#googleEventCalendar1').show();
    $w('#googleEventCalendar2').hide();
    $w('#googleEventCalendar3').hide();
}

BTW, soon we’ll be releasing a new element that makes it even easier to simulate tabs on your site, so stay tuned!
Tova

That’s tremendous, @talyaro ! I’m eager to put this in place and see how it looks in mobile as well.

Thanks so much.

@talyaro – I apologize for coming back with this problem. It looked like it would be straightforward to install the code you provided. I have gotten errors which I am including in code block here.


static.parastorage.com/services/wix-code-code-editor/1.120.0/static/js/codeEditor.js:1
Uncaught (in promise) TypeError: Cannot read property ‘getValue’ of undefined
at r (worker.js:1)
at worker.js:1
at b (worker.js:1)
at Generator._invoke (worker.js:1)
at Generator.e. [as next] (worker.js:1)
at r (worker.js:1)
at worker.js:1
at new Promise ()
at Object. (worker.js:1)
at Object.getTypeAtPosition (worker.js:1)
wixcode-worker.js:17
public/pages/ma5m6.js: ‘import’ and ‘export’ may only appear at the top level (5:1)
3 | $w.onReady(function () {
4 | //TODO: write your page related code here…

5 | export function button9_click(event) {
| ^
6 | $w(‘#googleEventCalendar1’).show();
7 | $w(‘#googleEventCalendar2’).hide();
8 | // $w(‘#googleEventCalendar3’).hide();
e. @ wixcode-worker.js:17
wixcode-worker.js:17
Loading the code for the CALENDARS page. To debug this code, open ma5m6.js in Developer Tools.
console.js:35 public/pages/ma5m6.js: ‘import’ and ‘export’ may only appear at the top level (5:1)
3 | $w.onReady(function () {
4 | //TODO: write your page related code here…
5 | export function button9_click(event) {
| ^
6 | $w(‘#googleEventCalendar1’).show();
7 | $w(‘#googleEventCalendar2’).hide();
8 | // $w(‘#googleEventCalendar3’).hide();
e. @ console.js:35
console.js:35 Loading the code for the CALENDARS page. To debug this code, open ma5m6.js in Developer Tools.
75[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See


As you can probably see, I copy/pasted the code you provided twice (one each for two buttons) and renamed the buttons to 9 and 10 per what I inserted. I then added the event handlers in Properties for the two buttons I added.
The error(s) occurred when I went to Preview mode.

The site–Dems–is unpublished.

I will very much appreciate any guidance you can provide regarding this.

Thanks!

Hey @dsac

From the error I can see that you added @talyaro 's code inside the onReady function for your page. You can’t copy paste all of her code because it includes some code the system needs to create for you automatically, and it can’t exist inside the onReady.

What you need to do is the following, in this order:

  1. Set up the page as Tova explained.
  2. Add the event handlers using the properties panel - this will add a function to your code panel underneath your onReady function.
  3. Inside the function that gets created, which will start with “export function”, under where it says “//Add your code for this event handler here:” Add the code @talyaro gave you but just these lines:
    $w('#googleEventCalendar1').show();
    $w('#googleEventCalendar2').hide();
    $w('#googleEventCalendar3').hide();

You don’t want to copy the line that starts with “export” because we automatically make it for you when you add the event handler using the properties panel.
4. For each button’s event handler, you need to switch which calendar you are showing or hiding. So for the button for calendar 2 the code would be:

    $w('#googleEventCalendar1').hide();
    $w('#googleEventCalendar2').show();
    $w('#googleEventCalendar3').hide();

If you are going to work with this functionality I would strongly recommend (read “it’s critical”) you read this article: Velo: Reacting to User Actions Using Events | Help Center | Wix.com. It will give you a good understanding of how and why all this works and help you avoid some common mistakes.

  • Jeff

Thanks so much. I have it working now. Need to research setting the color of the buttons to correspond to which is selected/active.
Regarding buttons (rather than tabs), in mobile the buttons stack, so that the content gets pushed down out of view, which works against the purpose of the show-hide. I believe that tabs in mobile become a dropdown – is that right? If so, tabs might be better if there are more than a couple of buttons. Is there a link you have that gives guidance about setting up tabs, or is that difficult, which is why Tova suggested the code for show-hide with buttons?

Thanks again.

Hey @dsac ,

I don’t think tabs change in mobile, but I may be wrong. You have to create a tabs effect using other elements. See this post for an example: https://www.wix.com/corvid/forum/community-discussion/tabs-menu

The simplest solution to changing the appearance of a selected button would be to enable the non-selected ones and disable the selected ones. See here for more info: https://www.wix.com/corvid/reference/$w.Button.html#enabled

-Jeff