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 27

Thread: timed images?

  1. #1
    New Coder
    Join Date
    Jun 2008
    Posts
    15
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Question timed images?

    is it possible to have an image appear for a certain number of hours and then just disappear on its own?

    can it be done with javascript or do I have to use some other language?

  • #2
    Regular Coder Nile's Avatar
    Join Date
    Jun 2008
    Posts
    280
    Thanks
    2
    Thanked 46 Times in 46 Posts
    The script below will display an image only when the hours are between 10-20:
    Code:
    <html>
    <head>
    <script type="text/javascript">
    function disapearImg(){
    var dispT;
    var date = new Date();
    var hours = date.getHours();
    switch(hours){
    case 10,11,12,13,14,15,16,17,18,19,20:
    dispT = "<img src='http://codingforums.com/img/logo.gif' />";
    break;
    default:
    dispT = "";
    break;
    }
    document.getElementById('imgDisplay').innerHTML=dispT;
    setTimeout("disapearImg",5000);
    }
    </script>
    <title>Disapearing Image</title>
    </head>
    <body onLoad="disapearImg()">
    <div id="imgDisplay"></div>
    </body>
    </html>
    In the blue change the hours, separate them by commas, and in the red put your image location.
    I hope this works, Nile.
    Last edited by Nile; 06-20-2008 at 02:21 PM.

  • #3
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,982
    Thanks
    203
    Thanked 2,536 Times in 2,514 Posts
    No, it does not work!

    Try this:-

    Code:
    <html>
    <head>
    <script type = "text/javascript">
    function disappearImg() {
    var now = new Date();
    var hours = now.getHours();
    if (hours > 9 && hours < 21) {  // show image between 10 and 20 hours incl.
    var dispT = "<img src='http://codingforums.com/img/logo.gif'>";
    }
    else {
    var dispT = "";
    }
    document.getElementById('imgDisplay').innerHTML = dispT;
    setTimeout("disappearImg", 10000);  // check hour value every 10 seconds}
    
    </script>
    </head>
    
    <body onLoad="disappearImg()">
    <div id="imgDisplay"></div>
    
    </body>
    </html>
    To make it clear, the image will appear if the page is loaded between 1000 and 2059, or if loaded before that time when the hour reaches 1000, and will disappear when the hour reaches 2100. If the 'appear' and 'disappear' feature is not wanted, then delete the line in red.


    All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.
    Last edited by Philip M; 06-20-2008 at 09:41 AM. Reason: Clarify explanation

  • #4
    Regular Coder Nile's Avatar
    Join Date
    Jun 2008
    Posts
    280
    Thanks
    2
    Thanked 46 Times in 46 Posts
    My script defendantly works. You need to specify what hours, so when you ran my script it may have not been an this hour. Your is just shorter because your saying if its less then or greater then. With mine you can put like: 1,3,5,7,8,9,14.

  • #5
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,982
    Thanks
    203
    Thanked 2,536 Times in 2,514 Posts
    Quote Originally Posted by Nile View Post
    My script defendantly works. You need to specify what hours, so when you ran my script it may have not been an this hour. Your is just shorter because your saying if its less then or greater then. With mine you can put like: 1,3,5,7,8,9,14.
    Sorry, it does not work. I have tested it thoroughly at 16 hours (and other times). In fact it only works when the hour is 20, that is the last in your list. You can easily test it for yourself.

    See http://www.javascriptkit.com/javatutors/switch.shtml

    I have never seen anywhere that the case statement can be used as you suggest:-

    switch(hours){
    case 10,11,12,13,14,15,16,17,18,19,20:

  • #6
    Regular Coder Nile's Avatar
    Join Date
    Jun 2008
    Posts
    280
    Thanks
    2
    Thanked 46 Times in 46 Posts
    Hmm, well it worked perfectly for me.

  • #7
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,982
    Thanks
    203
    Thanked 2,536 Times in 2,514 Posts
    Quote Originally Posted by Nile View Post
    Hmm, well it worked perfectly for me.
    In which browser?

    The case clause within a switch statement specifies one of the values that the switch statement can evaluate to. If the switch statement evaluates to this particular case value then the statements following the case label will be run. It is important to use "break" after each case - this prevents the code from running into the next case. This is what is happening here - so only the final value 20 is recognised.

    The following code is valid:-

    switch(hours) {
    case 10:
    case 11:
    case 12:
    case 13:
    case 14:
    case 15:
    case 16:
    case 17:
    case 18:
    case 19:
    case 20:
    dispT = "<img src='http://codingforums.com/img/logo.gif' />";
    break;

    but that is just a long-winded way of saying:-

    if (hours > 9 && hours < 21) { // show image between 10 and 20 hours incl.
    var dispT = "<img src='http://codingforums.com/img/logo.gif'>";

    The code using the switch statement would perhaps be more useful if the image was to show only at (say) 1,4,5,7,12,16,19 and 20 hours.
    Last edited by Philip M; 06-20-2008 at 07:43 PM.

  • #8
    New Coder
    Join Date
    Jun 2008
    Posts
    15
    Thanks
    2
    Thanked 0 Times in 0 Posts
    so if I want to add several images that disappear after different amounts of hours, I would have to add the script in the <head> for each image?

  • #9
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,982
    Thanks
    203
    Thanked 2,536 Times in 2,514 Posts
    Yes, but you cannot have multiple scripts with the same function or variable names, as the second will over-write the first.

    You will have to rename the functions disappearImg1(), disappearImg2(), and so on, and the variables hours1, hours2, dispT1, dispT2 and so on.

  • #10
    Regular Coder
    Join Date
    Jun 2007
    Location
    USA
    Posts
    527
    Thanks
    26
    Thanked 74 Times in 72 Posts
    For the record, the following IS legal javascript code:
    Code:
    switch(foo) {
    case 10,11,12,13,14,15,16,17,18,19,20:
      bar();
    }
    It's just perhaps a bit deceiving if you don't know much about the comma operator: http://developer.mozilla.org/en/docs...Comma_Operator
    In all, the given code should only match case 20.
    Trinithis

  • #11
    New Coder
    Join Date
    Jun 2008
    Posts
    15
    Thanks
    2
    Thanked 0 Times in 0 Posts
    would I have to change anything if I just want it to happen for 1 specific date?

  • #12
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,982
    Thanks
    203
    Thanked 2,536 Times in 2,514 Posts
    Quote Originally Posted by Trinithis View Post
    For the record, the following IS legal javascript code:
    Code:
    switch(foo) {
    case 10,11,12,13,14,15,16,17,18,19,20:
      bar();
    }
    It's just perhaps a bit deceiving if you don't know much about the comma operator: http://developer.mozilla.org/en/docs...Comma_Operator
    In all, the given code should only match case 20.
    I am sure you are right, but Nile's code did not work for me in IE6. It only showed the image when the hour was 20, that is the last number in the list. Yours does that as well. It may be "valid" code in a syntactical sense but it seems utterly pointless and fails to achieve what the OP wanted.
    Last edited by Philip M; 06-22-2008 at 07:41 PM.

  • #13
    Regular Coder
    Join Date
    Jun 2007
    Location
    USA
    Posts
    527
    Thanks
    26
    Thanked 74 Times in 72 Posts
    . . . which is the expected behavior. Nile, what browser and browser version are you using?

    The only good use for the comma operator I have seen/used is within the header of a for loop. Only once have I used it elsewhere, and that was in the header of a while loop.
    Last edited by Trinithis; 06-22-2008 at 07:49 PM.
    Trinithis

  • #14
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,982
    Thanks
    203
    Thanked 2,536 Times in 2,514 Posts
    Quote Originally Posted by happypanda View Post
    would I have to change anything if I just want it to happen for 1 specific date?
    That is somewhat different from what I understood your requirement to be. The above script shows the image each day at or between certain hours. If you want to show an image once only, to expire at a certain day/time, then:-

    Code:
    <html>
    <head>
    <script type="text/javascript">
    function disappearImg() {
    var dispT;
    var now = new Date();  // current date and time
    var yr = now.getFullYear();
    var mn = now.getMonth();
    var dy = now.getDate()
    var hr = now.getHours();
    
    var expiresyr = 2008;
    var expiresmn = 5;  // months 0 - 11
    var expiresdy = 22;
    var expireshr = 23;  // expires 22/06/2008 at 2300
    
    if ((yr <= expiresyr) && (mn <= expiresmn) && (dy <= expiresdy) && (hr < expireshr)) {
    dispT = "<img src='http://codingforums.com/img/logo.gif' />";
    }
    else {
    dispT = "";
    }
    document.getElementById('imgDisplay').innerHTML = dispT;
    setTimeout("disappearImg",10000);
    }
    </script>
    
    </head>
    
    <body onLoad="disappearImg()">
    <div id="imgDisplay"></div>
    
    </body>
    </html>
    111,111,111 x 111,111,111 = 12,345,678,987,654,321

  • Users who have thanked Philip M for this post:

    happypanda (06-22-2008)

  • #15
    New Coder
    Join Date
    Jun 2008
    Posts
    15
    Thanks
    2
    Thanked 0 Times in 0 Posts
    great thanks!!


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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