Page 1 of 2 12 LastLast
Results 1 to 10 of 14

Thread: Change Content Depending On Time Of Day?

  1. #1
    Join Date
    May 2005
    Posts
    34
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Change Content Depending On Time Of Day?

    Hiya guys,

    I know the iFrame javascript that can display a different page depending on the day, but what I want is something that can change hourly.

    I'm creating a website for a radio station and want a 'now on air' picture which will change on the hour to show a picture of the current presenter. Each day will have different presenters at different times.

    How can this be done?

    Thanks!
    Matt

  2. #2
    Join Date
    Jul 2006
    Location
    Canada
    Posts
    2,581
    Thanks
    13
    Thanked 28 Times in 28 Posts

    Default

    This script goes by the clock on your computer.
    The numbers in the array below are the titles:

    Code:
    <html>
    <head>
    <script type="text/javascript">
    var titles = new Array("","1","2","3","4","5",
    "6","7","8","9","10","11"," 12"," 13","14",
    "15","16","17","18","19","20","21","22","23","24")
    onload=function dispdates() {
    var today = new Date()
    var hours = today.getHours()
    news.innerHTML=titles[hours]
    setTimeout("dispdates()",1000)
    }
    </script>
    </head>
    <body>
    <div id="news"></div>
    </body>
    </html>
    The red indicates the titles array
    Last edited by mburt; 08-21-2006 at 07:09 PM.
    - Mike

  3. #3
    Join Date
    May 2005
    Posts
    34
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks!

    So doI just put something like: images/presenter1.jpg inside the "" where the numbers are?

    Matt

  4. #4
    Join Date
    Jul 2006
    Location
    Canada
    Posts
    2,581
    Thanks
    13
    Thanked 28 Times in 28 Posts

    Default

    Nope. You have to use the entire HTML code:

    Code:
    var titles = new Array("","<img src='images/presenter1.jpg'">)
    Note: You have to use single-quotes.
    Also: You always have to leave the first parameter blank.
    - Mike

  5. #5
    Join Date
    May 2005
    Posts
    34
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Cool! Thanks so much

  6. #6
    Join Date
    May 2005
    Posts
    34
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Following up to this.

    Lets say I now wanted the pictures to change going by the proper time (i.e. on a server) rather than the users computer.

    How can I do this??

    Thanks!
    Matt

  7. #7
    Join Date
    Jul 2006
    Location
    Canada
    Posts
    2,581
    Thanks
    13
    Thanked 28 Times in 28 Posts

    Default

    Hmm... I'm not really sure about that. Maybe you could post this in the PHP section.
    - Mike

  8. #8
    Join Date
    Aug 2006
    Posts
    34
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by mburt
    This script goes by the clock on your computer.
    The numbers in the array below are the titles:

    Code:
    <html>
    <head>
    <script type="text/javascript">
    var titles = new Array("","1","2","3","4","5",
    "6","7","8","9","10","11"," 12"," 13","14",
    "15","16","17","18","19","20","21","22","23","24")
    onload=function dispdates() {
    var today = new Date()
    var hours = today.getHours()
    news.innerHTML=titles[hours]
    setTimeout("dispdates()",1000)
    }
    </script>
    </head>
    <body>
    <div id="news"></div>
    </body>
    </html>
    The red indicates the titles array
    I noticed that this script uses the onLoad function. My questions are:
    (a). Can i put this script in external javascript files, and if yes, how do I call it up?
    (b). If there are other javascripts on the page that uses the same onLoad function, how do i combine the "dispdates" with other the other functions?

  9. #9
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,876
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    Code:
    var serverTimeOffset = 0; // Offset between UTC/GMT and the server time (hours)
    var newsElementID = "news"; // ID of the "news" element
    
    var showTitles = [
      "0000 - 0059 news",
      "0100 - 0159 news",
      "0200 - 0259 news",
      "0300 - 0359 news"
      // Add more...
    ];
    
    function addEvent(el, ev, f) {
      if(el.addEventListener)
        el.addEventListener(ev, f, false);
      else if(el.attachEvent)
        el.attachEvent("on" + ev, f);
      else
        el['on' + ev] = f;
    }
    
    addEvent(window, "load", function() {
      var newsElement = document.getElementById(newsElementID), d;
      window.setInterval(
        function() {
          (d = new Date()).setTime(d.getTime() + (3600000 * serverTimeOffset));
          newsElement.innerHTML = showTitles[d.getUTCHours()] || "Nothing.";
        },
      1000);
    });
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends franšais | entiendo espa˝ol | t˘i Ýt hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

  10. #10
    Join Date
    Aug 2006
    Posts
    34
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by Twey
    Code:
    var serverTimeOffset = 0; // Offset between UTC/GMT and the server time (hours)
    var newsElementID = "news"; // ID of the "news" element
    
    var showTitles = [
      "0000 - 0059 news",
      "0100 - 0159 news",
      "0200 - 0259 news",
      "0300 - 0359 news"
      // Add more...
    ];
    
    function addEvent(el, ev, f) {
      if(el.addEventListener)
        el.addEventListener(ev, f, false);
      else if(el.attachEvent)
        el.attachEvent("on" + ev, f);
      else
        el['on' + ev] = f;
    }
    
    addEvent(window, "load", function() {
      var newsElement = document.getElementById(newsElementID), d;
      window.setInterval(
        function() {
          (d = new Date()).setTime(d.getTime() + (3600000 * serverTimeOffset));
          newsElement.innerHTML = showTitles[d.getUTCHours()] || "Nothing.";
        },
      1000);
    });
    I copied the scripts above and saved it as msg.js in an external js file. Later
    i tried to called it with the following javascript:

    <script src="msg.js" type="text/javascript"></script>

    Nothing appeared on the page, but when I click at the little yellow triangle at the bottom left of the browser, the message says that "newsElement is null or not an object".
    what could be the problem?

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
  •