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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Feb 2012
    Location
    Florida
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Smile Image behind time display?

    Is it possible to place an image behind a time display code? If so, how?
    Incase you're wondering, I'm trying to make a customizeable digital clock with a basic skin that can be changed as wanted.
    All help is appreciated!

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    This is all about relative positioning. See my example: http://jsbin.com/isahew

    Hint: If you hover your mouse over the example page, you'll see a button "Edit in jsbin.com" on the top right corner. You can use this button to view/change the full code (HTML/CSS/Javascript)

  • #3
    New to the CF scene
    Join Date
    Feb 2012
    Location
    Florida
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks! :3
    Edit: Where would the javascript code go in relation to the HTML code?
    Last edited by Cerelia; 02-02-2012 at 02:46 AM.

  • #4
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    The javascript code can be in the head or in the body below the HTML. In the head the code should be included in
    Code:
    window.onload(function() {
    window.setInterval(function() {
      var curr = new Date();
      var hour = curr.getHours();
      if(parseInt(hour, 10) < 10) hour = "0"+hour;
      var minute = curr.getMinutes();
      if(parseInt(minute, 10) < 10) minute = "0"+minute;
      var seconds = curr.getSeconds();
      if(parseInt(seconds, 10) < 10) seconds = "0"+seconds;
      document.getElementById('thetime').innerHTML = hour + ":" + minute + ":" + seconds;
    }, 100);
    };
    to make sure that the DOM elements have been loaded prior to code execution


  •  

    Posting Permissions

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