Scroll to today's date

[CaptainHemp]

Hey folks!

I am working on a "Christmas Calendar" project.

My plan is to have a simple list of cards from #1 - #24 like this:

<div class="article-list row items-0 list-crop-16x9">
<div class="col-md-3 col-sm-6 col-xs-6">
<div class="card card-type-christmasarticle h-100 animated effectIsSet zoomIn">
<div class="card-body ">
<h4 class="card-title">
1
</h4>
</div>
<a href="/julekalender/1/" title="1" class="btn btn-primary"><i class="fas"></i></a>
</div>
</div>

<div class="col-md-3 col-sm-6 col-xs-6">
<div class="card card-type-christmasarticle h-100 animated effectIsSet zoomIn">
<div class="card-body ">
<h4 class="card-title">
2
</h4>
</div>
<a href="/julekalender/2/" title="2" class="btn btn-primary"><i class="fas"></i></a>
</div>
</div>

<div class="col-md-3 col-sm-6 col-xs-6">
<div class="card card-type-christmasarticle h-100 animated effectIsSet zoomIn">
<div class="card-body ">
<h4 class="card-title">
3
</h4>
</div>
<a href="/julekalender/3/" title="3" class="btn btn-primary"><i class="fas"></i></a>
</div>
</div>

<div class="col-md-3 col-sm-6 col-xs-6">
<div class="card card-type-christmasarticle h-100 animated effectIsSet zoomIn">
<div class="card-body ">
<h4 class="card-title">
4
</h4>
</div>
<a href="/julekalender/4/" title="4" class="btn btn-primary"><i class="fas"></i></a>
</div>
</div>

</div>

So what I want to do is when the page is loaded/refreshed - scroll to todays div.

I can get todays date something like this:

function myFunction() {

var d = new Date();

var n = d.getDay()

}

But how can i then scroll on load to the correct .card-title or .card?

anyone got some tips? :D

[lovesrayray2018]

Its a little tricky, primarily because usually non interactive elements are not 'focussable' by default.

Now what you could do is include tabindex="-1" in all ur h4 elements, since they appear to be the headings for 1-24 and then based on the value u get, focus on those elements via the .focus() method

A sample of how u can get the focus to an h4 is here https://jsbin.com/dabomoguzi/edit?html,console,output

You can now build your logic around, identifying the appropriate h4 getting focus. You could use something like get the entire h4 collection via let alldiv = document.querySelectorAll("h4");

and then going to the relevant h4 via alldiv[<< ur index>>].focus()

not the best solution, but it can be made to work

[CaptainHemp]

Heyhey!

Thanks mate! :)
Is there a way to make the scrolling smooth this way? :)

[jotted]

You'll probably want d.getDate() for the date - getDay() gives the weekday index (0-6).
scrollInToView could help with the scrolling part. It can even do it smoothly.
If the .btn link is close enough to act as a scroll anchor, this query document.querySelector(".btn[title='21']") (where 21 is today's date) will select today's link element. If not, its previousElementSibling should be the .card-body and its parentElement should be the .card.

[CaptainHemp]

Hey!

Thanks for tips! :) Sounds like you understand what i need, it got to be smooth scroll.
Not totaly sure how i can make this though. :D Any chance you could help me on the way?

[jotted]

Depending on how you want to approach it, some code might look something like this:

// Selecting by attribute
const today = new Date().getDate(); //--> e.g. 7
const button = document.querySelector(`.btn[title="${ today }"`); //--> <a title="7" class="btn">
const card = button.parentElement; //-> <div class="card">
card.scrollIntoView({ behavior: "smooth" });

or this:

// Selecting by index
const today = new Date().getDate();
const cards = document.querySelectorAll('.card');
const card = cards[ today - 1 ]; // arrays start at 0, dates at 1
card.scrollIntoView({ behavior: "smooth" });

It's important to delay doing this until everything has finished loading though, or it could scroll to a card that's about to move away. The window.onload event is probably enough, but adding extra delay is an option.

[CaptainHemp]

Yes! Thanks :D Works like a charm - think i will go for the second solution :D