I have been searching, and have seen JS to hide html content between DIV tags - and image posts based on date, but I can't seem to find what I need.
Maybe someone here can help?
I have some html content showing an upcoming event, I want the content to disappear/hide when the event has come and gone (automatically). When I post a new event I will edit the hidden content or delete it.
I know CMS will do this, but with such over kill, time and waste involved. I just need a very simple Hide content based on date javascript. No layers involved.
<script>
//set a limit date
//Date constructor new Date( year, month, day, hour, minutes, seconds )
var limitDate = new Date( 2006, 3, 14, 12, 10, 0 )
//date comparison is implemented in Javascript, so,
//you'll just need to show the layer if current date in smaller than limitDate
function showContent(){
if ( new Date() < limitDate ){
document.getElementById( "content" ).style.visibility = "visible"
}
}
</script>
last but not least, add the onload event to the body tag
<body ... onload="showContent()">
I hope it will help you...
if you don't want the content to ocuppie space in your document, swap previous showContent function by this one
Code:
function showContent(){
if ( new Date() < limitDate ){
document.getElementById( "content" ).style.visibility = "visible"
}
else{
document.getElementById( "content" ).innerHTML = ""
}
}
Last edited by nmcm; 04-14-2006 at 06:56 AM.
Reason: What if i Don't want the content to ocuppie space in my document?
In the var limitDate = new Date( 2006, 3, 14, 12, 10, 0 )
Where 12 is the hour - Is that 12 midnight the hosted server time?
I didn't think of this until just now, but if you could help me with one more thing please.... How could I set different end dates for different events?
<script>
//set a limit date
//Date constructor new Date( year, month, day, hour, minutes, seconds )
var contDates = new Array(
new Array("content",new Date( 2006, 3, 14, 12, 10, 0 )),
new Array("content2",new Date( 2006, 3, 14, 12, 10, 0 )),
new Array("content3",new Date( 2006, 3, 14, 12, 10, 0 )),
new Array("content4",new Date( 2006, 3, 14, 12, 10, 0 ))
);
//date comparison is implemented in Javascript, so,
//you'll just need to show the layer if current date in smaller than limitDate
function showContent(){
for (var i=0; i<contDates.length; i++) {
if ( new Date() < contDates[i][1]){
document.getElementById(contDates[i][0]).style.visibility = "visible"
}
}
}
</script>
At the top, there are four content-date pairs, and should be easy enough to add more, based on the pattern there.
<html>
<head>
<script type="text/javascript">
var dispLimit = [];
dispLimit[1] = "2006 Apr 12"; //this is for disp1;
dispLimit[2] = "2006 Apr 15"; //etc;
dispLimit[3] = "2006 Jun 18";
dispLimit[4] = "2006 Jul 09";
var GMToffset = -5; // this is your CURRENT GMT offset, whether Standard or Daylight
var refDate = new Date();
refDate.setHours(GMToffset+refDate.getHours()+refDate.getTimezoneOffset()/60);
refDate.setHours(0,0,0,0);
function init(){
for (i=1; i<dispLimit.length; i++)
{
if (new Date(dispLimit[i]) - refDate <= 0)
{
document.getElementById('disp'+i).style.display = 'none';
}
}
}
onload=init;
</script>
<style type="text/css">
div {
border:solid black 1px;
background-color:lightblue;
color:darkblue;
font-size:14pt;
font-family:arial;
width:550px;
height:220px;
overflow:auto;
padding:5px;
}
</style>
</head>
<body>
<div id='disp1'>
I'm out of date.
</div>
<br>
<div id='disp2'>
I'm NOT out of date
</div>
<br>
<div id='disp3'>
I'm NOT out of date
</div>
<br>
<div id='disp4'>
I'm NOT out of date
</div>
</body>
</html>
Of course, approaches of this sort all rely on the user's clock, which may or may not be accurate. Thus, if one of your "check dates" is 04/12/2006, and today is 04/14/2006, I would not see the content controlled by that check date. However, if for some reason, my clock is set to 04/14/2005, I'd still see everything, even though your chosen date has come and gone.
There are a number of reasons why users may have an incorrect clock (some on purpose, some may just not realize it's wrong), so don't use this for anything that is really "mission critical".
If it's important that the users don't see certain content after a certain date, you're far better off scripting something on the server side, so that you are in control of the clock, instead of your users.
That's good to know. Lucky for me I'm just to busy to try and watch the dates until I post again. So this isn't mission critical, but more like mission - better than it was
Do you think PHP would be a good choice for a server side answer?
Server side with PHP (or any other server side language) will allow you to test the date on the server and only include the image in the page if before that date.
This will not only correct the problem of people with incorrectly set dates on their computer, it will also make the page download faster and allow those with Javascript disabled to see the images.
Reply With Quote
Originally Posted by nmcm
Bookmarks