@samliew, thank you for the .eq function explanations, it now all makes sense indeed.
The very reason why the months need to appear in that order is not just to challenge myself but because the website I am building is a website where people can reserve theater events.
Very few people are willing to scroll down every month to see what the upcoming event is. This is the reason why, the actual month, containg all upcoming events, needs to appear first in your index structure you built… followed by the next months containing the next events etc…
In that sense, I guess the .eq function might be limited for event management unfortunately. I had been thinking about a solution using else if statements:
for each “n” number the .eq function returns, then show the month’s divs in a predefined order.
It could be something like this:
if n = 4 then display
div may div june div july div august div september div november div december div april div march div february div january
and then
if n = 5 then display
div june div july div august div september div november div december div may div april div march div february div january
and so on until we reach n = 11…
What do you think ?
Would that approach make sense ?
Okay @matthewpmunger, @samliew, I think I just might have found a solution !
Not sure though it is very elegant, but it seems to work.
I have used the insertBefore javascript command.
I tried it and it seems to work !
Now the idea would be to add 11 “else if” statement for every n = x number of the month to define every case senerio. I’ll keep digging and trying things out. Should someone have a more elegant way to perform the div moving around task, please let me know !
Appreciate your help !
Have a nice weekend you all !
Anthony
Javascript:
// function looks what month it is
function seekMonth() {
var d = new Date();
var n = d.getMonth();
// if actual month is may
if (n = 4) {
$('#may').insertBefore('#january');
$('#june').insertBefore('#january');
$('#july').insertBefore('#january');
$('#august').insertBefore('#january');
$('#september').insertBefore('#january');
$('#october').insertBefore('#january');
$('#november').insertBefore('#january');
$('#december').insertBefore('#january');
$('#april').insertBefore('#january');
$('#march').insertBefore('#january');
$('#february').insertBefore('#january');
}
}
$(document).ready(function() {
// we call the function to run on document ready
seekMonth();
});
I integrated the else if statement and had to modify the following conditions (n = 1), (n = 2), etc… by (n == 1), (n == 2), etc… in order for the script to run the next condition if the first one wasn’t fulfilled.
The script now orders automatically the divs based on the actual month, followed by the upcoming months, followed by the past months in an descending order Thank you @matthewpmunger, @samliew, @StuM for the inspiration and help !
I updated my project for you to clone and play with it if you want.
If you have a way to optimize the code I patiently hard coded, please let me know !
Live site here. “May” should be displayed first
Codepen here
Glad we’re able to help you work through it, but I notice that for May the last four months are in reverse order:
April, March, February, January
instead of
January, February, March, April
Should be an easy fix.
// if actual month is may
else if (n == 4) {
document.getElementById("january").style.order = "9";
document.getElementById("february").style.order = "10";
document.getElementById("march").style.order = "11";
document.getElementById("april").style.order = "12";
document.getElementById("may").style.order = "1";
document.getElementById("june").style.order = "2";
document.getElementById("july").style.order = "3";
document.getElementById("august").style.order = "4";
document.getElementById("september").style.order = "5";
document.getElementById("october").style.order = "6";
document.getElementById("november").style.order = "7";
document.getElementById("december").style.order = "8";
}
hi @matthewpmunger, thank you for having taken a look !
yes I thought the inverse order could be interesting because that way, when we are in december, the ordered list would look relevant this:
december
november
october
september
august
july
june
may
march
april
february
january
so basically, the month would be displayed in order of relevance: january being the least relevant month as it happened 12 month ago. Of course you can setup the order the way you wish, but for my project I thought it could be interesting for the user, to have a look at past months (and therefore events) in retrospect… and in order of relevance meaning descending order
I guess if the order wasn’t descending, we’d get in december the following order which could look odd :
I had this same issue with trying to filter events by each month and ended up just adding a “Month” dropdown option field to my CMS Event item that lists all of the months. This allowed me to then create 12 Collection List that simply filter according to the value of that option field.
Of course this requires one more cms field to be filled out and isn’t as elegant as your solution, but it gets the job done. I hope Webflow eventually adds more parameters to filter your data by.
yea that could work too !
The reason why I decided to use custom code is because I couldn’t use 12 collection list just for months purpose as I have other collection list for other design element on my page.
A friend of mine, rewrote “my” the javascript code in a much efficient way, you can have a look at it on this codepen