Home/ Questions/Q 6916041
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T09:33:06+00:00

I’m modifying an existing html/javascript package to be used as a iPhone lockscreen. I

  • 0

I’m modifying an existing html/javascript package to be used as a iPhone lockscreen. I want it to look like this:

alt text

I decided to add the CSS and Javascript in the HTML so you can test it out straight away:

<html>
<head>

<script language="Javascript">
var now             = new Date ( );

function getClock ( )
{
  var hours     = now.getHours ( );
  var minutes   = now.getMinutes ( );
  minutes       = ( minutes < 10 ? "0" : "" ) + minutes;

  var daypart   = ( hours < 12 ) ? "AM" : "PM";
  hours         =  ( hours > 12 ) ? hours - 12 : hours;
  hours         = ( hours == 0 ) ? 12 : hours;

  var clock     = hours + ":" + minutes + " " + daypart;

  document.getElementById("clock").firstChild.nodeValue     = clock;
}

function getCalendar ( )
{
  var days      = new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday")
  var months    = new Array("January","February","March","April","May","June","July","August","September","October","November","December")

  var date      = now.getDate()
  var month     = now.getMonth()
  var day       = now.getDay()

  document.getElementById("date").firstChild.nodeValue  = date;
  document.getElementById("month").firstChild.nodeValue     = months[month].substring(0, 3);
  document.getElementById("day").firstChild.nodeValue       = days[day];
}

</script>

<style type="text/css">
body  { font-family: Calibri; color: #fff; background-color: #000; position: absolute; }
#clock { width: 300px; position: absolute; top: 50%; margin: -.7em 0 0 20px; font-size: 53px; text-shadow: -1px 0 #585858, 0 1px #585858, 1px 0 #585858, 0 -1px #585858;}
#day { font-size: 0.9em; line-height: 35px; }
#month { position: absolute; right: 0px; font-size: 1.91em; line-height: 99px; }    
#date { position: absolute; left: -125px; top: 0px; width: 102px; text-align: right; }
</style>   
</head>

<body onload="getClock(); setInterval('getClock()', 1000 ); getCalendar(); setInterval('getCalendar()', 1000 )">

<div id="background">
<img src="http://dc463.4shared.com/img/32MahG4Y/s7/0.15818551454745688/Background.jpg" width="320" height="480">
</div>

<div id="clock">
    <div id="day">
    </div>
    <div id="month">
        <div id="date">
        </div>
    </div>
</div>      
</div>

</body>
</html>

As of now, I’ve two unsolved problems:

  1. Like the sample image, I want the month to almost touch the right edge of the screen while at the same time keep the same amount of left margin. This can only mean one thing: resizing the font to make it fit. This must probably be done in Javascript.
  2. The text borders are currently I now use (using text-shadow) are quite ugly, and if you compare my image with the sample image you see borders make all the difference! Is there a way to make them a bit more fluid?

I hope anyone can give some ideas on how to solve these points. Thanks in advance!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    First, enclose all elements in a div and position that relatively. This will assist in keeping other, internal div positioned accordingly.

    <body onload="getClock(); setInterval('getClock()', 1000 )">
    <div id="clock">
        11:06 AM
        <div id="date">
            Sunday
        </div>
        <div id="month">
          <script language="JavaScript">getCalendar(); setInterval('getDate()', 1000 )</script>  
          <script language="JavaScript">getCalendar(); setInterval('getDate()', 1000></script>
        </div>
    </div>
</body>

    Note I’ve removed the #day div, it wasn’t needed I’ve also enclosed everything inside the #clock div so that all elements are positioned based upon the #clock position. If you need the #day div back for the scripting, simply add it to the html around the script and don’t style it in the CSS.

    The CSS (font sizes are guesses based on your linked sample image)…..

    #clock { font-size: 40px; position: relative; top: 50%; margin: -.5em auto 0 auto; }
#date { position: relative; text-align: left; margin: 0 0 0 40px; }
#month { float: right; font-size: 80px; margin: 0 20px 0 0;}

    If it helps, here’s a copy/paste HTML file so you can play with it. Note I added the body CSS and the #myscreen div to mimic the size of the phone’s screen. They aren’t needed for actual deployment on the phone.

    <html>
</head>
    <style  type="text/css">
        body { text-align: center; font-family: verdana; background: #fff; color: #fff;}
        #myscreen { position: relative; width: 320px; background: #333; height: 480px; }

        #clock { font-size: 40px; position: relative; top: 50%; margin: -.5em auto 0 auto; }
        #date { position: relative; text-align: left; margin: 0 0 0 40px; }
        #month { float: right; font-size: 80px; margin: 0 20px 0 0;}
    </style>
</head>



<body onload="getClock(); setInterval('getClock()', 1000 )">
    <div id="myscreen">
        <div id="clock">
            11:06 AM
        <div id="date">
            Sunday
        </div>
        <div id="month">
          29 <script language="JavaScript">getCalendar(); setInterval('getDate()', 1000 )</script>  
          Aug <script language="JavaScript">getCalendar(); setInterval('getDate()', 1000></script>
        </div>
        </div>
    </div>
</body>
</html>

    Decreasing or increasing the -.05em margin for the #clock div will move the entire block of elements up or down.

    • 0