How to install Firebug add on in the mozilla browser
How to install Firebug add on in the mozilla browser
How to do Encryption and Decryption using JQuery Plugin?
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:
Textbox watermark using simple javascript without Ajax or JQuery
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.
JQuery Tutorial 5:Difference Between Document.ready and window.load in JQuery
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:
JQuery Tutorial 4: What is CDN or Content Distribution Network?
Introduction:
Using this JQuery Video Tutorial I have explained what is CDN or Content Distribution Network.Description:
In the Previous tutorials we have learnt How to debug javascript or jquery code in Internet Explorer, Mozilla firefox and Google chrome.Please watch below video about content distribution network in depth.
JQuery Tutorial 3:How to debug JQuery Code in Internet Explorer or IE
Introduction:
Using this JQuery Example we will learn How to debug JQuery code in the Internet Explorer.Description:
In the Previous tutorials we have learnt How to debug java script or jQuery code in Mozilla firefox and Google chrome.Debug javascript code in IE bit tricky. Please watch my below video.
JQuery Tutorial 2: How to debug JQuery Code in Mozilla Firefox Browser
Introduction:
Using this JQuery Tutorial, we will learn how to debug javascript code in the Mozilla firefox browser.Description:
In the Previous tutorials we have learnt How to debug javascript or jquery code in Internet Explorer and Google chrome.Please watch below JQuery Example video:
