Wednesday, 30 September 2015

Disable Cut, Copy, Paste using JQuery

Unknown    03:59    No comments



JQuery is like a boon for web developers and designers. It has reduced the efforts, code to a great extent to achieve any task. Similarly, here is one really cool code to disable cut, copy, paste using jquery:
Example :
<!DOCTYPE html>
<html>
    <head>
        <title>Disable Cut, Copy, Paste using JQuery :devzone.co.in </title>
        <style>
            .main { 
                width: 900px; 
                margin: 0 auto; 
                height: 900px;
                border: 1px solid #ccc;
                padding: 20px;
            }

             .header{
                height: 100px;    
            }
            .content{    
                height: 700px;
                border-top: 1px solid #ccc;
                padding-top: 15px;
            }
            .footer{
                height: 100px;  
                bottom: 0px;
            }
            .heading{
                color: #FF5B5B;
                margin: 10px 0;
                padding: 10px 0;
                font-family: trebuchet ms;
            }
            /*downloaded from http://devzone.co.in*/
        </style>
    </head>
    <body>

         <div class="main">
            <div class="header"><a title="devzone.co.in" href="http://devzone.co.in/"><img alt="devzone.co.in" src="http://devzone.co.in/wp-content/uploads/tn_mesocolumn_header_logo.png"></a>
            </div>
            <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
            </script>
            <script>
                $(document).ready(function() {
                    $(document).ready(function() {
                        $('#txt_input').bind("cut copy paste", function(e) {
                            alert('Copy Paste is disabled');
                            e.preventDefault();
                        });

                         $('#textarea_inp').bind("cut copy paste", function(e) {
                            alert('Copy Paste is disabled');
                            e.preventDefault();
                        });

                         $('#div_cnt').bind("cut copy paste", function(e) {
                            alert('Copy Paste is disabled');
                            e.preventDefault();
                        });

                     });
                });
            </script>

             <div class="content">
                <div class="heading">
                    Disable Cut, Copy, Paste using JQuery
                </div>

                 <div id='dv1'>
                    <table>
                        <tr><td>Text Box</td><td><input type='text' id='txt_input' /></td></tr>
                        <tr><td>Text Area</td><td> <textarea id='textarea_inp'></textarea></td></tr>
                        <tr><td>Div Content</td><td><div id='div_cnt'> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

                                     Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

                                     Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.

                                     Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, </div></td></tr>
                    </table>
                </div>
                <script>
                    (function(i, s, o, g, r, a, m) {
                        i['GoogleAnalyticsObject'] = r;
                        i[r] = i[r] || function() {
                            (i[r].q = i[r].q || []).push(arguments)
                        }, i[r].l = 1 * new Date();
                        a = s.createElement(o),
                                m = s.getElementsByTagName(o)[0];
                        a.async = 1;
                        a.src = g;
                        m.parentNode.insertBefore(a, m)
                    })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');

                     ga('create', 'UA-43091346-1', 'devzone.co.in');
                    ga('send', 'pageview');

                 </script>
                </body>
                </html>

Base64 encode decode using Javascript

Unknown    03:48    No comments


Javascript provides an easy way to Base64 encode and decode a string, using which we can encode decode a string to base64 on the fly.
Two functions window.btoa() & window.atob() can be used to achieve the task.
Example:
var encodedStr = window.btoa(“Hello world”); // to encode a string
var decodedStr = window.atob(encodedStr); // to decode the string
Example :
<html>
    <head>
        
        <style>
            #result{
                height: 200px;
                width: 500px;
                overflow-y: auto;
                border: #ccc dotted 1px;                
            }
        </style>
    </head>
    <body>
Result:
        <div id="result"> </div>
        <table>
            <tr><td>Enter String to Encode: </td><td><input type='text' id='estr' value=''></td><td> <button onclick="encodeStr()">Encode</button></td></tr>
        <tr><td>Enter String to Decode: </td><td><textarea id="dstr"></textarea></td><td> <button onclick="decodeStr()">Decode</button></td></tr>
</table>
        <script>
            function encodeStr()
            { // this will encode the string
                var str_val = document.getElementById("estr").value;
                if (str_val === '')
                {
                    alert("Please Enter string to encode");
                } else {
                    var enc = window.btoa(str_val);
                    document.getElementById("result").innerHTML = enc;
                }
            }
            function decodeStr()
            { // this will decode the string
                var str_val = document.getElementById("dstr").value;
                ;
                if (str_val === '')
                {
                    alert("Please Enter string to Decode");
                } else {
                    var dec = window.atob(str_val);
                    document.getElementById("result").innerHTML = dec;
                }
            }
        </script>
    </body>
</html>
Subscribe to: Posts (Atom)