Hello all,
unfortunately I could not find a reference to my question, which is why I am asking now (hopefully not again).
I want to implement a counter on my website, which counts up 3 different fields with corresponding values.
The code for this was created in a viewportEnter event.
This works also everything so far as desired. But when I scroll down on the page itself, then come to the counter, the individual values count up. If I leave the viewport (scroll further) and then go up again, the counters count up again.
What options do I have to prevent this? The values should only count up once and then remain at their final values.
Thank you very much for your help!
If more information is needed, please just let me know. Please apologize in advance if I just forgot essential necessary things, this is my first post here and I feel I have provided all the information. I don’t think the exact code that is currently being used is necessary to find a solution. If it is, please teach me better!
- way-: creating a lock-function.
-you scroll
-onViewport gets fired
-counter counts+1
-functions locks after is has a count bigger than → 0
Way-2; collect all viewed items in an Array…
-you scroll-down
-viewport gets fired
-you check array, if item already existing in array
-if not item is pushed into array
Something like this…
Hi @info74806 
Just add a Boolean to track whether the count-up has started or not.
let started = false;
$w('#section').onViewportEnter(() => {
if (!started) {
started = true;
countUp();
}
})
Hope this helps~!
Ahmad
Ok, the lock-function has been created.
Good morning Ahmad! 
@russian-dima Good morning to you too
Hello together,
thank you very much!
I tried Ahmad’s suggestion (since he already included appropriate code) and was able to implement it exactly as desired with his tip.
Thanks for your help and the quick answers!
Have a nice weekend! 
Hello experts!
I am a total noob - who needs to maintain a website (www.babli.org)… And I have a similar - yet unique - problem. Wondering if any of you could help?
We are trying to incorporate Wix Hotel (BETA) into our site - and the page where it (the app) is placed on our site is - Book-a-room
THE PROBLEM:-
-
If the Hotel App is placed at the top of the page - the “Rooms and guests” drop-down, towards the top of the app section, opens above - and goes beyond the page (top), and so it cannot be seen (when more than 2 rooms have been selected)
-
If I create space above the Hotel app section - like I have now - by placing other sections above it - the drop-down now has enough ‘space’ to display multiple rooms.
-
However, when the page loads, it automatically jumps to the Hotel App Section - instead of staying at the top of the page!
WORKAROUND I AM TRYING:-
I put in an event-handler code -
import wixWindow from "wix-window";
export function section2_viewportEnter(event) {
(wixWindow.scrollTo(0, 0),{ "scrollAnimation": false });
}
This does the job of taking the page back to the top - but now, I need a way to MAKE THE CODE RUN ONLY THE FIRST TIME - so that the rest of the page can be navigated!
I tried to modify @anon72313111 's code above - but frankly, I don’t understand that code enough to pull it off!
Any help would be much appreciated!
Thanks…
Aaditto.
The code is pretty simple… explanation…
-
You set-up a GLOBAL-VARIABLE called —> started which will hold the current state if the upscroll-animation runs first or second time and above.
-
Then you have the onViewPortEnter-event-function. This always runs, when a specific section of your page gets into VIEW on your screen. You scroll and scroll and scroll and then a specific element of your choice gets into view on your screen and fires the onViewPort()-event, which then checks if the state ot our “started” variable has been changed already before, or if it is the first time.
If it is the first time, the value of the variable will be changed to TRUE → you change the state, to save the current state of the variable (from FALSE to TRUE).
Once changed → it will never do it again, because it will always fail the CHECKING of the IF-Condition.
Hey @russian-dima … Thanks for your response!
But really - you have to be more ‘pointed’ - for it to make any ‘sense’ to me - I mentioned, I am a total noob, remember?! 
I tried ‘adding’ that piece of code - with the $w(‘#section’) part modified to the name of my section, which is “$w(‘#section2’)”…
But then the code panel shows a ‘red-dots underline’ on the last piece of the code… “countUp();” - and says, “cannot find name ‘countup’”.
And, adding that piece of code (disregarding the ‘warning’) does not solve the issue either!
Could you guide me with a more step-by-step breakdown of what I need to do to make it work, please?!
Thanks in advance!!!
import wixWindow from "wix-window";
let started = false;
$w.onReady(()=>{
$w('#section2').onViewportEnter((event)=> {
if (!started) { started = true;
(wixWindow.scrollTo(0, 0),{ "scrollAnimation": false });
}
else{ }
}
});
@CODE-NINJA - Thanks a tonne!
Now I think I am following the code - at least I think I am…
So, the if (!started) part of the code - being nested inside the $w(‘#section2’).onViewportEnter function - is basically saying ~
“When section2 enters the viewport - if the started variable is not-true (!started) - which is already set by the Global variable started = false - then set started property of sectio2 entering the viewport to true”
… So, next time section2 enters the viewport, it’s own started property is already set as “true” - so, the viewport-enter function does not run again.
Am I getting this right?
1 Like
Right!
It will change the state → only once on the page, as long as you do not reload the page.
Yes, I realised that the scrollTo code will run again if the page is reloaded…
And that is actually causing a new problem - due to which your code @CODE-NINJA is not really solving the problem at hand… As in, it is doing the job, initially - but as soon as the “SEARCH” button of the Wix Hotels App (section 2) is clicked - the scrollTo is triggering again - and taking the page back up to the top - instead of staying at the Hotels App section!
I THINK that is happening because the SEARCH button is (even though not visibly) - RE-SUBMITTING the page?!
If your page has been reloaded again or not → you can see if you add a console log to your onReady()-section of your code.
$w.onReady(()=>{console.log('Page is ready');
});
Everytime when you see this log inside of your console, saying → ‘Page is ready’ <— than means your page has been reloaded.
1 Like
Okay @CODE-NINJA - so I added the console-log code…
And now, this is what the console shows when the page loads -
And this is what it shows when the “SEARCH” button of the Hotels App is clicked -
Any Ideas?
I think there is not much you can do.
Wix Hotels is an INCLOSED OWN APP, which is not part of VELO-CODING.
All you can do with wix-hotels, you will find here…
—> Setting up Wix Hotels | Help Center | Wix.com
I would have to investigate your logs in more detail, while your setup is running, to find you (maybe) a solution.
This is the big problem with APPs, they are easy to use, but they are in most cases not customizable.
Seems as if the APP has it’s own process-flow.
- ADDONS: About Wix Hotels Add-Ons | Help Center | Wix.com
- Wix Hotels | Help Center | Wix.com
1 Like
Yes, I have gone that article in the past - there’s nothing in it that helps!
It would be totally AWSOME if you could do that!?
Would you need any other info/ details from my side?
The Wix Hotels App - especially this new [beta] one - is EXTREMELY frustrating!
Both in terms of the things that can(not) be customised to a unit’s specific needs - as well as the fact that one or the other thing keeps (mal)functioning on the live site!!!
-
Send me an invitation to your project —> russian-dima@hotmail.de
-
Navigate me to the right page of your website-project, showing me the right place where to look at → so i do not have to scan all your project.
I will take a direct look onto the issue, while your setup is running. This way…
- …it is easier for me to work.
- …easier for me to see what happens at which step.
- …easier to follow the console-logs.
- …easier to understand the whole process-flow.
- …and you always can see the direct results on screen…
Sorry, but I don’t really understand what you mean by that!
From where do I ‘send you and invitation’?
I can see a section in my Dashboard like this -
Roles & Permissions
Invite collaborators to work on this site, assign them roles and set their permissions.
Is that what you mean?
