HtmlComponent

Setting the scrolling property sets what happens when the content in the HTML Component is larger than the size of the component.

The value can be set to:

• "auto": Scrollbars are displayed only if needed. (This is the default.)
• "yes": Scrollbars are always shown, even if they are not needed.

• "no": Scrollbars are never shown, even if they are needed).

  Getting the scrolling property returns which ScrollType the component is set to use.

Setting the src property sets the website that is displayed in the HTML Component. The src value must be set to an HTTPS URL.

Getting the src property returns the URL of the website that is displayed in the HTML Component.

If rendered is true, the element is in the current DOM structure and can be used.

If rendered is false the element is not in the current DOM structure.

An element might not be in the DOM if it is in a slide which is not currently showing.

If global is true, the element appears on all pages.

If global is false, the element only appears on the current page.

The ID is the element's unique identifier. It is used when selecting elements using the $w() function.

An element's id is set in the Editor using the Properties panel.

Some elements can contain other elements. This occurs when you drag an element onto a container element. The container is the parent of all the elements it contains.

Page, Header, and Footer are top-level elements and have no parent.

If hidden is true, the element is not displayed on the page under any circumstances. A hidden element, unlike a collapsed element, continues to take up the same space on the page as it did when it was visible.

If hidden is false, the element may be displayed on the page.

However, an element whose hidden property is false is still not displayed if:

• It is collapsed.
• Its parent element is hidden or collapsed.
• It is a slide in a Slideshow which is currently not being displayed.

Even if the element is not displayed due to the conditions mentioned above, if its hidden property is set to false, it's displayed when the conditions no longer apply.

To determine if the element is actually visible, use the isVisible property.

To set the hidden property on an element, use the element's hide() or show() functions.

If you select Hidden on load in the element's Properties panel in the Editor, the hidden property is set to true when the page loads.

If isVisible is true, the element is displayed on the page.

If isVisible is false, the element is not displayed on the page.

The value of the isVisible property is calculated based on the hidden, collapsed, and rendered properties of the element and all of its ancestors. It is true only if the conditions exist in the element's property values and the property values of its ancestors such that the element is actually displayed on the page.

If collapsed is true, the element is not displayed on the page under any circumstances. A collapsed element, unlike a hidden element, does not take up any space on the page. When collapsed, elements positioned within 70 pixels below the collapsed element and each other move up to take the collapsed element's place where possible. The elements that move up maintain their positions relative to one another.

If collapsed is false, the element may be displayed on the page. Elements that moved up to take the collapsed element's place on the page are moved back down.

However, an expanded element (an element whose collapsed property is false) is still not displayed if:

• It is hidden.
• Its parent element is hidden or collapsed.
• It is a slide in a Slideshow which is currently not being displayed.

Even if the element is not be displayed due to the conditions mentioned above, if its collapsed property is false, it's displayed when the conditions no longer apply.

To set the collapsed property on an element, use the element's collapse() and expand() functions.

If you select Collapsed on load in the element's Properties panel in the Editor, the collapsed property is set to true when the page loads.

The onMessage() function allows your page code to receive messages from an HTML Component on your page. When a message is received, the specified event handler is executed and the message can be retrieved using event.data.

To send a message from your HTML Component, use the postMessage() function in the HTML component's code. Generally, you call postMessage() from within a function:

 <script type="text/javascript">
   function sendReturnMessage(msg) {
     window.parent.postMessage(msg, "*");
   }
 </script>


 
Copy Code

For more information on sending and receiving messages between your page and your HTML Component, see Working with the HTML Component in Wix Code.

The postMessage() function sends a message from your page code to the HTML Component.

To receive the message sent from the postMessage() function in your HTML Component, create an event handler for the window.onmessage event in the component's code. You create the event handler within an HTML <script> tag. You get the received data by getting the data property of the event handler's event parameter.

Often, you define the window.onMessage event handler in a function that gets called when the HTML component loads using the body onload or window.onload:

 <script type="text/javascript">
   window.onmessage = (event) => {
     if (event.data) {
       console.log(`HTML Component received a message: ${event.data}`);
       // additional code here
     }
   }
 </script>


 
Copy Code

For more information on sending and receiving messages between your page and your HTML Component, see Working with the HTML Component in Wix Code.

The scrollTo() function returns a Promise that is resolved when the animated scroll is complete and the element is now in view.

To scroll to a specific location on the page, see the wix-window scrollTo() function.

Calling the scrollTo() function on an element in a repeated item that is selected from the global scope causes an error.

The hide() function hides the element and returns a Promise that is resolved when the effect is complete and the element's hidden property has been set to true.

To learn about the behavior of a hidden element, see the hidden property.

You can optionally apply an effect when hiding the element by providing an effectName value. You can also customize the effect by providing the optional effectOptions object.

Effects:

• "arc"
• "bounce"
• "fade"
• "flip"
• "float"
• "fly"
• "fold"
• "glide"
• "puff"
• "roll"
• "slide"
• "spin"
• "turn"
• "zoom"

You can also hide an element when the page loads by using the Properties panel in the Editor.

The show() function shows the element and returns a Promise that is resolved when the effect is complete and the element's hidden property has been set to false.

You can optionally apply an effect when showing the element by providing an effectName value. You can also customize the effect by providing the optional effectOptions object.

Effects:

• "arc"
• "bounce"
• "fade"
• "flip"
• "float"
• "fly"
• "fold"
• "glide"
• "puff"
• "roll"
• "slide"
• "spin"
• "turn"
• "zoom"

The collapse() function returns a Promise that is resolved when the element's collapsed property has been set to true.

To learn about the behavior of a collapsed element, see the collapsed property.

You can also collapse an element when the page loads by using the Properties panel in the Editor.

The expand() function returns a Promise that is resolved when the element's collapsed property has been set to false.

To learn about the behavior of an expanded element, see the collapsed property.