Jump to content
Go to solution Solved by paul2009,

Recommended Posts

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

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  ⬇️

About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥.
Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. 
Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional.

Link to comment
  • 1 year later...
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  ⬇️

About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥.
Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. 
Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional.

Link to comment
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 by Ch3f
Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.