tom-martin Posted October 29, 2021 Share Posted October 29, 2021 Hi all, hope everyone is well. I want to be able to add a time-based heading to our website, based on the time of the users PC. I would like a heading to change based on the following timing: 4:00am-11:59am: Good Morning 12:00pm-6:59pm: Good Afternoon 7:00pm-3:59am: Good Evening Does anyone know how this is possible? I had a developer code it for a custom web platform years ago but would love to know if it's possible using the SS platform. Happy to discuss privately if this is a costly exercise. Many thanks! Link to comment
Solution paul2009 Posted October 29, 2021 Solution Share Posted October 29, 2021 You can achieve this with some simple JavaScript. Here's an example that you can paste into a Code Block on your page and then adjust to match your requirements. <h2 id="greetingEl"><h2> <script> const time = new Date().getHours(); let greeting; if (time < 12) { greeting = "Good morning"; } else if (time < 19) { greeting = "Good afternoon"; } else { greeting = "Good evening"; } document.getElementById("greetingEl").innerHTML = greeting; </script> The first section creates a heading element where the greeting will appear. Below this is the script, which gets the time and then extracts the hour from this using the getHours() method. This returns an hour from 0 to 23 and this is used to determine which greeting to show. For a deeper explanation of this, see JavaScript if else and else if. If this post has helped you, please click a 'Like' or 'Thanks' icon below ⬇️ tom-martin and tuanphan 2 Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥. Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links. Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional. Would you like your customers to be able to mark their favourite products in your Squarespace store? Link to comment
tom-martin Posted October 29, 2021 Author Share Posted October 29, 2021 6 minutes ago, paul2009 said: <h2 id="greetingEl"><h2> <script> const time = new Date().getHours(); let greeting; if (time < 12) { greeting = "Good morning"; } else if (time < 19) { greeting = "Good afternoon"; } else { greeting = "Good evening"; } docume Amazing, thank you so much. Worked perfectly! tuanphan 1 Link to comment
Ch3f Posted October 17, 2023 Share Posted October 17, 2023 (edited) @tom-martin @paul2009 I'm looking to do something similar; however, instead of text being shown based on the time of the day, I want an image shown based on the day of the week. Could you provide any guidance for this? I imagine I'd have the images hosted and use the direct URL in the code? Edited October 17, 2023 by Ch3f Link to comment
paul2009 Posted October 17, 2023 Share Posted October 17, 2023 25 minutes ago, Ch3f said: I'm looking to do something similar; however, instead of text being shown based on the time of the day, I want an image shown based on the day of the week. You can use the same principle. As you're using images, you'll want to add the images to Squarespace first and make a note of the URL of each one, for example //images.squarespace-cdn.com/content/v1/5e4d0893227ba62de80e9e46/f97f7574-05a2-417d-b98e-23b6f29241a3/Tuesday.jpg. You can then insert these URLs into the code below in place of Tuesday.jpg and so on. Here's a simplified example: <div class="sqs-image"> <img id="ImageOfTheDay" src="" alt="Image of the Day"> </div> <script> // Get the current day of the week (0 for Sunday) const dayOfWeek = (new Date()).getDay(); // Image URLs for each day const imageUrls = [ 'Sunday.jpg', // Sunday 'Monday.jpg', // Monday 'Tuesday.jpg', // Tuesday 'Wednesday.jpg', // Wednesday 'Thursday.jpg', // Thursday 'Friday.jpg', // Friday 'Saturday.jpg' // Saturday ]; // Get the image container and image element const imageElement = document.getElementById('ImageOfTheDay'); // Set the image source based on the day of the week imageElement.src = imageUrls[dayOfWeek]; </script> The first section creates a div element containing an image placeholder where the image will appear. Below this is the script, which gets the day of the week using getDay(). This returns a day from 0 to 6 and this is used to determine which image to show. As I say, this is a simplified example. You may need additional CSS to style/size the image to meet your needs. Did this help? Please give feedback by clicking an icon below ⬇️ Ch3f 1 Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥. Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links. Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional. Would you like your customers to be able to mark their favourite products in your Squarespace store? Link to comment
Ch3f Posted October 17, 2023 Share Posted October 17, 2023 (edited) 8 minutes ago, paul2009 said: As I say, this is a simplified example. You may need additional CSS to style/size the image to meet your needs. Perfect, I'll try all of that. Hopefully I can figure out the additional CSS needed to ensure the images look as they should. Thank you so much for your reply. Edited October 17, 2023 by Ch3f paul2009 1 Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment