I'm trying to hide a header on my site for most of the year and have it reappear for four weeks at a time based off of a specific date.
I have had a few suggestions on how to do this, but am coming up empty as I am a real beginner on web programming.
I'd also like to test the code in something like jsfiddle.net
Your help is greatly appreciated.
For Example:
Holiday Specials
[if today is April 1st to April 29th show text]
[if today is April 30 hide text]
javascript date formatting can be unpleasant. You typically have to use multiple methods to get a date into a usable format.
Using this answer from another question, I've created the following jsfiddle
https://jsfiddle.net/pkbnok8o/
$(document).ready(function() {
dateMethod();
});
function dateMethod() {
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth() + 1; //January is 0!
var yyyy = today.getFullYear(); //You won't need this for this question, but I kept it in for knowledge.
if (dd < 10) { //Won't need this logic either.
dd = '0' + dd
}
if (mm < 10) { //Also will not need this logic
mm = '0' + mm
}
if (mm == 4 && dd >= 1 && dd <= 29){ //This will show the text any year between 4/1 and 4/29 (including both of those days)
$("#txt").show(); //This uses jQuery
} else{ //Otherwise, the text will be hidden
$("#txt").hide(); //This is also jQuery
}
today = mm + '/' + dd + '/' + yyyy; //Probably don't need/want this
$("#currentDate").text(today); //or this.
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Today is:
<label id="currentDate"></label>
<br />
<label id="txt">Test Text</label>W3Schools has some pretty good information on the different get methods for javascript time & dates. Scroll down on that link to the Date Object Methods.
You can hide/show information using jQuery effects
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"> </script>
<script>
$(document).ready(function(){
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
});
</script>
</head>
<body>
<p>If you click on the "Hide" button, I will disappear.</p>
<button id="hide">Hide</button>
<button id="show">Show</button>
</body>
</html>
Source: http://www.w3schools.com/jquery/jquery_hide_show.asp
HTML
<div id='april_holiday_specials'>
<h2>April Specials<h2>
</div>
<div id='other_specials'>
<h2>Other Specials<h2>
</div>
JS
$(function() {
var today = new Date();
if (today.getMonth() == 3 && today.getDate() > 0 && today.getDate() < 30) {
$("#april_holiday_specials").show();
$("#other_specials").hide();
} else {
$("#april_holiday_specials").hide();
$("#other_specials").show();
}
});
Refer w3c date for more info on js date : http://www.w3schools.com/jsref/jsref_obj_date.asp
JSFiddle: https://jsfiddle.net/Lcb4tyxm/4/
It would be possible to hide the element by default and use and use a script to check the date every time the page is loaded up.
When the current date is within the given month then show the element.
// @param selector <String>
function showElement(selector) {
document.querySelector(selector).style.display = "block"
}
/**
@param startDate <Integer>
@param startMonth <Integer>
**/
function isInFourWeekPeriod(startDate, startMonth) {
var d = new Date()
var currentDate = d.getDate()
var currentMonth = d.getMonth() + 1
if (currentMonth !== startMonth || currentMonth !== startMonth + 1)
return false
if ((currentDate < startDate) && (currentMonth === startMonth))
return false
if ((currentDate > startDate) && (currentMonth === startMonth + 1))
return false
return true
}
if (isInFourWeekPeriod())
showElement("#my-banner-text")
// HTML file
<style>
#my-banner-text {
display: none;
}
</style>
<header>
<div id="my-banner-text">
my text
</div>
</header>
Note that the client system clock can be set to any time and time zone, so if you care about fraud or security, you must not depend on the client system for anything important.
Otherwise, you can compare Date objects directly, so to see if a date is before, on or after a specific date, use date objects, e.g.
// Create Dates for specific local dates
var startDate = new Date(2016,3,1);
var endDate = new Date(2016,3,30);
// Create a Date for the current local time
var now = new Date();
// Do some comparisons
if (now > startDate) {
show(now + ' is after ' + startDate);
}
if (now < endDate) {
show(now + ' is before ' + endDate);
}
show('Today is ' + (now.setHours(0,0,0,0) == endDate? '' : 'not ') + 'the last day');
function show(s) {
document.write('<br>' + s);
}So you can send the parameters for the start and end dates, then use the client system to generate a date for the current time (noting the above caveat that this is not reliable). Then just compare the dates using less than, greater than and equals operators.
