Link to home
Start Free TrialLog in
Avatar of Melody Scott
Melody ScottFlag for United States of America

asked on

jquery - show / hide div depending on day and time

Hi- There's a bit of html I need to show on our web page on Saturday, Jan 21 from 8 PM to midnight my time. Something like:
<p>Please Note: The Fedex Shipping Rate servers will have a maintenance window from 9PM to 1AM Central time today.This may cause slightly slower cart response time as the shopping cart attempts to fetch shipping rates from Fedex.</p>

I'm sure there's a way in jquery to show it at that time, then hide it at midnight. But I am a newbie at jquery, so need a ton of help. Also, it has to work in all browsers. Something like this, if I put it in on the day:

$(document).ready(function () {

<p id="demo"></p>

<script>
function myFunction() {
    var message;
    var time = new Date().getHours();
    if (time = 20) {
        message = "<p>Please Note: The Fedex Shipping Rate servers will have a maintenance window from 9PM to 1AM Central time today.This may cause slightly slower cart response time as the shopping cart attempts to fetch shipping rates from Fedex.</p>";
    } else if (time = 0) {
        message = "";
    } else {
        message = "";
    }
document.getElementById("demo").innerHTML = message;
}
</script>

});

Thanks in advance!
Avatar of Zvonko
Zvonko
Flag of North Macedonia image

Do not do this in browser.
Do it in your server side scripting.
Avatar of Melody Scott

ASKER

Ok- makes sense. How do I do that? :) Thanks.
Tell me what server side scripting feature is used for your web site. Is it PHP, or ASP or something else?
Is your site public accessible (for me?), then I can lookup to see what site programming language is used.
Oh- it's PERL. So it sounds as though this is something I have to do physically, I don't want to have to hire the programmer to write a perl script for this. I thought I could just use jquery and make the text appear at a certain time and then disappear at a certain time.
Is it a problem to poste the Perl source of that page here and I can look how to change it so Perl decides when to show the div?
You have to change that page anyway...
The page is straight html, no perl. Here it is, attached as a txt file. :)
Thanks.
index.txt
Delete please that attachment index.txt until I check wether there are your private numbers inside....
ASKER CERTIFIED SOLUTION
Avatar of Zvonko
Zvonko
Flag of North Macedonia image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Thanks, I'll try it!
Can I do that without the alert? thanks.

User generated image
Hi, again, also, if I change the start time to today at noon: var startTime = Date.UTC(2017, 0, 10, 12, 0, 0);

The paragraph shows up. It acts exactly the same way as with the old start time: var startTime = Date.UTC(2017, 0, 9, 20, 0, 0);
UTC ist current time in London, Great Britain ;- )
oh..... oops. :)
Can I do that without the alert? thanks.
Put two slashes in front of alert() function and it is commented out.
Or delete that line.

I putted it in only for debugging....
Hi, again. I'm in mountain standard time. That's -7 hours. So if it's 2:14 in London now, and 7:14 here, I should have this to make the script start at 8 AM here, 8 plus 7 is 15:

<script>
      var curTime = (new Date()).getTime();
      var startTime = Date.UTC(2017, 0, 11, 15, 0, 0);
      var endTime = Date.UTC(2017, 0, 11, 22, 0, 0);
      alert(curTime+"\n"+startTime+"\n"+endTime);
      if((curTime > startTime) && (curTime < endTime)){
            $("#demoMessage").show();
      }
</script>

Does it look right? It's not working, the text is showing now on dev2.magickitchen.com. To log in, it's user name: pepe and password: BobTheBuilder45!!

Thanks.
Sorry, I missed this one.

For MST to UTC conversion ask Mrs. Google ;-)
http://www.worldtimebuddy.com/mst-to-utc-converter
https://www.utctime.net/utc-to-mst-converter

And on your dev site I do not see the style  hide attribute and therefore it shows all the time:
<div id="demoMessage" style="display:none;
Thanks for your help!
You are welcome <|: )