Home » Archives for April 2014

How to do Encryption and Decryption using JQuery Plugin?

in , , - on 23:08 - 6 comments


Introduction: 

Most of the times, we have give encrypt and decrypt our security in the browser operation.

Description: 

In the privous example, we have seen how to create anchor tag dynamically.  

In this JQuery example i am going to explain how to do encrypt and decrypt our security data and how to disable and enable button using JQuery.

Here we using third party plug-in for doing encryption and decryption operations.

Code: 

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://crypto-js.googlecode.com/svn/tags/3.1.2/build/rollups/md5.js"></script>
<script src="http://crypto-js.googlecode.com/svn/tags/3.1.2/build/rollups/aes.js"></script>

<script>
$(document).ready(function(){
 $('#btnDecryption').attr('disabled','disabled');
 
 $('#btnEncryption').click(function(){
  var encryptionText=$('#txtEncryption').val();
  $('#EncryptionText').text(CryptoJS.AES.encrypt(encryptionText, "/"));
  $('#btnDecryption').removeAttr('disabled');
 });
 
 $('#btnDecryption').click(function(){
  var decryptionText=$('span#EncryptionText').text();
  $('#DecryptionText').text((CryptoJS.AES.decrypt(decryptionText, "/")).toString(CryptoJS.enc.Utf8));
  
 });
});
</script>
</head>
<body>
<b>Welcome to JQueryExampleCode.blogspot.com</b>
<br /><br />
<input type="text" id="txtEncryption" />
<br />
<input type="button" id="btnEncryption" value="Encrypt" />
<br />
<b>Encryption Text:</b> <span id="EncryptionText"> </span> <br />
<input type="button" id="btnDecryption" value="Decrypt" />
<br />
<b>Decryption Text:</b><span id="DecryptionText" style="background-color:yellow"> </span> <br>
</body>
</html>

Video Tutorial: 

Output: 


Read more
Labels: , ,

Textbox watermark using simple javascript without Ajax or JQuery

in , , , - on 02:55 - No comments

Introduction

Using this example we can create the text box with water mark text without using any jQuery or jQuery Plug in.

Description:

In the previous examples, we have learned how to keep watermark text for the text box using AJAX control tool kit.

In this example we are using inline little bit javascript if condition by using onclick, onfocus and onblur events.

Code:

<html>
<head>
<title>www.jqueryexamplecode.blogspot.com</title>
</head>

<body>
<label>Watermark textbox</label>
<input type="text" value="jqueryexamplecode..." onclick="if(this.value=='jqueryexamplecode...'){this.value=''}" 
onfocus="if(this.value=='jqueryexamplecode...'){this.value=''}"
onblur="if(this.value==''){this.value='jqueryexamplecode...'}">
</body>
</html>

Output Video:


Output:



If you have any queries or suggestions, please feel free to ask in comments section.

Read more
Labels: , , ,

JQuery Tutorial 5:Difference Between Document.ready and window.load in JQuery

in - on 05:06 - No comments

Introduction: 

Using this JQuery Tutorial we will learn what are differences between the Document.Ready event and window.load event in the JQuery Sample Example.

Description:

In the Previous tutorials we have learnt How to debug javascript or jquery code in Internet Explorer, Mozilla firefox and Google chrome. 

In this JQuery Tutorial:
1. Document.Ready event will fire when ever DOM is loaded.
2. Window.load event will fire after loading all assets of the web page(Ex: Images, IFrames and others).

For more information

Output of below example: 

Please look on below example first DOM loaded pop up will come, after that window loaded pop up will come{After complete image is loaded in the webpage.}.

Sample program:


<!DOCTYPE>

<html>
<head>
    <title>Differences between</title>
        <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
        <script>
        //first DOM will load 
            $('document').ready(function() {
                alert('DOM loaded');
            });
        //in this program, after image will load this event will fire. 
            $(window).load(function() {
                alert("window loaded");
            });
        </script>
</head>
<body>
     <img src="http://static4.businessinsider.com/image/5384c698ecad04a913dfdb95/google-made-the-tiniest-change-to-its-corporate-logo--see-if-you-can-even-spot-it.jpg" />
</body>
</html>


Output Video:













                              Read more
                            















Labels: