www.webdeveloper.com
Results 1 to 12 of 12

Thread: Looking for - Hide content based on date

  1. #1
    Join Date
    Mar 2003
    Location
    Oregon, USA
    Posts
    33

    Looking for - Hide content based on date

    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

  2. #2
    Join Date
    Jan 2004
    Location
    Évora
    Posts
    33
    put your content in a div and set it's visibility to hidden and id it content (for exemple)

    <div style="visibility:hidden" id=content>...</div>

    in the head section place the following script

    Code:
    <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?

  3. #3
    Join Date
    Mar 2003
    Location
    Oregon, USA
    Posts
    33

    Wow....nmcm

    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

  4. #4
    Join Date
    Jan 2004
    Location
    Évora
    Posts
    33
    24 hour time clock, so, it's not midnight...

  5. #5
    Join Date
    Mar 2003
    Location
    Oregon, USA
    Posts
    33
    Quote Originally Posted by nmcm
    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!
    Last edited by CurrentWave; 04-14-2006 at 09:33 AM. Reason: words didn't come out right :rolleyes:

  6. #6
    Join Date
    Mar 2003
    Location
    Oregon, USA
    Posts
    33
    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.

  7. #7
    Join Date
    Jan 2005
    Location
    Illinois
    Posts
    815
    This is untested, bu should work:
    Code:
    <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
    Save The Shirts!
    Don't overuse exclamation marks!!!!!!

  8. #8
    Join Date
    Jan 2006
    Location
    I'm in GMT -5
    Posts
    561
    Code:
    <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>

  9. #9
    Join Date
    Mar 2003
    Location
    Oregon, USA
    Posts
    33
    Thanks Steve and James, this is great it will really help me 'clean up' my act!

    I go now to test.....

    ~Jami

  10. #10
    Join Date
    May 2005
    Location
    Northern Indiana
    Posts
    597
    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.

  11. #11
    Join Date
    Mar 2003
    Location
    Oregon, USA
    Posts
    33
    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?

    Thank you for posting that important point.

  12. #12
    Join Date
    Mar 2005
    Location
    Sydney, Australia
    Posts
    7,974
    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.
    Stephen

Thread Information

Users Browsing this Thread

There are currently 2 users browsing this thread. (0 members and 2 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles