Show Only by Hours

Using JavaScript with Hype
1

Hello friends,

Can someone help me with this file.
Show_Only_by_Hours.hype.zip (193.8 KB)

I’m trying to create a landing page that will only be displayed according to the hours I defined .
For example:
The image of we are open will be displayed from 8am to 2pm
The picture of we closed will be displayed from 2pm to 8am
who can help me solve this file?

2

That script is probably too much for what you want. Although it has components you can use related to getting the time.

Just have code that checks the time ) every 1000 -2000ms.

If the time is in a range of #Hours -#Hours and if the display is not ‘Open’ change display to open, if it is ‘Open’ change it to ‘Closed’

3

Somthing like this.

Put this in a on scene load (not the head) Also you would need to test…

//The image of we are open will be displayed from 8am to 2pm
///The picture of we closed will be displayed from 2pm to 8am
stopTime  = 14
startTime  = 08
var timerDisplay = document.getElementById('open');
var fairBanner = document.getElementById('close');
timerDisplay.style.display =    'none'; 
fairBanner.style.display =   "none";
	
	function updateClocks() {	
//var nowTime = new Date("2017-05-15T13:01:00+01:00" ).getHours();  //-- TEST time 
	
	 var nowTime = new Date().getHours(); //--0 to 23, representing the hour
	 
	
		 
		
		 nowTime < stopTime &&  nowTime >= startTime  ? (
	   
	   timerDisplay.style.display =    'block', 
	 
		fairBanner.style.display =   "none" 
		 
) : (
  
		
    timerDisplay.style.display =    'none', 
	 
		fairBanner.style.display =   "block"    
)
window.setTimeout(updateClocks, 1000);		
 }

window.setTimeout(updateClocks, 1000);
4

Hi Mark,

Thanks for the quick reply…
Something with the hours does not work for me … maybe I’m missing something.

Can you send me a hype file?

5

Show_Only_by_Hours 2.hype.zip (195.1 KB)

6

I do a test on the hours of my time, and still the hours do not work for me accurately.
What should I do to make it work exactly by am / pm?
Open - 8:00 pm.
Stop - 8:30 pm.

7

Please post your project with your changes,

If you are testing,
You need to change he test date time to time code for you region.

Mine is.

var nowTime = new Date(“2017-05-15T16:00:00+01:00” ).getHours

T16:00:00+01:00

T16:00

Is 4pm

+01:00

Is GMT + 1hour

8

Show_Only_by_Hours 3.hype.zip (193.7 KB)

9

I do not understand why you have entered??

stopTime = T09:04
startTime = T09:00

the vars just need to be two digit numbers which represent hours.

i.e

stopTime = 08
startTime = 09

you do not use them when testing.

var nowTime = new Date( ).getHours //–0 to 23, representing the hour

new Date( )

Will get the current date registered on the client computer…

.getHours part will parse the hours of that date

If you want to set a specific date either in the published page or just for testing then you need to set a date /time.
This sort of date code and time allows you to do tests without waiting. When testing you only need to change the components of the date/time code that you are bothered about.

i.e the hours.

before I go further.

Run this and post back here the date you get back

localTime.hype.zip (16.8 KB)

10

Hi Mark,
Thank you for your patience…

I’m just trying to figure out what to do to make it appear not only in round hours.
stopTime = 08
startTime = 09
For example - ( startTime = 08:00 stopTime = 08:30

Another question:
Can I set a number of hours …? I mean that … only in those hours that I set will display the closed image.
For example -
14:00 14:30
17:30 16:30
18:00 19:00

11

I would like to help you further but you are not answering the questions I am asking or showing me you understand what I am explaining. You are just marching on with more questions.
I do not see any point in just putting up code in response to more questions like this

You need to understand how the date/time API works. That is the first problem we need to solve…

1 Like
12

@Eden

Here is an excellent resource for understanding the JavaScript Date Reference:

1 Like
13

Mark You’re right!
I’m always looking to focus on solving a problem less than understanding it (:
Sorry but I did not notice this is a questions.
So… this is what I get

Jim Thanks for the link…

14

I’m waiting for you to tell me what I should do …?

15

A quick question, are you expecting this landing page to work globally when viewed from around the world or just your local Machine or area.

16

just in local Machine or area.

17

ok,

in the test line try,

var nowTime = new Date(“2017-10-05T00:00:47-07:00” ); //-- TEST time

Expained.

2017-10-05 = the date

T00:00:47 = time ( hr:min:ss)

-07:00 = GMT offset. This is seven hrs behind.

Change the time as you need for tests.

And report back here any error and results.

18

Show_Only_by_Hours 4.hype.zip (192.7 KB)

I can not figure it out!