Results 1 to 5 of 5

Thread: Time, Day & Date javascript

  1. #1
    Join Date
    Aug 2010
    Location
    UK
    Posts
    203
    Thanks
    4
    Thanked 38 Times in 30 Posts
    Downloads
    6
    Uploads
    0

    Default 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!
    Attached Files Attached Files
    Last edited by Rasputin007; 03-04-2011 at 02:23 PM.
    Nothing is impossible, only miracles take a bit longer!

  2. The Following 3 Users Say Thank You to Rasputin007 For This Useful Post:

    AquariusIV (09-08-2011),maXimus (03-05-2011),nsandymary (03-05-2011)

  3. #2
    Join Date
    Feb 2008
    Location
    18º24'N ~ 66º05'W
    Posts
    11,479
    Thanks
    503
    Thanked 1,251 Times in 854 Posts
    Downloads
    163
    Uploads
    738

    Default

    Thanks Ras!

  4. #3
    Join Date
    Aug 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Downloads
    0
    Uploads
    0

    Default

    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

  5. #4
    Join Date
    Aug 2010
    Location
    UK
    Posts
    203
    Thanks
    4
    Thanked 38 Times in 30 Posts
    Downloads
    6
    Uploads
    0

    Default

    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.
    Nothing is impossible, only miracles take a bit longer!

  6. #5
    Join Date
    Aug 2010
    Location
    UK
    Posts
    203
    Thanks
    4
    Thanked 38 Times in 30 Posts
    Downloads
    6
    Uploads
    0

    Default

    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.
    Nothing is impossible, only miracles take a bit longer!

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
  •