Another interesting jQuery plugins are locking screen and locking selected elements on HTML page. Today I am going to discuss a simple jQuery plugins that can easily lock screen and selected elements. The name of this jQuery plugins is very strange – ToFishes

The following jQuery lock screen and element is using ToFishes plugin:

Here’s the file of the above example:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jQuery ToFishes Lock Screen and Selected Elements</title>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery-tofishes/jCover-tofishes-1.0.js"></script>
<script type="text/javascript" src="jquery-tofishes/coverFunction.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
          myCover();
    });
</script>

</head>
<body>

<h3>jQuery jCover ToFishes Lock Screen and Element</h3>
No need to refresh browser. Will unlock in 3 seconds....

<div style="margin:20px;">

    <!-- Locked element-->
    <div id="jcover" style="padding:20px;height:100px;width:400px;border:5px solid #21588E;">
        <p>This is the element to be covered... </p>
        <p>Click on the links below to see how jCover works</p>
    </div><!-- jcover -->

    <p id="trigger">

       <a href="#" name="full">Lock Full Screen</a> | <a href="#" name="element">Lock Element</a> | <a href="#" name="msg">Lock Element with Message</a>
    </p>

</div>

</body>
</html>

Just assign a “jcover” id for the selected element to be covered.

<!-- Locked element-->
<div id="jcover" style="padding:20px;height:100px;width:400px;border:5px solid #21588E;">
    <p>This is the element to be covered... </p>
    <p>Click on the links below to see how jCover works</p>
</div><!-- jcover -->

Then assign a “trigger” id for the clicked link:

  • Lock full screen: use name=”full”
  • Lock selected element: use name=”element”
  • Lock selected element with message: use name=”msg”
<p id="trigger">
 <a href="#" name="full">Lock Full Screen</a> | <a href="#" name="element">Lock Element</a> | <a href="#" name="msg">Lock Element with Message</a>
</p>

As you can see, this is rather easy to lock screen and elements with jQuery ToFishes plugins.