CODEWITHSUNDEEP
javascriptjqueryhtmlajax
Paul Jeggor
Paul Jeggor

Reputation: 489

Lock and unlock page with jQuery?

<body>
    <span id="lock">lock</span>
    <div id="one">test test</div>
    <div id="three" style="display: none">hide</div>
    <span id="two">test</span>
    <div id="div_lock">
        Enter password: <input type="password"> <input type="button" value="unlock" id="unlock">
    </div>
</body>

$('#lock').click(function(){
  $('#div_lock').show();
    //????
})

$('#unlock').click(function(){
  $('#div_lock').hide();
//????
})

if i click LOCK then i would like open div_lock and hide all other elements in page. And if i click unlock then hide div_lock and show previous elements.

Can i use other function than .hide? If i use hide then is possible to check SOURCE code. Maybe any variables with SIMPLE hash etc? If not how can i make this with .hide() and show()? I can use also PHP and Ajax

View the jsfiddle here.

Upvotes: 0

Views: 14039

Answers (3)

udidu
udidu

Reputation: 8588

Well, I'v been in that situation before and found the perfect solution to lock the page with. Actually this is very simple, what you need to do is to work with anonymous function and basic jQuery bindings, one more important thing is to load your lockable html data dynamically through javascript so using the View Source mode wont work... here is the solution:

(function($){ //this way nobody can access you variables inside
    var PAGE_CONTENT = "";
    var IS_LOCK_MODE = false;

    var $lockButton = $('#your_lock_button');
    $lockButton.bind('click', function(){
        if(!IS_LOCK_MODE){
            PAGE_CONTENT = $('#your_content_container').html();
            $('#your_content_container').empty();
            IS_LOCK_MODE = true;
        } else {
            $('#your_content_container').html(PAGE_CONTENT);
            PAGE_CONTENT = "";
            IS_LOCK_MODE = false;
        }
    });
})(jQuery);

Upvotes: 1

David Thomas
David Thomas

Reputation: 253318

The simplest solution is:

$('#lock').click(function() {
    $(this).siblings().andSelf().fadeOut();
    $('#div_lock').fadeIn();
})

$('#unlock').click(function() {
    $('#div_lock').fadeOut();
    $(this).closest('div').siblings().fadeIn();
})​

(Though note I'm using fadeIn() and fadeOut() rather than the 'more-sudden' show() and hide())

JS Fiddle demo.

It's also worth remembering that if anyone has access to your browser (assuming this is some kind of security feature) they can still override this via the JavaScript console, or by simply refreshing the page (assuming no log-in).

Updated in response to comment left by OP (below):

this is ok, but if i click unlock then this show me also <div id="three" style="display: none">hide</div> - this should me still display:none

The problem you have is that all the affected elements are of style="display: none;" once the jQuery's hidden them (that's how it works, after all); so I'd suggest a tidier approach, and compartmentalising the content and the controls, to something resembling the following:

<div id="controls">
    <button id="lock">Lock screen</button>
    <input type="password" />
    <button id="unlock">Unlock screen</button>
</div>
<div id="content">
    <!-- all content goes in here -->
</div>​

Which lends itself to the following jQuery (which stores the nodes to hide/show as they are, and then restores them as required):

var content = $('#content'),
    contents;
$('#controls').children().slice(1).hide();
$('#lock').click(function() {
    contents = content.html();
    content.empty();
    $(this).hide().siblings().show();
});

$('#unlock').click(function() {
    content.html(contents);
    $(this).closest('div').children().hide().first().show();
});​

JS Fiddle demo.

Upvotes: 2

b1_
b1_

Reputation: 2126

Like this?

<!DOCTYPE html>
<html lang="en-US">
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
<style type="text/css">

    .lock_page_div {
        position: absolute;
        top:0;
        left: 0;
        z-index: 9999;
        width: 100%;
        height: 100%;
        display: none;
        background: #ffebcd;
    }
</style>

<a href="javascript:" class="lock_page_a">block page</a>

<div class="lock_page_div">
    <a class="unlock_page_a" href="javascript:">unlock_page_a</a>
</div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $('.lock_page_a').click(function(){
            $('.lock_page_div').show();
            console.log('lock');
        })

        $('.unlock_page_a').click(function(){
            $('.lock_page_div').hide();
            console.log('unlock');
        })
    })
</script>
</body>
</html>

Sorry, now jsfiddle so slow for me >__<

Upvotes: 1

Related Questions