Some Useful Jquery Code Snippets
Posted By : Prachi Ahuja | 23-Apr-2018
1. Change button text on click.
The below jquery code changes the button text when it is clicked.Once a button is clicked then it shows submitting and after the request completed processing then the text should be changed to Submitted.
$(document).ready(function(){
$("$btnSubmit").click(function(){
$(this).val("Submitting...");
//Actual Code goes here
$(this).val("Submitted...")
});
});
2. Disable text selection on the website.
If the user wants to restrict the selection of text or disable the option of copying text from the website, then this goal can be achieved using jquery code.In the below code user can mention elements for which there is a requirement to disable copying text.
$(document).ready(function(){
$('span,p,div').attr('unselectable', 'on')
.css('user-select', 'none')
.on('selectstart', false);
});
3. Check Internet Connectivity using jquery.
Sometimes it happens that user wants to check whether the internet connection is available or not.The below jquery code uses navigator.onLine() property to check whether the browser is online or offline.
$(document).ready(function(){
function checkInternet(){
var status = navigator.onLine;
if(status)
return true;
else
return false;
}
var bIsInternetAvailable = checkInternet();
});
4.Random Change in background color for an element.
Below jquery code will change the background color of DIV element after every 2 seconds. The code firstly create random color number by using Math.random()function and then by using jquery.css() method gives the background color.
$(document).ready(function() {
function ApplyColor() {
var randomColor = Math.floor(Math.random() * 16777215).toString(16);
$('div').css("background-color", '#' + randomColor);
setTimeout(changeColor, 2000);
}
ApplyColor();
});
But the problem with the above - given code is that user doesn't have control over colors.The random colors may not be suitable for the element design then it will be better to define the set of colors.
function ApplyColor() {
var rndColors = ["#00FF00", "#CCCCCC", "#995499", "#FF9900"];
var selColor = Math.floor(Math.random() * rndColors.length);
$('div').css("background-color", rndColors[selColor]);
setTimeout(changeColor, 2000);
}
5. Create an overlay div on the screen and remove it on click.
An overlay means a div element must be fixed on the first visible screen and it has some opacity to give some layer effect.The below code will show an overlay div and it will disappear when clicked.
$(document).ready(function()
{
$('') .css({ position: 'fixed',
top: 0,
left: 0,
right: 0,
bottom: 0,
opacity: 0.8,
background: 'DarkGrey',
display: 'none'
}).appendTo('body')
.fadeIn('normal')
.click(function()
{
$(this).fadeOut('slow', function()
{
$(this).remove();
})
});
});
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Prachi Ahuja
Prachi is a UI Developer having knowledge of HTML5, CSS3, Javascript, Jquery. She is dedicated towards her work.Her hobbies are drawings/paintings and writing articles.