Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9

Thread: Banner -Times

  1. #1
    New Coder
    Join Date
    May 2006
    Posts
    48
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Banner -Times

    Hi Ppl,
    I have a banner and it is for an internet radio station. I want the DJ to be shown on the banner be this would change every hour. 24/7 how shall i do this?

  • #2
    Senior Coder
    Join Date
    Jul 2005
    Location
    New York, NY
    Posts
    1,084
    Thanks
    4
    Thanked 19 Times in 19 Posts

    Lightbulb

    More than likely, you'd be better served by a server side language determining which image to send up at the current time. I would check out PHP or ASP for that. You'll have to add a little javascript anyway, so I'll cover that now. If you have to do it with javascript and no server side language you still can.

    You need the "setInterval" function, and you need to the interval of a function (like, "changeDJBanner") to be 1 hour.

    Then, if you have the server side working to serve you the right image, you can make your changeDJBanner function simple. Otherwise, you'll need to figure out which image to display in the javascript. I'll show both:

    For this you need a php script called DJImageServer.php that sends a header for JPEG data, calculates the current time, and finds the necessary file, reads it, and sends the data as a byte stream.

    Code:
    function changeDJBannerWithServer()
    {
      var bannerElement = document.getElementById("djBannerIMGTag");
      var djImg = new Image();
      djImg.src = 'DJImageServer.php';
      bannerElement.src = djImg.src;
    }
    
    setInterval(changeDJBannerWithServer, 3600000);
    For this you need an image per hour named DJImage0.jpg through DJImage23.jpg

    Code:
    function changeDJBannerWithoutServer()
    {
      var bannerElement = document.getElementById("djBannerIMGTag");
      var today = new Date();
      var djImg = new Image();
      djImg.src = 'DJImage'+today.getHours()+'.jpg';
      bannerElement.src = djImg.src;
    }
    
    setInterval(changeDJBannerWithoutServer, 3600000);

  • #3
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,511
    Thanks
    3
    Thanked 504 Times in 491 Posts
    to tke care if the first part hour
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    
    <head>
      <title></title>
    </head>
    
    <body onload="InitBanner()" >
    
    <img id="Test" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="500" height="500" >
    
    <script language="JavaScript" type="text/javascript">
    <!--
    var ImgPath='http://www.vicsjavascripts.org.uk/StdImages/';
    var ImageAry=['Zero.gif','One.gif','Two.gif','Three.gif','Four.gif','Five.gif'];
    
    // just to make arry of 24 images
    while (ImageAry.length<24){
     ImageAry.push(ImageAry[ImageAry.length-6]);
    }
    
    
    var zxcImgCnt;
    
    function InitBanner(){
     var ToDay=new Date();
     var Hour=ToDay.getHours();
     var NextHour=new Date(ToDay.getFullYear(),ToDay.getMonth(),ToDay.getDate(),Hour+1)-ToDay;
     zxcImgCnt=Hour-1;
     document.getElementById('Test').src=ImgPath+ImageAry[zxcImgCnt];
     setTimeout('Banner()',NextHour);
    }
    
    function Banner(){
     zxcImgCnt=++zxcImgCnt%ImageAry.length;
     document.getElementById('Test').src=ImgPath+ImageAry[zxcImgCnt];
     setTimeout('Banner()',1000*60*60);
    }
    
    
    //-->
    </script>
    
    </body>
    
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #4
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,640
    Thanks
    0
    Thanked 649 Times in 639 Posts
    I wouldn't use setTimeout with an hour delay as that will update the banner exactly one hour after the person first visits the page (not that anyone will stay there long enough for it to trigger). Whant you need is a setInterval loop that tests if the hour has changed and then changes the banner appropriately. You will also need to adjust the time setting for whichever timezone that you want to use rather than using the timezone setting of the computer running the browser. There is nothing you can do when the time on the computer is set wrong and the wrong image will always display in that case.

    To avoid all of these issues go with a server side solution for loading the initial banner. At least then you will not be more than 59 minutes out with the changes of the banner from within the Javascript.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #5
    Senior Coder
    Join Date
    Jul 2005
    Location
    New York, NY
    Posts
    1,084
    Thanks
    4
    Thanked 19 Times in 19 Posts
    Ok, the timezone thing is a good reason to go server side for the image select. but here's a great way to keep your banner in sync.

    Have the server generate the number of minutes to the next hour and set a timeout like so:

    Code:
    setTimeout(bannerInitRotate, <?php echo $numberOfMinutesToNextHour;?>);
    
    function bannerInitRotate()
    {
      bannerRotate();
      setInterval(bannerRotate, 360000);
    }
    
    function bannerRotate()
    {
      img.src = 'DJImageServer.php';
    }
    This will fire the banner rotate at the next hour based on when the server thinks the next hour is, and then it will begin the hour interval for rotation. This will be the best way to ensure an accurate banner for the client. If they show up at 8:59, they get the 8:00 banner, and one minute later it swaps, if they leave the page open for a day, every hour it will change as you want. If they're in a different timezone, by using the server to generate the time, you won't have to worry about it, and if they're clock is set wrong, you're using relative time (minutes to the next hour) based on the server time, so you're only using their clock for counting, not reference.

  • #6
    New Coder
    Join Date
    May 2006
    Posts
    48
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok cheers guys thats alot of help
    However what script do I need on my server for the banner to actually change every hour?

  • #7
    New Coder
    Join Date
    May 2006
    Posts
    48
    Thanks
    0
    Thanked 0 Times in 0 Posts
    any1 know?

  • #8
    New Coder
    Join Date
    May 2006
    Posts
    48
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Is there anyway for the banner to change time every hour but the script to change not the whole banner. I have my banner in fireworks. Is it possible?

  • #9
    New Coder
    Join Date
    May 2006
    Posts
    48
    Thanks
    0
    Thanked 0 Times in 0 Posts
    can u help me?


  •  

    Posting Permissions

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