0
184
ViewsHow to activate the countdown after the page loads up?
There is some odometer items in template that I want to use for the my Website ( My programming language is : Asp.net Core ) :
The countdown effect occurs when it is visible to the user ( like when page scroll to that )
my Problem is that : this section is in the main banner of the site (below the header) and the countdown effect ends before the page loads. Because the page is in the countdown desired position before load
And When the page is loaded, only the final result of the countdown is displayed! (simple text without effect) :
This is my code :
<div class="funfacts-area">
<div class="row">
@foreach (var item in LandingItems)
{
<div class="col-lg-3 col-md-3 col-6 col-sm-3">
<div class="funfact">
<h3><span class="odometer" data-count="@item.count" dir="ltr">00</span>+</h3>
<p>@item.name</p>
</div>
</div>
}
</div>
</div>
This code only works when : Use Ctrl + F5 ( clear cache ) in the middle of the page and scroll to the top banner : The countdown effect is then activated and start counting...
I tried to send this code as a PartialViewResult to View after full load { jquery: windows.onload () }. But Unfortunately, countdown cannot detect the user position for countdown activation and the values are 00
What is the solution to this problem? Please Help me...
2 answers
Answer question0
You could try using EventListener. Executes after DOM is loaded (before img and css):
document.addEventListener("DOMContentLoaded", function(){
//....
});Or
Exectues after everything is loaded and parsed:
window.addEventListener("load", function(){
// ....
})0
Re-value the Html content to reactivate the odometer countdown :
$(window).on('load', function () {
$('.odometer').each(function () {
$(this).html("-");
$(this).html($(this).data("count"));
});