SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2007
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    show content for specific time period

    Hi there,

    I am trying to display some content for a two hour slot, for example 1.00pm - 3.00pm.

    I have this code:

    PHP Code:
    //initialize date object
        
    var = new Date();
        var 
    currentHour d.getHours(); //note 0-23

        
    if (currentHour 1
         { 
             $(
    'div').append('hello');
          }
        else if (
    currentHour == 3)
        {
           $(
    'div').append('content shown for two hours');
        }
        else {
           $(
    'div').append('hello'); 
          } 
    Is there a way I can modify the above to show the content for two hours?

    Thanks

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,312
    Mentioned
    177 Post(s)
    Tagged
    8 Thread(s)
    Hi,

    I would do it like this:

    Code JavaScript:
    window.setInterval(function() {
      var d = new Date();
      if (d.getHours() > 12 && d.getHours() < 15) { // if it's after 1pm but before 3pm
        $('div').show();
      } else {
        $('div').hide();
      }
    }, 1000 * 60) // this will run every minute

    This uses setInterval to run a check every minute and hide or show the content accordingly.

  3. #3
    SitePoint Addict ketting00's Avatar
    Join Date
    Jul 2011
    Posts
    309
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    I would rather go Ajax:
    Code:
    var currentTime = new Date();
    
    var jsClock = new Date(currentTime);
    
    function getTime(what){
    	var output=(what.toString().length==1)? "0"+what : what;
    	return output;
    }
    
    window.onload = function(){
    	setInterval("displaytime()", 1000);
    	refreshDiv();
    }
    
    function refreshDiv() {
    	setInterval("1300Hours();", 1000 * 60); // every hour
    }
    
    function 1300Hours() {
    	$('#1300').css({'display':'block'});
    	$('#1500').css({'display':'none'});
    }
    
    function 1500Hours() {
    	$('#1500').css({'display':'block'});
    	$('#1300').css({'display':'none'});
    }
    
    function displaytime(){
    	jsClock.setSeconds(jsClock.getSeconds()+1);
    	var currentTimeString = getTime(jsClock.getHours())+":"+getTime(jsClock.getMinutes())+":"+getTime(jsClock.getSeconds());
    	document.getElementById("clock").innerHTML = currentTimeString;
    	
    	if(currentTimeString == 13:00:00) {
    		1300Hours();
    	}
    	
    	if(currentTimeString == 15:00:00) {
    		1500Hours();
    	}
    }
    warning: codes untested, but I copied from my active project with a slight alteration

  4. #4
    SitePoint Enthusiast
    Join Date
    Nov 2007
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks. I am trying ketting00's idea.

    I set this css up:

    PHP Code:
    #1300{
    background#ff0000;
    width200px;
    height200px;
    }


    #1500{
    background#000000;
    width200px;
    height200px;

    but where do I set up the div with the content I want to display?

    Thanks

  5. #5
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,312
    Mentioned
    177 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by ebsolutions View Post
    Thanks. I am trying ketting00's idea.
    Fair enough.

    Quote Originally Posted by ebsolutions View Post
    but where do I set up the div with the content I want to display?
    Anywhere on your page. Also include a div with an id of "clock" to see a groovy clock.

    I might point out a couple of things:

    If the user visits your page and the time is between 13:00 and 15:00, the script won't fire.
    Also, AFAIK, a JavaScript function name cannot start with a number.

    You might want to address these two points.

  6. #6
    SitePoint Addict ketting00's Avatar
    Join Date
    Jul 2011
    Posts
    309
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    Fair enough.
    If the user visits your page and the time is between 13:00 and 15:00, the script won't fire.
    Also, AFAIK, a JavaScript function name cannot start with a number.

    You might want to address these two points.
    Pullo is right.

    As I said I use Ajax to update the "div" automatically at a specific time. It's a little more complicated and no need to show, hide the "div".

  7. #7
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,312
    Mentioned
    177 Post(s)
    Tagged
    8 Thread(s)
    Ah right, I was wondering where the AJAX part came into things.

    So, if I understand you correctly, you keep track of the time, then when the time is between two specified points, you load the content into a pre-defined div.
    Did I understand that right?

  8. #8
    SitePoint Addict ketting00's Avatar
    Join Date
    Jul 2011
    Posts
    309
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    It's not just about loading content and Ajax.

    Javascript is powerful more than that. I call this automatic event.

    I event light up my room with this method. Yes, keep track of time and trigger an event at a preset timing.

    However, I tried to change time format from 00:00:00 to a commonly 7:30 AM unsuccessful.

  9. #9
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,312
    Mentioned
    177 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by ketting00 View Post
    I event light up my room with this method.


Bookmarks

Posting Permissions

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