/    Sign up×
Community /Pin to ProfileBookmark

need help trying to show/hide a div

Hoping someone can help me with this.

I’me trying to show/hide a div based on the current time. Here’s the script I’ve been trying to use:

[code]
<script type=”text/javascript”>
// this is used to show/hide a div, etc, on a specified date/time
window.onload = checkDate();

function checkDate() {
var currentTime = Date.now();
var showDate = new Date(2019, 02, 28, 11, 34, 59);
var hideDate = new Date(2019, 02, 28, 11, 39, 59);
// note – the months parameter ranges from 0-11, not 1-12.
// example: new Date(2017, 05, 24, 10, 10, 59) denotes June 24, 2017, 10:10:59 AM

if(currentTime > showDate){
addBlock(document.getElementsByClassName(‘rpt_msg’));
}
if(currentTime > hideDate){
removeBlock(document.getElementsByClassName(‘rpt_msg’));
}
}

function addBlock(item) {
for (var i = 0; i < item.length; i++)
{
if(item[i].parentNode) {
item[i].parentNode.appendChild(item[i]);
}
}
}

function removeBlock(item) {
for (var i = 0; i < item.length; i++)
{
if(item[i].parentNode) {
item[i].parentNode.removeChild(item[i]);
}
}
}
</script>
[/code]

Any help will be greatly appreciated.. thanks!

SteveMTNO

to post a comment
JavaScript

4 Comments(s)

Copy linkTweet thisAlerts:
@JMRKERMar 28.2019 — And what does the HTML the script is working on look like?
Copy linkTweet thisAlerts:
@stevemtnoauthorMar 28.2019 — I came up with a simpler approach to this:

<i>
</i>&lt;script type="text/javascript"&gt;
var currentTime = new Date()
var month = currentTime.getMonth() + 1
var day = currentTime.getDate()
if (month &gt;= 4 &amp;&amp; day &gt;= 2) {
document.getElementById("rpt_msg").style.display = 'block';
} else {
document.getElementById("rpt_msg").style.display = 'none';
}
&lt;/script&gt;


All I'm trying to do is hide the div (#rpt_msg) until April 2, and display it after that. Altho, looking at it now, I see that it will be hidden again on May 1 - then displaying again on May 2. It will need to display on May 1 as well.
Copy linkTweet thisAlerts:
@JMRKERMar 29.2019 — You can simplify it even more by:
<i>
</i>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
&lt;meta charset="UTF-8"&gt;
&lt;meta name="viewport" content="width-device-width,initial-scale=1.0, user-scalable=yes"/&gt;
&lt;title&gt; HTML5 Test Page &lt;/title&gt;
&lt;style&gt;
#rpt_msg { display: none; font-size: 2em; color: red; }
&lt;/style&gt;

&lt;/head&gt;
&lt;body&gt;
Awaiting May 1, 2019 - &lt;span id="rpt_msg"&gt;What was hidden is now visible&lt;/span&gt;

&lt;script&gt;
var currentTime = new Date();
var showTime = new Date(2019,4,1,0,0,0); // Test using earlier date than current
if (currentTime &gt;= showTime) {
document.getElementById("rpt_msg").style.display = 'block';
}
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

Change settings as desired. You will need to change the year if reused next year.

Can also be used for different months and dates as well as specific time of event occurance..

Good Luck! :)
Copy linkTweet thisAlerts:
@JesseMarcoApr 07.2019 — @JMRKER Master of JavaScript.
×

Success!

Help @stevemtno spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.24,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...