Hey guys, I’m back. I know it’s been a while.
This time we’re going to take a dip in the code pool, but don’t worry, we’ll stay in the shallow end.
Even if you don’t have a lot of experience with coding, there are some neat effects you can create using the Properties panel and just a line or two of code. In this post we’ll take a look at the onViewportEnter API. (You can look at the bottom of this post to see how little code you need to make this work.)
Like the API docs explain, onViewportEnter “Adds an event handler (just another way of saying it runs some code) that runs when an element is scrolled into the viewable part of the current window. An element enters the viewport when the page is scrolled to show any part of the element. An element enters the viewport even if it is hidden or collapsed.”
Simply put, onViewportEnter makes something happen when the element you add it to scrolls into view.
Let’s look at a simple use case. Suppose you have a repeater on your page, and you want it to display only 10 items at a time, but your collection has 100’s of items. You want to add a “Discover More” button at the bottom of the repeater which will trigger the dataset to load the next 10 items, but you want that button to fade in only when the user scrolls to the end of the repeater. Here’s what you would do.
- Make sure your dataset “Number of items to display” is set to 10.
- Make sure your button is set to “Hidden on load” in the Properties panel.
- Select your button and add an onClick event to it in the Properties panel. A function is added
to your code panel for the button’s onClick event. - In that function add this code “$w(”#yourDataset").loadMore();"
a. This tells the dataset to load the next 10 items when the button is clicked.
b. Make sure to replace “yourDataset” with the name of your actual dataset. - Add an anchor to your page and position it over the button. We’re going to use this anchor
to see when the button scrolls into view. We need to do this because the button starts off
hidden so it’s never in view to start. - Select the anchor and add an onViewportEnter event handler to it in the Properties panel. A
function is added to your code panel for the onViewportEnter event. - In that function add this code. “$w(”#button").show(“FadeIn”);"
a. This makes the button display with the Fade In effect when the anchor scrolls into view.
b. Make sure to replace “button” with the name of your actual button.
Now, when you scroll to the bottom of the repeater the Discover More button will fade in, which the user can click to load the next 10 items in the repeater.
Of course, you may want that button to disappear until you need it again. To do that, just add an onViewportLeave event handler to your anchor also, and add the code to make your button FadeOut. Now the button fades out when the repeater loads and will fade in again when the user scrolls down more.
Here’s what all the code looks like:
export function button1_click(event, $w) {
$w("#dataset1").loadMore();
}
export function anchor1_viewportEnter(event, $w) {
$w("#button1").show("FadeIn");
}
export function anchor1_viewportLeave(event, $w) {
$w("#button1").hide("FadeOut");
}
And here it is in action:
Obviously, this is just one application of this API. You can make your site respond in any way you want when any element scrolls into view.
-Jeff
