• Time, Day & Date javascript

    UPDATED


    This is the javascript you need to add to the LockBackground.html page if you want to get custom time, day and date display.
    But in order to not have a double time and date displayed you have to disable the time and date that comes with iOS. To do that go to Cydia and search for "Lockscreen Clock Hide", its free in Sections->Tweaks (also install Lockscreen Dim Delay, which lets you set a different time interval before your Lockscreen turns black).
    Attached is one full LockBackground.html with animated background. Please feel free to use it as a template or as a example to look at.
    The javascript code is in a few parts, some go into the <head> ....</head> section, some go inbetween HEAD and BODY and some parts go into the <body> ...</body> section.
    I just copied the javascript code from the LockBackground.html and explain the important bits.

    <script type="text/javascript">

    function showTime()
    {

    date=new Date();

    dateday=date.getDate();
    hour=date.getHours();
    minute=date.getMinutes();
    second=date.getSeconds();
    if (date.getDate()<10) dateday="0"+dateday;
    if (hour<10) hour="0"+hour;
    if (minute<10) minute="0"+minute;
    if (second<10) second="0"+second;
    document.getElementById("textTime").innerHTML=""+h our+":"+minute+":"+second;
    setTimeout("showTime()", 1000);

    }

    </script>

    <script type="text/javascript">
    function showDay()
    {
    d=new Date()
    weekday=new Array("Sunday","Monday","Tuesday","Wednesday","Thu rsday",
    "Friday","Saturday") #You can change the day names to your language!
    document.getElementById("textDay").innerHTML=(week day[d.getDay()])
    }
    </script>

    <script type="text/javascript">
    function showDate()
    {
    m_names = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");
    #You can change the month names to your language!
    currentDate = new Date()
    day = currentDate.getDate()
    sup = "";
    if (day == 1 || day == 21 || day ==31)
    {
    sup = "st"; #Also here you can change this to your language
    }
    else if (day == 2 || day == 22)
    {
    sup = "nd"; #Also here you can change this to your language
    }
    else if (day == 3 || day == 23)
    {
    sup = "rd"; #Also here you can change this to your language
    }
    else
    {
    sup = "th"; #Also here you can change this to your language
    }
    month = currentDate.getMonth()
    year = currentDate.getFullYear()
    document.getElementById("textDate").innerHTML=(day + "<SUP>" + sup + "</SUP> " + m_names[month] + " " + year)

    }
    </script>
    </head> #The HEAD section stops here!
    <style>

    SPAN#textTime # Font and font colour settings for Time only
    {
    font-family: TimesNewRomanPS-BoldItalicMT;
    #Pick a font-family that is on the iPhone!
    text-align: center;
    font-size: 50px; # Change the font size
    text-shadow: 0px 8px 10px #4F52B9; # Text shadow: 0px: x-position (negative value=left, positive value=right); 8px: y-position (negative value =above, positive value=below); 10px: density of shadow (small value=full shadow, large value=bigger and fainter); #4F52B9: colour of text shadow
    -webkit-text-fill-color: transparent; # font fill colour, here transparent=no font fill so font outline only
    -webkit-text-stroke:2px #00FFFF; # Font outline thickness and colour
    }

    </style>

    <style>

    SPAN#textDay # Font and font colour settings for Day only
    {
    font-family: TrebuchetMS-Bold; #Pick a font-family that is on the iPhone!
    text-align: center;
    font-size:30px; # Change the font size
    text-shadow: 0px -3px 8px #4F52B9; # Text shadow: 0px: x-position (negative value=left, positive value=right); -3px: y-position (negative value =above, positive value=below); 8px: density of shadow (small value=full shadow, large value=bigger and fainter); #4F52B9: colour of text shadow
    -webkit-text-fill-color: transparent; # font fill colour, here transparent=no font fill so font outline only
    -webkit-text-stroke:2px #00FFFF; # Font outline thickness and colour

    }

    <style>

    SPAN#textDate # Font and font colour settings for Date only
    {
    font-family: TrebuchetMS-Bold; #Pick a font-family that is on the iPhone!
    text-align: center;
    font-size:30px; # Change the font size
    text-shadow: 0px -3px 8px #4F52B9; # Text shadow: 0px: x-position (negative value=left, positive value=right); -3px: y-position (negative value =above, positive value=below); 8px: density of shadow (small value=full shadow, large value=bigger and fainter); #4F52B9: colour of text shadow
    -webkit-text-fill-color: transparent; # font fill colour, here transparent=no font fill so font outline only
    -webkit-text-stroke:2px #00FFFF; # Font outline thickness and colour

    }

    </style>
    <body onLoad="showTime(); showDay(); showDate();"># BODY section starts here.
    <table style="position: absolute; top: 50px; left: 0px; width: 320px; height: 480px;" cellspacing="0" cellpadding="0" align="center">
    <tr align="center" valign="top" border="0" cellpadding="0">
    <td height="450" valign="top">
    # Table setup makes placing time and date easier, top: is the distance from the top, has to be at least 30px or time will sit on status bar icons!
    <span id="textTime"></span><br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br> # each <br> adds a line between Time and Date, so you can have time on top and date at bottom
    <br>
    <br>
    <br>
    <br>
    <span id="textDay"></span>
    <br>
    <span id="textDate"></span>
    </td>
    </tr>
    </table
    It is quite easy to change a few things, I use Dreamweaver 8, but even Notepad will do. To test your changes you need Safari browser as only Safari browser understands those webkit instructions.
    As you can see you can give each time, day or date whatever color you want.

    The attached example lockscreen looks like



    Please use Safari to open the attached LockBackground.html page and at the top of that file (in the code, not display!) are instructions on how to change "Your Name!" to your name!
    I have delibrately excluded the slider and slider text as by now you should know how to unlock the lockscreen, but that is something you have to do!
    This article was originally published in forum thread: Time, Day & Date javascript started by Rasputin007 View original post
    Comments 3 Comments
    1. tlaw315's Avatar
      tlaw315 -
      Hi Ras I am new to this modding and would only like to add my name where it says Your name. Being new is there a way that is simple to change it or do I have to know how to reprogram the app?? Tahnk you in advance for anything that you can do to help. It i the best looking mod I have seen yet. Also I need to get rid on the little date and time stamp at the top of the screen Thanks again Tom Lawyer
    1. Rasputin007's Avatar
      Rasputin007 -
      Download the attached example.zip file. Inside there are 2 files, LockBackground.html and mask.png.
      It is the mask.png that you have to replace. Very simple. Just create an 320x480 big totally transparent image, then choose any font you like and write with black font colour your greeting, name, message whatever you want and save as mask.png. The use of webkit-mask will make everything that is transparent in the mask.png black on the lockscreen and everything that is black transparent.
      Just play around with a few examples, also change the colour of the time, day and date to your liking, just change it so that you very happy with it.
      Install from Cydia
      - Lockscreen Dim Delay
      - Lockscreen Clock Hide
      In Settings on your Home screen you can find these 2 menus and enable/disable time and date on the status bar.

      PS. Don't worry if the image size is 320x480, it still works perfect on the Retina display of 640x960, as iOS will automatically resize.
    1. Rasputin007's Avatar
      Rasputin007 -
      It is also possible to use an animated gif as a mask. I have here a quick example of a dancing girl, but again anything would do.
      http://iphone.mmus.us/webpages/example/ani.html

      Size is 320x480, background transparent and file is called mask.gif, have to change this then also in the LockBackground.html.