Looking for - Hide content based on date

This site is best viewed in a modern browser with JavaScript enabled.

Looking for - Hide content based on date

CurrentWave

Hello,

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.

Thank you for the help!

Jami

nmcm

put your content in a div and set it's visibility to hidden and id it content (for exemple)

in the head section place the following script

<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

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

function showContent(){
   if ( new Date() < limitDate ){ 
      document.getElementById( "content" ).style.visibility = "visible"
   }
   else{
      document.getElementById( "content" ).innerHTML = ""
   }
}

CurrentWave

Thank you so much! This is great....

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?

Thank you,

Jami

nmcm

24 hour time clock, so, it's not midnight...

CurrentWave

nmcm wrote:
24 hour time clock, so, it's not midnight...

Okay... sorry for the bumb questions, but I am learning - so its like military time, where 1am = 1 and 12 midnight = 0

I think I've got it. Thanks!

CurrentWave

Sooooo if I used id=content1 for first event and id=content2 for a second then -

var limitDate would have to be var limitDate1, and var limitDate2 respectively set for their own ending dates.....

And somehow I have to have < limitDate ){ AND "content" learn to count in the script...?

Is that how I would be able to set more than one event to disapear?

Thanks for your help nmcm, I really appreciate it.

balloonbuffoon

This is untested, bu should work:

<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.

--Steve

James_Gatka

<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>

CurrentWave

Thanks Steve and James, this is great it will really help me 'clean up' my act!

I go now to test.....

~Jami

Tweak4

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.

CurrentWave

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 :rolleyes:

Do you think PHP would be a good choice for a server side answer?

Thank you for posting that important point.

felgall

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.