If/else statement with rendered statement

Ask the community
,
1

Hello

I’m trying out some if and else statements on my website. My Goal is that if the user hasn’t scrolled it scrolls after 3sec. If he scrolls to a certain point the function above shouldn’t be triggered at all.
Unfortunately I’m not very good at js so I’m having a hard time solving the problem.

$w.onReady( function() {
 if ($w("#button1").rendered{
 return
      } else {
      setTimeout(function (parameter) {
      $w("#anchor1").scrollTo()
      }, 2000)
    }
});

I’m trying to check if button1 is on viewport with the rendered statement. Unfortunately it is giving me an error there.

Can someone help me solving this problem?

Thank you very much

2

Raphi,

There were a couple syntax modifications needed. Hopefully, this gets you a little closer to your goal.

$w.onReady( function () {
if ($w(“#button1”).rendered) {
// nothing
} else {
setTimeout( function (parameter) {
$w(“#anchor1”).scrollTo()
}, 3000)
}
});

3

Hey Anthony

Thank you very much for the help! The error messages have disappeared but unfortunately it isn’t working by now. Now it doesn’t scroll at all.

Does anybody know how to fix this?

Thanks for the help again

4

Raphi, I have not used render until now, but render, as the term implies, merely means that that an element was drawn on the page. Try placing the button way, way down on the page. You will find that the render property still evaluates as true. So, an element can be rendered but not viewable when the page first loads. Consequently, render is not the test to use here.

That leaves you with onViewportEnter and onViewportLeave to work with. How to utilize those to achieve your goal is not immediately apparent to me.

5

It occurred to me to use setInterval instead of setTimeout. You need to be able to get in there and evaluate if the user has scrolled after three seconds. SetTimeout cannot do that; it just blindly fires after three seconds. The viewportEnter event needs to be on a suitable element down the page where you can set the UserScrolled variable to true.

6

@tony-brunsman man thank you so much!
You are my hero!

The code you sent works perfectly and does it exactly how I imagined.

Thanks again for your help and time!

7

@raphikuenstle I have been wanting to learn more about how to utilize viewportEnter and viewportLeave , and you provided the opportunity and challenge. I’m glad it’s functioning as you envisioned it!