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 2 of 2 FirstFirst 12
Results 16 to 28 of 28
  1. #16
    New Coder
    Join Date
    Aug 2012
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts
    This code you have given me can go directly into the Wordpress HTML area of the page?

    ,,am I able to add the image banners I have created ie

    http://www.briantcomms.co.uk/wp-cont...e_Are_Open.jpg

    http://www.briantcomms.co.uk/wp-cont...ed_Banner1.jpg

    Rather than just having text 'Welcome to the store'? If so this is BRILLIANT thank you so much, I thought I would have to change the header.php but your way makes its so much easier.

    : )

  2. #17
    New Coder
    Join Date
    Aug 2012
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts
    can I add the image banners?

  3. #18
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,314
    Thanks
    203
    Thanked 2,565 Times in 2,543 Posts
    Quote Originally Posted by m30ndo View Post
    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 : (
    Simply place the code in an external file (no HTML tags <script> and </script>) on the pages you want it to be active and call it right ahead of the </body> tag.

    <script src="myjsfile.js"></script>
    </body>


    I don't know anything about Wordpress but I have said you can easily replace the text messages by images.

    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.

  4. #19
    New Coder
    Join Date
    Aug 2012
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thats great but how? Simply by pasting : http://www.briantcomms.co.uk/wp-cont...e_Are_Open.jpg

    Where the Welcome to the store text is ?

    Thanks again for you help.

  5. #20
    New to the CF scene
    Join Date
    Oct 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Awesome!!

    I have been searching for this for awhile now. I know this is an older thread but still has relevance. I am sure you have heard it a thousand times but I do not consider myself a coder by any stretch of the term. So here is my questions on the code as it refers to jmrker's post on 6/14/2012. I get how and where to change image refrences to my own and even adjusted the holidays I need and hours. Does this get saved as an external js file? or is it simply pasted before the </head> tag and then utilze <img id="logo" src="" alt=""> to place the image wherever on the page? Sorry if this is a n00b question

  6. #21
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,148
    Thanks
    39
    Thanked 506 Times in 500 Posts

    Lightbulb

    Quote Originally Posted by b0mbardo View Post
    I have been searching for this for awhile now. I know this is an older thread but still has relevance. I am sure you have heard it a thousand times but I do not consider myself a coder by any stretch of the term. So here is my questions on the code as it refers to jmrker's post on 6/14/2012. I get how and where to change image refrences to my own and even adjusted the holidays I need and hours. Does this get saved as an external js file? or is it simply pasted before the </head> tag and then utilze <img id="logo" src="" alt=""> to place the image wherever on the page? Sorry if this is a n00b question
    My assumption is that you are referring to this bit of code:
    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>
    The code as it is, is stand-alone. It should work if you save the file and call it with your browser as a file on you local computer or remote server.

    Can the JS be moved to an external file? Sure.
    Copy code between the <script> and </script> tags and paste it to an accessable location (usually same directory as program).
    Do not copy the <script> tags to the external file.
    Change the script reference to <script type="text/javascript" src="externalFileName.js"></script>

    If it still doesn't work, post the code you are using so we can see what you are doing differently.

    Good Luck!

  7. #22
    1j1
    1j1 is offline
    New to the CF scene
    Join Date
    Jun 2014
    Posts
    4
    Thanks
    2
    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!
    Hello! I'm looking for such code that would automatically change images (on my forum) depending on user's local time. Searched the web, tried many, but alas, none worked for me until I found this place & tried yours. Guess I won't be too embarrassed or ignored for saying that I'm a newbie in this coding thing... However, I would like to know what should be changed in the code so that it will display image #1 from 6am to 6pm, image #2 from 6pm to 9pm, and image #3 from 9pm till 6am, depending on user's local time. Hopefully, I'm not asking too much right on the first appearance on here. Thanks in advance!

    Kind regards!

  8. #23
    1j1
    1j1 is offline
    New to the CF scene
    Join Date
    Jun 2014
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I think it might be something like this but it doesn't work...

    <html>
    <head>
    <title> Logo Script </title>
    <script type="text/javascript">

    var logos = [
    'http://www.nova.edu/hpd/otm/pics/4fun/31.jpg',
    '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 HH = now.getHours();
    if ( (HH >= 6) && (HH < 18) ) {
    document.getElementById('logo').src = logos[0];
    } else if ( (HH >= 18) && (HH < 21) ) {
    document.getElementById('logo').src = logos[1];
    } else {
    document.getElementById('logo').src = logos[2];
    }
    </script>

    </head>
    <body>
    <img id="logo" src="" alt="">
    </body>
    </html>

  9. #24
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,314
    Thanks
    203
    Thanked 2,565 Times in 2,543 Posts
    Missing closing brace

    }
    </script>


    Try using your error console (F12 key) to expose syntax errors.

    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.

  10. Users who have thanked Philip M for this post:

    1j1 (07-13-2014)

  11. #25
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,148
    Thanks
    39
    Thanked 506 Times in 500 Posts

    Lightbulb

    As "Philip M" said or alternatively...

    Code:
    <html>
    <head>
    <title> Logo Script </title>
    <script type="text/javascript">
    
    var logos = [
       'http://www.nova.edu/hpd/otm/pics/4fun/31.jpg',
       'http://www.nova.edu/hpd/otm/pics/4fun/11.jpg',
       'http://www.nova.edu/hpd/otm/pics/4fun/21.jpg'
    ];
    function hourInfo(hr) {
      if ( (hr >= 6) && (hr < 18) ) { return 0; }  //  beween 6am to 5pm, inclusive
      if ( (hr >= 18) && (hr < 21) ) { return 1; } //  between 6pm to 8pm, inclusive
      if ( (hr < 6) || (hr > 20) ) { return 2; }   //  earlier than 6am or later than 8pm
      return 0;  // default, but may not be needed
    }
    onload = function () {
      var now = new Date();
      document.getElementById('logo').src = logos[hourInfo(now.getHours())];
    }
    </script>
    
    </head>
    <body>
    <img id="logo" src="" alt="">
    </body>
    </html>
    or even ...

    Code:
    <html>
    <head>
    <title> Logo Script </title>
    <script type="text/javascript">
    
    var logos = [
       'http://www.nova.edu/hpd/otm/pics/4fun/31.jpg',
       'http://www.nova.edu/hpd/otm/pics/4fun/11.jpg',
       'http://www.nova.edu/hpd/otm/pics/4fun/21.jpg'
    ];
    function inRange(hr,s,e) {
      if ( (hr >= s) && (hr <= e) ) { return true }  //  beween s to e, inclusive
      return false; 
    }
    function hourInfo(hr) {
      if (inRange(hr,6,17))  { return 0; }  //  beween 6am to 5pm, inclusive
      if (inRange(hr,18,20)) { return 1; }  //  between 6pm to 8pm, inclusive
      return 2;                             //  default to earlier than 6am or later than 8pm
    }
    onload = function () {
      document.getElementById('logo').src = logos[hourInfo((new Date()).getHours())];
      document.getElementById('logo').title = logos[hourInfo((new Date()).getHours())];
      document.getElementById('logo').alt = logos[hourInfo((new Date()).getHours())];
    }
    </script>
    
    </head>
    <body>
    <img id="logo" src="" alt="">
    </body>
    </html>
    Last edited by jmrker; 06-23-2014 at 12:52 AM.

  12. Users who have thanked jmrker for this post:

    1j1 (07-13-2014)

  13. #26
    1j1
    1j1 is offline
    New to the CF scene
    Join Date
    Jun 2014
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks for your replies - it works well now! How would it be if, say, I would need pic 1 to be displayed @ 09:45-09:59, pic 2 @ 10:00-18:29, pic 3 @ 18:30-09:44 ?

  14. #27
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,688
    Thanks
    80
    Thanked 4,648 Times in 4,610 Posts
    Untested, but below feels right.

    And now you can have as many images during the day as you want.

    Note that the image that has to wrap around past midnight needs to be entered twice, as shown.

    The ordering of the elements of the logos[] array is unimportant. The order of the inner array elements is important.


    Code:
    <html>
    <head>
    <title> Logo Script </title>
    <script type="text/javascript">
    
    var logos = [
        ['http://www.nova.edu/hpd/otm/pics/4fun/21.jpg','00:00','09:45'],
        ['http://www.nova.edu/hpd/otm/pics/4fun/31.jpg','09:45','10:00'],
        ['http://www.nova.edu/hpd/otm/pics/4fun/11.jpg','10:00','18:30'],
        ['http://www.nova.edu/hpd/otm/pics/4fun/21.jpg','18:30','24:00']
    ];
    onload = function () {
        for ( var i = 0; i < logos.length; ++i )
        {
            var curLogo = logos[i];
            var start = curLogo[1].split(':');
            var end   = curLogo[2].split(':');
            var curH = (new Date()).getHours();
            var curM = (new Date()).getMinutes();
            var curHHMM = curH * 100 + curM;
            if (    curHHMM >= start[0] * 100 + start[1] * 1
                 && curHHMM <  end[0] * 100 + end * 1
            ) {
                var curImg = curLogo[0];
                var img = document.getElementById('logo');
                img.src = img.title = img.alt = curImg;
                return;
            }
        }
        // ??? if we get here, some time during the day is not covered!
    }
    </script>
    
    </head>
    <body>
    <img id="logo" src="" alt="">
    </body>
    </html>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  15. #28
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,688
    Thanks
    80
    Thanked 4,648 Times in 4,610 Posts
    Or a probably better way:

    Put the JS code at the END of the page. Where it really belongs. Ask Felgall.

    Code:
    <html>
    <head>
    <title> Logo Script </title>
    </head>
    <body>
    <img id="logo" src="" alt="">
    
    <script type="text/javascript">
    
    var logos = [
        ['http://www.nova.edu/hpd/otm/pics/4fun/21.jpg','00:00','09:45'],
        ['http://www.nova.edu/hpd/otm/pics/4fun/31.jpg','09:45','10:00'],
        ['http://www.nova.edu/hpd/otm/pics/4fun/11.jpg','10:00','18:30'],
        ['http://www.nova.edu/hpd/otm/pics/4fun/21.jpg','18:30','24:00']
    ];
    
    for ( var i = 0; i < logos.length; ++i )
    {
        var curLogo = logos[i];
        var start = curLogo[1].split(':');
        var end   = curLogo[2].split(':');
        var curH = (new Date()).getHours();
        var curM = (new Date()).getMinutes();
        var curHHMM = curH * 100 + curM;
        if (    curHHMM >= start[0] * 100 + start[1] * 1
             && curHHMM <  end[0] * 100 + end * 1
        ) {
            var curImg = curLogo[0];
            var img = document.getElementById('logo');
            img.src = img.title = img.alt = curImg;
            break;
        }
    
    }
    </script>
    
    </body>
    </html>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


 
Page 2 of 2 FirstFirst 12

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
  •