Streaming live at 10am (PST)

Coding a Highlight for Current Day with Opening Hours


#1

Hi there,

Was wondering if anyone had any suggestions or if it's possible in Webflow to highlight a List item or even a div depending on the day- basically I'd like to make the current day in the opening hours on one of my sites highlighted by making it brighter or making it bold.

I think jQuery may be the best option for this- has anyone came across this and been able to implement it?

It seems possible out with Webflow but the coding isn't my strong suit.


Here is my public share link: LINK
(how to access public share link)


#3

https://preview.webflow.com/preview/abbeyview-dental-surgery?preview=02b44c7f6e72344179d12ccad5fb3d0b

http://abbeyview-dental-surgery.webflow.io/

It's at the bottom in the Contact Us section, if I need to split it into divs or anything i'm happy to. They are currently in a List


#4

This will bold the current day for the user, but you have to move Sunday to the first list item.

$('.opening-days li').eq(new Date().getDay()).css('font-weight','bold');

Also, feel free to contact me for further code help and/or customization of third-party plugins


#5

Thank you, where do I insert the code? I take it there is no way around having to have Sunday first?


#6

If you want to keep it in the current order,

var day = new Date().getDay() - 1;
$('.opening-days li').eq(day<0?6:day).css('font-weight','bold');

Insert this in the page settings, custom code, before body closing tag.


Also, feel free to contact me for further code help and/or customization of third-party plugins


#8

Got it working- had forgotten my script tags! Thank you sir, you are a god send!


#9

Is there any chance you know how to Populate a paragraph element with the outcome of this script? I'm thinking something along these lines (my thought is to have a paragraph somewhere in the site telling the user what they are open that day to save them browsing for the opening hours)

function myFunction() {
var d = new Date();
var weekday = new Array(7);
weekday[0] = "Sunday";
weekday[1] = "Monday";
weekday[2] = "Tuesday";
weekday[3] = "Wednesday";
weekday[4] = "Thursday";
weekday[5] = "Friday";
weekday[6] = "Saturday";

var n = weekday[d.getDay()];
document.getElementById("demo").innerHTML = n;

}


#10

For the paragraph (or div), go to the element settings (second tab on the right), then type in the id. In your code example above, you are using the id demo. Don't forget to call your function.


#11

Thank you, how would I go about calling the function? (Sorry, newbie!)


#12

Just put this after your function:

myFunction();

#13

Got it working brilliantly thanks!


#15

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.