SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Zealot
    Join Date
    Nov 2007
    Posts
    125
    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,938
    Mentioned
    214 Post(s)
    Tagged
    12 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
    325
    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 Zealot
    Join Date
    Nov 2007
    Posts
    125
    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,938
    Mentioned
    214 Post(s)
    Tagged
    12 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
    325
    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,938
    Mentioned
    214 Post(s)
    Tagged
    12 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
    325
    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,938
    Mentioned
    214 Post(s)
    Tagged
    12 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
  •