jQuery is a fun
sankha
Posted on November 8, 2021
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.
Posted on November 8, 2021
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
