0

How can I change a text/div/pic after an exact date?

For example here's a code what changes the div like an overlay. I would like that result when an exact date past.

So for example after 2018.01.01 the div automatically changes to grey. How should I code this? Tips? :)

$(document).ready(function() {
    $("#myDiv").click(function() {
        $("#overlay").show();
    });
});
#myDiv {
    width:100px;
    height:100px;
    background-color: yellow;
    margin: 50px 50px;
    padding:10px;
}

#overlay {
    display:none;
    position: absolute;    
    width:100px;
    height:100px;
    background-color: gray;
    top: 50px;
    left: 50px;
    padding: 10px;
    opacity: .8;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myDiv">
<p>Some text</p>
<input type="button" value="A button" >
</div>

<div id="overlay"></div>

http://jsfiddle.net/QQRZc/

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
Arstine
  • 13
  • 3
  • 1
    simply change it manually after this date ... why an automatic script for one date ? – Temani Afif Apr 09 '18 at 12:57
  • It wouldn't be for only a date there'll be a lot of them. I just wanted to know how I can create it. Or the mechanism. – Arstine Apr 09 '18 at 12:59
  • 1
    @GerardoBLANCO jquery is javascript but we don't have to add Javascript tag for all jquery questions .... if someone know jQuery so he also know JS but someone can know JS and not jQuery .. so JS tag should be used for issue related to JS or if the OP decide it should be done with JS – Temani Afif Apr 09 '18 at 13:01
  • 1
    Then start by properly researching this, please. You are not the first person ever to try and change what it is shown on a web site dynamically based on the current time. Please go read [ask]. Or in short: When you are still at the _“How should I code this?”_ or _“I just wanted to know how”_ level with your own research & efforts, it is simply too early to come here. – CBroe Apr 09 '18 at 13:02
  • `It wouldn't be for only a date there'll be a lot of them` --> so you question is not relevant with your real need – Temani Afif Apr 09 '18 at 13:03
  • Further to @CBroe's comment, all your asking is 'How do I compare todays date to another known date'. As such I closed this question as a duplicate. – Rory McCrossan Apr 09 '18 at 13:04

1 Answers1

-1

You take the current date+time, and subtract that from the target date+time, this will result in an amount of seconds until the target date+time. This answer gives a good working example for javascript, but you could also pre-calculate this serverside, e.g. with PHP.

// Then a simple settimeout will do the rest:
setTimeout(
    function(){ $("#overlay").show(); },
    secondsTillTarget*1000
);
Martijn
  • 15,791
  • 4
  • 36
  • 68