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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 28
  1. #1
    New to the CF scene
    Join Date
    Jun 2011
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question Script to change image at time and day

    I don't know if this is possible, so I figured I'd ask a few gurus. I know it is possible to have an image change at a certain time of day, and it's also possible to have an image change by day, but is there a script to do both?

    What I want to do is have the first image show from 8am cst to 6pm cst mon-fri, it's our open sign for live chat. The the rest of the time have the second image.

    Is this possible with any type of script? Any help you can give is greatly appreciated!

  • #2
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,112
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Lightbulb Something to try ...

    See if this meets your needs...
    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <title> Logo Script </title>
    <script type="text/javascript">
    
    var logos = [
        'http://www.nova.edu/hpd/otm/pics/4fun/11.jpg', 
        'http://www.nova.edu/hpd/otm/pics/4fun/21.jpg'
    ]; 
    onload = function () {
      var now = new Date();
      var DOW = now.getDay();
      var HH = now.getHours();
      if ( ((HH >= 8) && (HH < 18)) && ((DOW >= 1) && (DOW <= 6)) ) {
        document.getElementById('logo').src = logos[0];
      } else {
        document.getElementById('logo').src = logos[1];
      }
    }
    </script>
    
    </head>
    <body>
    <img id="logo" src="" alt="">
    </body>
    </html>

  • Users who have thanked jmrker for this post:

    Soliloquent (06-14-2011)

  • #3
    New to the CF scene
    Join Date
    Jun 2011
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by jmrker View Post
    See if this meets your needs...
    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <title> Logo Script </title>
    <script type="text/javascript">
    
    var logos = [
        'http://www.nova.edu/hpd/otm/pics/4fun/11.jpg', 
        'http://www.nova.edu/hpd/otm/pics/4fun/21.jpg'
    ]; 
    onload = function () {
      var now = new Date();
      var DOW = now.getDay();
      var HH = now.getHours();
      if ( ((HH >= 8) && (HH < 18)) && ((DOW >= 1) && (DOW <= 6)) ) {
        document.getElementById('logo').src = logos[0];
      } else {
        document.getElementById('logo').src = logos[1];
      }
    }
    </script>
    
    </head>
    <body>
    <img id="logo" src="" alt="">
    </body>
    </html>
    I hate saying it, but I'm still learning java, and I need to ask a few dumb questions. What is the breakdown of this script? I understand about half of what it is doing, but not all of it.
    I know 11.jpg and 21.jpg are the two images, the HH >= are the hours of 8-6, but will they be set to the server time or local time of the customer? We have several users on pacific time and we are central, and need it to always be on central time. The DOW >= is day of the week? That's where I get confused lol, what does DOW do and what are appropriate changes to be made to it? Such as holidays, I would go and change the script for a few days absence. And I think the 'logos' part of the script is for the images. logos [0] is the main image to display during the times set and logos [1] is for the rest of the time?

  • #4
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,112
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Exclamation

    Comments in RED below:

    Quote Originally Posted by Soliloquent View Post
    I hate saying it, but I'm still learning java, and I need to ask a few dumb questions. What is the breakdown of this script? I understand about half of what it is doing, but not all of it.
    If you are trying to learn 'java', then you are on the wrong forum... This is the 'javascript' forum.
    That being said, the following are for the script in post #2


    I know 11.jpg and 21.jpg are the two images, the HH >= are the hours of 8-6, but will they be set to the server time or local time of the customer? We have several users on pacific time and we are central, and need it to always be on central time.
    AFAIK, it is the server time setting. There are correction functions for GMT time zones.
    Do a google search with: "javascript Date()" for a description of these functions.


    The DOW >= is day of the week? That's where I get confused lol, what does DOW do and what are appropriate changes to be made to it? Such as holidays, I would go and change the script for a few days absence.
    DOW is formed from the Date() function to give you the Day_of_Week for the date specified, which is 'now' in the script.
    Values returned are 0..6 which represent 'Sunday'..'Saturday'.

    In you original post, you made no mention of holidays, absence, etc. so the script above does not account for such. I can expand on the script, but I would need to know ALL information to code for special cases. You could also search this forum for a ton of ideas on how this has been accomplished by others. Sort of depends on how interested you are in learning javascript (not java).


    And I think the 'logos' part of the script is for the images. logos [0] is the main image to display during the times set and logos [1] is for the rest of the time?
    Correct.

  • #5
    New to the CF scene
    Join Date
    Jun 2011
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by jmrker View Post
    In you original post, you made no mention of holidays, absence, etc. so the script above does not account for such. I can expand on the script, but I would need to know ALL information to code for special cases. You could also search this forum for a ton of ideas on how this has been accomplished by others. Sort of depends on how interested you are in learning javascript (not java).
    I ment javascript, I apologize for that. I forget that java exists lol.
    As for the other dates, they aren't nessicary for the script, that was more of an afterthought. We are closed most major holidays, but not always, like we may be open one year on labor day and not the next. My boss can be fickle. If it comes to the point where it seems like it would be needed, I will search through the forums and see what others have done, like you suggested. I was mainly asking for times we would be closed for 2 or 3 days extra, I would just change the script for those few days, then change it back.

    Thank you very much for your help, I'm sorry I came in sounding like a dolt.

    I do have one final question, for the Date, you mentioned that 0-6 represent sun-sat, yet the script has 6 as the final day. Why is that? I am probably wrong, but I figured it would end on 5 for Friday.

  • #6
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,112
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Lightbulb

    You were right about the test for Saturday. My lightening fast fingers got away from me.

    You could add some test for the holidays of the year if you want and know them ahead of time.
    You could always modify the 'holidays' array for last minute changes.

    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <title> Logo Script </title>
    <script type="text/javascript">
    // For: http://www.codingforums.com/showthread.php?p=1101084#post1101084
    
    var logos = [
    	'http://www.nova.edu/hpd/otm/pics/4fun/11.jpg',  // on-air image
    	'http://www.nova.edu/hpd/otm/pics/4fun/21.jpg',  // off-air image
    	'http://www.nova.edu/hpd/otm/pics/4fun/31.jpg'   // holidays image
    ]; 
    var holidays = ['1/1', '2/14', '3/17', '6/6',  '6/14',
    		'7/4','10/31','11/24','11/25','12/24','12/25'];
    
    onload = function () {
      var now = new Date();
      var DOW = now.getDay();
      var HH = now.getHours();
      if ( ((HH >= 8) && (HH < 18)) && ((DOW >= 1) && (DOW < 6)) ) {
        document.getElementById('logo').src = logos[0];
      } else {
        document.getElementById('logo').src = logos[1];
      }
      
      var tmp;
      for (var i=0; i<holidays.length; i++) {
    	tmp = new Date(holidays[i]+'/'+now.getFullYear());
    //	alert(tmp.toDateString()+'\n'+now.toDateString());  // for testing
    	if (tmp.toDateString() == now.toDateString()) {
          document.getElementById('logo').src = logos[2];
        }
      }
    }
    </script>
    
    </head>
    <body>
    <img id="logo" src="" alt="">
    </body>
    </html>
    Good Luck!

  • #7
    New to the CF scene
    Join Date
    Jun 2011
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by jmrker View Post
    You were right about the test for Saturday. My lightening fast fingers got away from me.

    You could add some test for the holidays of the year if you want and know them ahead of time.
    You could always modify the 'holidays' array for last minute changes.

    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <title> Logo Script </title>
    <script type="text/javascript">
    // For: http://www.codingforums.com/showthread.php?p=1101084#post1101084
    
    var logos = [
    	'http://www.nova.edu/hpd/otm/pics/4fun/11.jpg',  // on-air image
    	'http://www.nova.edu/hpd/otm/pics/4fun/21.jpg',  // off-air image
    	'http://www.nova.edu/hpd/otm/pics/4fun/31.jpg'   // holidays image
    ]; 
    var holidays = ['1/1', '2/14', '3/17', '6/6',  '6/14',
    		'7/4','10/31','11/24','11/25','12/24','12/25'];
    
    onload = function () {
      var now = new Date();
      var DOW = now.getDay();
      var HH = now.getHours();
      if ( ((HH >= 8) && (HH < 18)) && ((DOW >= 1) && (DOW < 6)) ) {
        document.getElementById('logo').src = logos[0];
      } else {
        document.getElementById('logo').src = logos[1];
      }
      
      var tmp;
      for (var i=0; i<holidays.length; i++) {
    	tmp = new Date(holidays[i]+'/'+now.getFullYear());
    //	alert(tmp.toDateString()+'\n'+now.toDateString());  // for testing
    	if (tmp.toDateString() == now.toDateString()) {
          document.getElementById('logo').src = logos[2];
        }
      }
    }
    </script>
    
    </head>
    <body>
    <img id="logo" src="" alt="">
    </body>
    </html>
    Good Luck!
    That sounds great, thank you! This is exactly what I needed, and thank you for my lesson, I feel a little more comfortable dealing with javascript

    I have one last question and I'll get out of your hair; would it be possible to make the image a link as well? If so, how would I do that? Lol

  • #8
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,112
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Lightbulb

    Quote Originally Posted by Soliloquent View Post
    That sounds great, thank you! This is exactly what I needed, and thank you for my lesson, I feel a little more comfortable dealing with javascript

    I have one last question and I'll get out of your hair; would it be possible to make the image a link as well? If so, how would I do that? Lol
    You're most welcome.
    Happy to help.

    Concerning the link, modify the <img...> tag like:
    Code:
    <img src="http://www.nova.edu/hpd/otm/pics/4fun/61.jpg" onclick="alert('Angry')">
    or
    <img src="http://www.nova.edu/hpd/otm/pics/4fun/51.jpg" onclick="window.location.href='http://www.nova.edu'">
    Depends upon the kind of event you wish to perform on the onclick action.

    Good Luck!

  • #9
    New Coder
    Join Date
    Aug 2012
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts
    HI this is pretty much exactly what I am looking for... excellent.. Trouble is I am very new to coding, I am currently using a wordpress based site that I want to add an image to that changes in the London GMT. Basically an image says "call now we are open" then when we are closed I want the image to say "we are closed".. Can I paste this code into Wordpress, or do I have to change other parts of the code, your help is much appreciated..

    J.

  • #10
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,112
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Question

    Quote Originally Posted by m30ndo View Post
    HI this is pretty much exactly what I am looking for... excellent.. Trouble is I am very new to coding, I am currently using a wordpress based site that I want to add an image to that changes in the London GMT. Basically an image says "call now we are open" then when we are closed I want the image to say "we are closed".. Can I paste this code into Wordpress, or do I have to change other parts of the code, your help is much appreciated..

    J.
    Unclear to me from your questions:

    1. What code are you using at the moment? Do you have a link?
    2. Where are the images suppose to be found and where do you want them displayed?
    3. I don't use Wordpress, so I'm not sure how to answer that part of your question.
    Let's get some working code and see if it can be inserted into your Wordpress file.

    You should start a fresh thread with your question and reference this link or your code to view in the new thread.

  • #11
    New Coder
    Join Date
    Aug 2012
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for replying jmrker.

    The link to one of the pages I want to use is : http://www.briantcomms.co.uk/service...hone-broadband

    The image of he woman at the top will say 'We are open, please call now' I want this to appear in our opening hours 830am - 830pm and then when we are closed I want another picture to appear saying 'We are now closed'.

    You are a superstar for helping definately worth a coffee or a beer on me : )

    J.

  • #12
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,112
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Lightbulb

    Quote Originally Posted by m30ndo View Post
    Thanks for replying jmrker.

    The link to one of the pages I want to use is : http://www.briantcomms.co.uk/service...hone-broadband

    The image of he woman at the top will say 'We are open, please call now' I want this to appear in our opening hours 830am - 830pm and then when we are closed I want another picture to appear saying 'We are now closed'.

    You are a superstar for helping definately worth a coffee or a beer on me : )

    J.
    I could find the 'Open' banner, but not the 'Closed' one, so you will need to change the reference.
    You did not make reference to holiday hours should they occur, so this version leaves them out for simplicity. Easy enough to add them back into the logic.
    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <title> Logo Script </title>
    <script type="text/javascript">
    // For: http://www.codingforums.com/showthread.php?p=1101084#post1101084
    
    var logos = [
    	'http://www.briantcomms.co.uk/wp-content/uploads/2012/08/Briant_Open_Banner1.jpg',  // Open image
    	'http://www.nova.edu/hpd/otm/pics/4fun/21.jpg'                                      // Closed image
    ]; 
    
    onload = function () {
      var now = new Date();
      var DOW = now.getUTCDay();
      var HH = now.getUTCHours();   if (HH < 10) { HH = '0'+HH; }
      var MM = now.getUTCMinutes(); if (MM < 10) { MM = '0'+MM; }
      var HHMM = ''+HH+''+MM;
    
      if ( ((HHMM >= '0830') && (HHMM < '2030')) ) {  // 08:30am to 8:30pm in military time
        document.getElementById('logo').src = logos[0];
      } else {
        document.getElementById('logo').src = logos[1];
      }
      
    }
    </script>
    
    </head>
    <body>
    <img id="logo" src="" alt="">
    </body>
    </html>
    The biggest change was going from getDay(), getHours(), and getMinutes()
    to getUTCDay(), getUTCHours() and getUTCMinutes() functions.

    Since the UTC functions use GMT and it appears that your post is from the UK,
    I don't think further adjustments are required. If you needed for different time zones
    then you would need to add logic for this with a getTimeZoneOffset() function
    See: http://www.quackit.com/javascript/ja..._functions.cfm

  • #13
    New Coder
    Join Date
    Aug 2012
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts
    This is now working THANK YOU, THANK YOU..

    The only problem I have now is I do NOT want the Banner to appear on the homepage, is there some code I can add for the image to appear on every page except the home page?

    You can see my problem : www.briantcomms.co.uk

    Thank you.

  • #14
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,174
    Thanks
    203
    Thanked 2,549 Times in 2,527 Posts
    Place the relevant code only on the pages you wish the image to appear. The Javascript should be an external file.

    UTC time is not the same as London Time when daylight saving is in operation.
    It would help if you indicated your country. You refer to "Labor Day" (USA) but also London GMT.

    Here is another shop open/closed script:-

    Code:
    <html>
    <head>
    <style type="text/css">
    
    #openSign.OPEN {
        color: green;
        background-color: yellow;
        font-size: x-large;
        width:350px;
    }
    #openSign.CLOSED {
        color : red;
        background-color: pink;
        font-size: large;
        width:350px;
    }
    
    </style>
    
    <script type="text/javascript">
    
    var OPENAT = 7.5; // 7:30 AM ... change as appropriate - can be fractions of an hour e.g. 7.5 = 7:30am
    var CLOSEAT = 21; // 9:00 PM ... change as appropriate
    var OPENATSAT = 8.75;  // 8.45 AM .. change as appropriate
    var CLOSEATSAT = 13;  // 1.00 PM ... change as appropriate
    
    function areWeOpen( ) {
    
    var sign = document.getElementById("openSign");
    var day = new Date().getDay();
    var hour = new Date().getHours();
    var mins = new Date().getMinutes();
    hour = hour + mins/60;
    if ( day >=1 && day <=5 && hour >= OPENAT && hour < CLOSEAT )  {  // Monday - Friday
    sign.innerHTML = "We are now OPEN";
    sign.className = "OPEN";
    } 
    else if ( day == 6  && hour >= OPENATSAT && hour < CLOSEATSAT )  {  // day 6 = Saturday
    sign.innerHTML = "We are now OPEN";
    sign.className = "OPEN";
    } 
    else {
    sign.innerHTML = "Sorry, we are now CLOSED";
    sign.className = "CLOSED";
    }
    
    }
    </script>
    </head>
    
    <body onload = "areWeOpen()">
    <center>
    <h2>Welcome to our Store</h2>
    <br/>
    <h3 id="openSign"></h3>
    <br/>
    </center>
    ... rest of page ...
    </body>
    </html>
    Obviously you can replace the text by an image.
    Last edited by Philip M; 09-23-2012 at 01:50 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #15
    New Coder
    Join Date
    Aug 2012
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for your help Philip, a user from this forum wrote the code for me, I have added it to the header.php was this the wrong thing to do?

    I apologise I am very new to coding, I tried simply adding this code to the page within Wordpress but this did not work : (


  •  
    Page 1 of 2 12 LastLast

    Tags for this Thread

    Posting Permissions

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