Custom JavaScript clock designed for the Lockscreen of jailbroken iPhones

I am struggling with getting my JavaScript code to display the time correctly on my HTML Lockscreen.

After looking at a few examples, I noticed that others are using document.getElementById() instead of document.write() and pushing it to a div.

I attempted two different methods. The first attempt can be found here: http://pastebin.com/RT4xcvPt

The issue with this method is that the time does not update unless I unlock my phone and then turn the screen off again. Upon waking up the phone, the time displays correctly. However, if I leave it idle for 5 minutes and check the lockscreen, the time remains unchanged.

In my second attempt, I added setInterval() to the code. Here is attempt 2: http://pastebin.com/LfSiUK31

Unfortunately, this method results in the screen going completely black after 2 seconds. The initial problem persists where the time does not refresh until I unlock and then wake the phone. After waking it up, the screen stays on for 2 seconds before turning black (I used background-color: #ffffff; in the examples, but on the phone it's set to background-color: #000000; which may explain why it turns solid black).

If I can figure out a reliable way to make it work and have the time refresh when unlocking the phone to view the lockscreen, I could style and position the text accordingly.

Any suggestions or assistance would be greatly appreciated.

Answer №1

The issue lies in your code where you are modifying the entire document instead of just the h1 nodes. I have made changes to your code, and you can see an example at the following link.

http://jsbin.com/uhafax/1/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Execute JavaScript code and showcase the result in the frame on the right side

On the left side of a frame, I have a menu. My goal is to invoke a javascript function that will load a new HTML page on the right side of the frame using XML data and an XSL template. When trying to achieve this with fixed parameters, the code works perf ...

Encountering an issue in XtermJS where it is unable to read properties of undefined, specifically 'dimensions', while being used with NextJs version 14

UPDATE: Additional Details useEffect(() => { // let terminal; if (terminalRef.current) { const terminal = new Terminal({ fontFamily: "Menlo, Monaco, monospace", // fontSize: 12, // cursorBlink: true, ...

Error message: Iframe chrome encountered a Uncaught DOMException when attempting to access the 'localStorage' property from 'Window': Document does not have permission

I recently developed a JavaScript widget that utilizes localstorage to set and retrieve properties of the window. Upon opening this widget in Chrome, I encountered an error message: Uncaught DOMException: Failed to read the 'localStorage' prop ...

What is the best way to emphasize an element on a webpage with Selenium and Python?

Recently, I inherited an existing selenium framework that utilizes Python for scripting. In order to aid in debugging and other tasks, I am interested in implementing a feature that highlights the element currently being acted upon (such as an input box, l ...

I'm interested in knowing how to switch between two functions using Angular

I have developed a grocery list application where each row contains the name of a food item. The layout includes a left column for items that are not needed and a right column for items that are needed. Currently, I am able to change the state by clicking ...

Is there a way to modify my code to restrict users from liking a post multiple times?

I am currently working on a like system and I have made some progress. However, I am struggling to make it so that the likes only increment once. Does anyone have any insights or suggestions on how to achieve this? I have considered using session variables ...

Guide on incorporating a dropdown menu within a Jssor slider

I am facing an issue with trying to include a dropdown menu inside the Jssor slider. The menu does not drop down when placed inside it. Here is the code snippet: <head> <script src="jquery.js"></script> <script src="jssor.slider.min. ...

Apollo-Server presents errors in a polished manner

It seems like the question explains itself adequately. I am currently using 'apollo-server-core' version 3.6.5 Desired Errors: { "errors": [ { "message": "Syntax Error: Unexpected < ...

Tips for setting a value in $scope within an ng-repeat loop in AngularJS

I'm currently facing an issue with ng-repeat in angularJS, specifically on how to assign a value in $scope inside ng-repeat. Here is my scenario: I have a JSON file that contains all the data structured like this: [ {BookID:1,Chapter:1,ContentID:1, ...

Instructions for applying a specific style to TextFields using a theme provider

Custom transitions and colors have been added to the textfields using the makeStyles hook in the component. The issue lies in needing to define these customs every time they are used in a component. There is a desire to establish them in the theme provid ...

Using CSS to position elements absolutely while also adjusting the width of the div

In one section of my website, I have a specific div structure. This structure consists of two divs stacked on top of each other. The first div is divided into two parts: one part with a width of 63% and another part with a button. Beneath the first div, t ...

ng-repeat displaying an empty list

Currently, I am working on an AngularJS application where I am attempting to display data retrieved using the http get method from a RESTServer. The GET request is sent from one view and upon success, it navigates to another view within AngularJS. Both vi ...

Loading SVGs on the fly with Vue3 and Vite

Currently, I am in the process of transitioning my Vue2/Webpack application to Vue3/Vite. Here's an example of what works in Vue2/Webpack: <div v-html="require('!!html-loader!../../assets/icons/' + this.icon + '.svg')" ...

Determine if the given text matches the name of the individual associated with a specific identification number

Struggling to create a validation system for two sets of fields. There are 6 inputs in total, with 3 designated for entering a name and the other 3 for an ID number. The validation rule is that if an input with name="RE_SignedByID" contains a value, then c ...

``To increase a value within an array object in MongoDB with the use of nodejs, what steps should be

Within my node.js application, I have a MongoDB post model that includes an array of comments. Each comment has a "likes" field representing the number of likes it has received. I want to increment this value for each comment individually. How can I achiev ...

Run the script within the Angular scope

Hey there! I'm having an issue passing a JavaScript code through Angular scope, but when it renders on the view page, it's displayed as text. I even attempted using ng-Sanitize, but unfortunately, that didn't solve the problem. &lt;div ...

Determine whether one class is a parent class of another class

I'm working with an array of classes (not objects) and I need to add new classes to the array only if a subclass is not already present. However, the current code is unable to achieve this since these are not initialized objects. import {A} from &apo ...

The AngularJS model does not reflect changes after I make edits in the editor

Currently, I am utilizing Jhtmlarea and have created a custom directive as follows: test.directive('jhtml', function () { return { restrict: 'A', replace: false, link: function (s ...

Creating a dynamic text field integrated with Google Places in Ionic 4: a step-by-step guide

I am currently implementing the google-place-api autoComplete feature in my project, but I encountered an error: TypeError: Cannot read property 'getInputElement' of undefined .html <section [formGroupName]="i" *ngFor="l ...

Using Flexbox to ensure two elements do not appear next to each other

When viewing on large screens, I want all elements to be on one row. On smaller screens, I want them to be on three rows. Specifically, I don't want to see the button next to the H1 element on the same row. How can flexbox help solve this problem? Tha ...