www.webdeveloper.com
Results 1 to 11 of 11

Thread: Dynamic Background Image Depending on Time of Day

  1. #1
    Join Date
    Oct 2013
    Posts
    6

    Dynamic Background Image Depending on Time of Day

    Hi Guys,

    Newbie here to Javascript, this is a hobby that is fast getting out of control and I'm in over my head. So could do with a little help, so many thing's I want to try and do, yet can't seem to get this little function working lol

    Basically I have a function that in my mind checks the time and if it is between 5am and 6pm will display a daytime background or a night time background if outside of those hours. There is a second set of amendments in the loop just to validate via text what should be outputted, but neither is.... scratching my head now, as I don't understand why it just doesn't work.

    No errors according to my IDE, it just doesnt load a background, does that mean I'm stuck in limbo?

    Here's my code:

    Code:
    <script>
    // Dynamic Background for HTML5 template based on time of day.
    function dynamicBG(){
    
    	var d  = new Date();
    	var h = d.getHours();
    	
    	if ((h <= 5) && (h >=18))
    	{
    		document.body.style.backgroundImage="url('images/assets/daytime-bg.jpg')";
    		document.getElementById("bgText").innerHTML="The BG Should be Day Time";
    		} else{
    		document.body.style.backgroundImage="url('images/assets/nightTime-bg.jpg')";
    		document.getElementById("bgText").innerHTML="The BG Should be Night Time";
    		}
    }
    
    	window.onload = dynamicBG();
    </script>
    Thanks in advance for any help you can give.

  2. #2
    Join Date
    Oct 2012
    Location
    Croatia
    Posts
    240
    It's because your if condition will always evaluate to false.

    You should construct your if condition like this:

    Code:
    if ((h>=0 && h<=5) || (h>=18 && h<= 23))
    {
        //code for night-time image
    }
    else
    {
        //code for daytime image
    }
    Last edited by tech_soul8; 10-21-2013 at 09:15 PM.

  3. #3
    Join Date
    Oct 2013
    Posts
    6
    Hi tech_soul8,

    I tried that and it didn't work. if I remove the DOM changes and replace them with an alert the condition appears to execute.

    Do I need to pass in the DOM element I am trying to change and then return an updated one, or will the function do that anyway?

  4. #4
    Join Date
    Oct 2012
    Location
    Croatia
    Posts
    240
    Quote Originally Posted by the_student View Post
    Hi tech_soul8,

    I tried that and it didn't work. if I remove the DOM changes and replace them with an alert the condition appears to execute.

    Do I need to pass in the DOM element I am trying to change and then return an updated one, or will the function do that anyway?
    First let's start with the logic of your if statement:

    Code:
    if ((h <= 5) && (h >=18))
    this will always evaluate to false because how can some number be less then or equal to 5 and in the same time be bigger then or equal to 18? It can't! You used wrong logical operator!

    Recall that when using logical AND (&&) operator both conditions must be true for overall result to evaluate to true and in your case as I already mention above it's not possible. So the first mistake lies here.

    The second mistake is section in your code where you are connecting your event handler with the function

    Code:
    window.onload = dynamicBG()
    remember that when you are handling events via object's property you never pass set of parentheses to your calling function. So your connection to function should look like this

    Code:
    window.onload = dynamicBG
    and your final code should look something like this

    Code:
    // Dynamic Background for HTML5 template based on time of day.
    function dynamicBG(){
    
    	var d  = new Date();
    	var h = d.getHours();
    
    if ((h>=0 && h<=5) || (h>=18 && h<= 23))
    {
        document.body.style.backgroundImage="url('images/assets/daytime-bg.jpg')";
        document.getElementById("bgText").innerHTML="The BG Should be Day Time";
    }
    else
    {
        document.body.style.backgroundImage="url('images/assets/nightTime-bg.jpg')";
        document.getElementById("bgText").innerHTML="The BG Should be Night Time";
    }
    }
    window.onload = dynamicBG;
    Last edited by tech_soul8; 10-22-2013 at 07:19 AM.

  5. #5
    Join Date
    Oct 2013
    Posts
    6
    I feel so stupid now, I can't believe I overlooked these points.... I need to read some more!

    Just to add this also didn't work as expected, the wrong image was shown for daytime, so I swapped the two lines out and it works now.

    Thank you so much for your help.

  6. #6
    Join Date
    Oct 2012
    Location
    Croatia
    Posts
    240
    Quote Originally Posted by the_student View Post
    Just to add this also didn't work as expected, the wrong image was shown for daytime, so I swapped the two lines out and it works now.

    Thank you so much for your help.
    Yes, I figured that out but didn't wont to change your code further more...
    You're welcome!

  7. #7
    Join Date
    Oct 2013
    Posts
    6
    You've been a big help, I really appreciate it... I'm going to revisit my first book again, as the fundamentals seem to be lost on me!

    That's my problem, poor short term memory.

    Are there any other publications you recommend for a programming novice such as me?

  8. #8
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,148
    this should work as well...
    Code:
    window.onload = function(){
    	var h = new Date().getHours();
    	var day = !((h>=0 && h<=5) || (h>=18 && h<= 23));
    	imageStr= day ? "daytime-bg.jpg":"nightTime-bg.jpg";
    	messageStr = day ? "The BG Should be Day Time":"The BG Should be Night Time";
    	document.body.style.backgroundImage="url('images/assets/"+imageStr+"')";
    	document.getElementById("bgText").innerHTML=messageStr;
    }
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

  9. #9
    Join Date
    Oct 2013
    Posts
    6
    Wow that's some way advanced coding there.... thanks, but you have completely rewritten my idea of the function

    Doesn't your function add extra complexity to a learning coders needs?

  10. #10
    Join Date
    Oct 2012
    Location
    Croatia
    Posts
    240
    Quote Originally Posted by the_student View Post
    You've been a big help, I really appreciate it... I'm going to revisit my first book again, as the fundamentals seem to be lost on me!

    That's my problem, poor short term memory.

    Are there any other publications you recommend for a programming novice such as me?
    Mistakes are just that, mistakes and they happens to beginners just like they do happen to more experienced programmers as well. You should not feel discouraged because of that!

    Take a look at the "Beginning JavaScript 4th Edition" by Paul Wilton and Jeremy McPeak. This is the book I have started with and it have taught me a lot of fundamentals.

  11. #11
    Join Date
    Oct 2013
    Posts
    6
    Got it, will make a start on it tomorrow.

    Thanks for the tip.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles