As a web designer or developer, we have few beautiful weapons in our armory that showcase our creativity while developing a web page and enhanced the user experience lot more. One of such mechanism is manipulating of the Document Object Model (the Dom) by jQuery. Before we jump into the nitty-gritty of the DOM manipulation when first see what the Document Object Model all about. According to W3 school “the DOM defines a standard for accessing documents” and The HTML DOM is a standard object model and programming interface for HTML. So, when a web page is loaded, the browser creates and define a logical structure of HTML elements for a web page, and based on that structure browser render the HTML elements page on its screen.
The HTML DOM model is look like a tree of Objects
Now, we see what is jQuery all about, again according the W3 school “jQuery is a lightweight, write less, do more, JavaScript library.” It is a cross-platform and all most all major browsers, like Internet Explorer, Chrome, Mozilla Firefox, Safari and opera as well mobile browsers are supporting it.
So, why we need to do The HTML DOM manipulation with the jQuery. Actually, with jQuery we can access all the HTML DOM elements and can change the properties and behavior of the HTML DOM very easily and effortlessly. Obviously, with the HTML DOM manipulation, user experience enhances a lot. The jQuery provides various methods to add, edit or delete DOM element(s) in an HTML page, but in this article, it is not possible to provide details of all methods.
In my view, with the combination of the HTML DOM, CSS and jQuery we can provide very useful front-end features without any back-end dependency. For example, nowadays, one of the very popular features, which I often called as utilities is to show password value in a text format in the password field input box by the clicking on an eye icon or checkbox check status, or masking a few characters of a bank account number or any user id, citizenship number and so on.
Here is a small JavaScript code to show hides password values in a text box clicking on an eye icon.
HTML
<div class="row">
<div class="col-12">
<label for="Password" class="form-lable__login"><b>Enter Password</b></label>
<input type="password" class="frmInp logRegi__inp showHidePass" id="userpassword" placeholder="" name="psw" >
<i class='fa fa-eye eyeNormal ShowHidePass' aria-hidden="true"></i> <!-- font asesome eye icon fa fa-eye-->
<i class='fa fa-eye-slash eyeSlash ShowHidePass' style="display: none;" aria-hidden="true"></i> <!-- font asesome eye icon fa fa-eye-->
</div>
</div>
JavaScript
<script>
$(function() {
$(".ShowHidePass").click(function() {
var checkClassStatus = $(this).hasClass("fa-eye");
if(checkClassStatus) {
$(".showHidePass").attr("type","text");
$(this).removeClass("fa-eye").addClass("fa-eye-slash");
}
else {
$(".showHidePass").attr("type","password");
$(this).removeClass("fa-eye-slash").addClass("fa-eye");
}
})
});
</script>
We can do a lot of useful and user-friendly front-end functionality with the help of jQuery. Another nice example is when a user puts focus on an input box, the input box label moves up automatically creating a space to enter a value. Though this is totally depending up to the designer/developers’ choice where to put the input label, but as most of the time we do the responsive design, i.e., same design content adjusts automatically to various device screen sizes based on available screen width, so it’s best practice to user to available screen space judiciously. As if we place a label above of an input box, for font-size and other CSS property label will take for the height space which sometimes creates unnecessary scrolling in the browser. But if we place the label top of an input box and move the label up and decrease the font-size a bit while user put focus on the input box not only, we save some space as well as it’s given you a nice animation effect.
Here is a small snippet of the code
$(function() {
$(".logRegi__inp").each(function() {
/* While user focusing on an input textbox moves the label upward */
$(this).focus(function() {
$(this).siblings(".form-lable__login").addClass("form-lable__login--active");
$(".frmInp").removeClass("InpBoxError");
$(".txtError").removeClass("showErrorHide");
$(".txtError").siblings(".loginInpIcon").removeClass("loginInpIconError");
});
/*when user clicks outside of the input box, i.e., anywhere in the browser screen without typing anything in the textbox, bringing back the label top of the input textbox, which already move up while focused */
$(this).blur(function() {
var getTxt = $(this).val();
if(getTxt!="") {
$(this).siblings(".form-lable__login").addClass("form-lable__login--active");
}
else {
$(this).siblings(".form-lable__login").removeClass("form-lable__login--active");
}
});
$(this).keyup(function(e) {
var getTxt = $(this).val();
var keyCode = e.keyCode || e.which;
$(this).val($(this).val().replace(/\s/g, '')); // disable typing whitespace in textbox //
if(getTxt!="" || keyCode == 9) {
$(this).siblings(".form-lable__login").addClass("form-lable__login--active");
}
else {
$(this).siblings(".form-lable__login").removeClass("form-lable__login--active");
}
});
});
});.
HTML
<div class="container">
<div class="row mb-30P">
<div class="col-12">
<input type="text" class="frmInp logRegi__inp" id="username" placeholder="" name="uname" >
<label for="uname" class="form-lable__login"><b>UserID</b><span class="req">*</span></label>
<i class='fas fa-user loginInpIcon'></i>
<p class="txtError username mb-0"></p>
</div>
</div>
<div class="row mb-30P">
<div class="col-12">
<input type="password" class="frmInp logRegi__inp showHidePass" id="userpassword" placeholder="" name="psw" >
<label for="Password" class="form-lable__login"><b>Password</b><span class="req">*</span></label>
<i class='fas fa-lock loginInpIcon'></i>
<p class="txtError userpassword mb-0"></p>
<p class="mb-0 pt-2">
<input type="checkbox" class="showHidePassCheck"><span class="common-text__msg pl-2">Show Password</span>
</p>
</div>
</div>
<div class="row btn-row">
<div class="col-12 text-center">
<input type="submit" value="Login" class="btnCommon">
<button class="btnCommon" type="reset">Cancel</button>
</div>
<div class="col-12 text-center">
<p class="ForGotpsw mb-0 w-100"> <a href="forgotPassWord.html">Forgot password?</a></p>
<p class="ForGotpsw mb-0 pt-0"> Don't have an account <a href="registration.html" class="createAccount">Create Now</a></p>
</div>
</div>
</div>
CSS for label Active Class
.form-lable__login {
position: absolute;
top: 16px;
left: 30px;
font-size: 0.875rem;
pointer-events: none;
transition: all 0.3s ease-in;
margin-bottom: 0rem;
transform: translateY(0px);
}
/*active label Class */
.form-lable__login.form-lable__login--active {
top: -20px;
left: 17px;
font-size: 0.688rem;
color: #5f6368;
opacity: 0.5;
}
It’s very difficult to sum up all the small interactive code in a single article. But as we all know with the advancement of jQuery; we can do lots of front-end user interactivity that enhanced the user experience more attractive and entertaining.
Top comments (6)
Its one outdated library that got no place in current web development
Not totally outdated, still use with various CMS. But yes React and Angular are now gaining more popularity.
CMS that are outdated on them self like WordPress, and JQuery is not really comparable to React or Angular, JQuery was created because the old version of Javascript was lagging a lot of things for web developement and Browsers had different version of Javascript. JQuery was created to get around all that issues to use Javascript in the early days. However this days Javascript support is much better and you can do everything and more you can do with jQuery with just javascript!
I think CMS is still very popular...like WordPress Magento. But I am not sure what you "Browsers had different version of Javascript", I have not seen any different versions for vanilla javascript for different browser. All I know is javascript is actually parsed from the browser it self, it's not dependable on any other js libraries like jQuery. Yes some methods are not supported by the IE browser like IE8, IE9, IE10, (we have also fix for that), because those methods are not in build functionality from IE browser. From IE Edge I think javascript support is seemless But Chrome, Mozilla, Opera safari behave alike.
A technical committee at EMCA known as TC39 is the organization behind the standardization of the ECMAScript (JavaScript) specification. They released new specs of ECMAScript 'vanilla javascript' almost every year and its up to the browser devs to add those. Today most modern browsers are using webkit apart of Safari from Apple.
Thanks for the info and sharing the knowledge.