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.
Leave a Reply