CODEWITHSUNDEEP
javascripthtml
user2707263
user2707263

Reputation: 113

HTML / JS "Lock / Hide" content until date set

I have a HTML5 / CSS page which I want to hide / disable / lock the content on until a certaindate.

Does any one know of any HTML5 / JS ways of doing this and potentially showing a message until viewing is available.

Please ask if you need any more clarification on the function.

Thanks in advance

Upvotes: 1

Views: 4537

Answers (3)

insertusernamehere
insertusernamehere

Reputation: 23600

Thanks for your comment. You can use this HTML, CSS and JavaScript to get this thing working.

Place the <div>- and <script>-elements as the first children of your <body>-element. This way it's ensured that it will be removed first thing when the date is right. If you wait for a library being loaded or place the script at the bottom of the page, the user might see it flashing for a little time.

The drawback of this is still, that the user has to load the whole page, even if he can't see it. Regarding you saying that this is an iOS app you may introduce a solution where only the locked screen is being loaded as long as it's needed, to avoid unnecessary traffic.

HTML + JavaScript

<div class="locked" id="locked"></div>
<script>    
    var end = new Date('2013-01-01');
    var now = new Date();
    if (end - now <= 0) {
        var e = document.getElementById('locked');
        e.parentElement.removeChild(e);
    }
</script>

CSS

div.locked {
    position: fixed;
    z-index: 100000;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: red;
}

Demo

Try before buy

Upvotes: 2

Gena Moroz
Gena Moroz

Reputation: 954

http://jsfiddle.net/SKUJj/ This fiddle locks the page for 10 seconds, and then locker hides. You should create overflowing div for 100% width and height.

Also to know unlock time you should store it somewhere.And then do

 setTimeout(function(){
  //unlock the screen;
 },timeStored-Date.now())

Where timeStored-Date.now() is milliseconds to wait for unlock

Upvotes: 1

Thomas W
Thomas W

Reputation: 14154

For HTML <input> controls (to make a non-editable form), you can set disabled or readonly attributes on the inputs from your application code or from JS.

For other content, you should render it (from the server) the way you want it in the page. Everything in the page is viewable/ or hackable, if someone remotely wants to.

So put the lock on the server that provides it, don't expect any lock on the page to be guaranteed.

Upvotes: 0

Related Questions