Basic problems with Velo

[mauro-biscotti]

Dear all,

I’m just starting to use Wix Velo, and the frustration is immense. Wix never never works as expected, even with the simpliest lines of code.

Here I’m trying to show in the console the height of two items, an image and a section,
using the .height and .clientheight methods; I placed the code in a viewport enter event handler. No errors are raised, evertyhing works fine exept che fact that the console returns:

“Current Image Height: undefined
Current Section Height undefined”

Why “undefined”? Why?
Here the snippet (the other lines of code provide for header change on entering the section, and they work fine).

$w(“#sec2”).onViewportEnter(() =>{
console.log(‘Entered Viewport sec2 go white’)
$w(‘#boxhea1’).hide(“fade”);
$w(‘#boxhea2’).show(“fade”);
console.log(‘Current Image Height: ‘, $w(’#im1’).height);
console.log(‘Current Section Height’ , $w(‘#sec2’).clientheight);
})

Thank you very much for your help.

[CODE-NINJA]

I’m just starting to use Wix Velo, and the frustration is immense. Wix never never works as expected, even with the simpliest lines of code.

I understand your frustration → comformed.
But there are also benefits wix provides. → It’s someking of 50% / 50%.

Back to your issue.

You simply can’t programm the way you did on a wix-site.

-You can’t use → .clientHeight
-You can’t use → .height directly.

You will have to work with the → ELEMENTS and APIs <— provided by Wix.
As you already did → using the → $w ←

You also will have to use the WIX-VELO-APIs to be able to code, modify and edit elements on your page.

Where you can find all elements?

Wix Editor Elements ($w) - Velo API Reference - Wix.com

Every element → provides you specific methods and functions (features) you can use by code. For example the BUTTON-ELEMENT…

Button - Velo API Reference - Wix.com

Take a look onto what you can do when using a button.

As you can see the functions of all elements are very LIMITED!

For example here you can see what you can do on a button, regarding it’s styles…

style - Velo API Reference - Wix.com

More options you have on Wix-Studio → where you can partially use → CSS.

And maybe this one can help you somehow, even i believe it won’T help in your case…
getBoundingRect - Velo API Reference - Wix.com.

If you want to feel the full CODING-FREEDOM on a Wix-Site → then you can use…

1. HTML-Component
2. Custom-Element

Ohh, sorry → still not full coding freedom, i am a lyer.

[CODE-NINJA]

Read the following post ---->

Custom Components Integrated into Editor + React.js

Ok, since you did not reply, i did some investigations. I now understand your suggestion → but this is still not what i was searching for and not a complete solution for a full dynamic resizing of en element on a wix-page. 1) Adding a → BOX → (checked). 2) Adding either a HTML-Comp. or Custom-Elem. into the BOX → (checked). —> At this checkpoint → yes both of elements support the function. 3) Streching the inner-element to the BOX → (checked). 4) Adding generated CUSTOM-CSS to the → BOX → …

Could be useful for you aswell.

[mauro-biscotti]

Thank you for your answer, I was convinced these methods were part of the Velo API…

[CODE-NINJA]

The way you code → is allowed inside of 2-elements …

a) Custom-Element!
b) HTML-Component.

Type in HTML-Component into the search of this forum and check it out.

And yes → both have their boundaries.