Category: HTML Tutorial

Hide/show Password

Hide/show Password on click

Hide/show Password on click: Hi Readers, today we are going to describe how one can easily reveal Password, i.e., Hide/show Password on click.

Normally when we register or log in to any site there is a password field which shows dot or asterisk only for security reasons but for most of the users faces some trouble to remember the password. In that cases,

The main logic behind this is to simply change the Password type input field to text type field as soon as the click event of button or checkbox is performed. Here in our program, we use a checkbox.


Password: Show Password


Hide /show Toggle Password Visibility

Step 1) Add HTML:

Example

<!– Password field –>
Password: <inputtype=”password”value=”FakePSW”id=”myInput”><!– An element to toggle between password visibility –>
<input type=”checkbox”onclick=”myFunction()”>Show Password

Step 2) Add JavaScript:

Example

<script>

function myFunction() {
var x = document.getElementById(“myInput”);
if (x.type ===”password”) {
x.type = “text”;
} else {
x.type =”password”;
}
</script>

 Feedback :- I hope you would like this topic n Hide/show Password on click button using JavaScript on jquery

Chaining Method in JQuery

Chaining Method in JQuery:- Hi Readers, In this tutorial, we are going to learn about Chaining Method in JQuery.

The Chaining allows us to run multiple jQuery methods on the same element(s). Through chaining method, you can chain multiple actions/methods together.

Until now we have been writing jQuery commands one at a time means one after the other. However, the chaining allows us to run multiple jquery commands or statements one after the other at the same time within the same element. To chain either an action or methods, you have to simply append the action with the previous action.

Important points about Chaining

  • The Chaining Method makes the code short and easy to manage.
  • Through Chaining Method the performance of code increases means it gives better performance
  • The chain starts from left to right. So leftmost will be called first and so on.

Simple Examples of Chaining Method in Jquery:


The following example chains together the css(), slideUp(), and slideDown() methods. The “p2” element first changes to blue, then it slides up, and then it slides down:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>

$(document).ready(function(){

    $("button").click(function(){

        $("#p2").css("color", "Blue").slideUp(3000).slideDown(3000);        //chaining of multiple jquery methods

    });
});

</script>
</head>
<body>

<p id="p2" style="font-size:40px">Having fun!!</p>

<button>Click me</button>

</body>
</html>

Screenshots:-

Chaining Method in JQuery


I hope you would like this post on how to use Chaining Method in JQuery!

Fade-in Fade-out Effects using Jquery

Fade-in Fade-out Effects using Jquery:- Hi Readers, In this tutorial, we are going to learn about Fade in Fade out Effects in Jquery.

jQuery fadeIn() and fadeOut() methods are used to display or hide the HTML elements by increasing or decreasing their opacity level gradually. 

The fadeOut() method changes the opacity level of selected elements, from visible to hidden 

The fadeIn() method changes the opacity level of selected elements, from hidden to visible.

Syntax:

$(selector). fadeIn (speed,easing,callback)

$(selector). fadeOut (speed,easing,callback)

Note:

Like other Effects in JQuery using various pre-defined methods, you can optionally set the duration or speed parameter for the fadeIn() and fadeOut() methods to control the time of fading animation effect. The Speed Parameter can be set to either “slow” or “fast” or in “milliseconds”(as high value is set then animation effect is as slow).

Examples:

<!DOCTYPE html>

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>

//For FadeOut Effects

$(document).ready(function(){

    $(".btn1").click(function(){

        $("#div1").fadeOut();

        $("#div2").fadeOut("slow");

        $("#div3").fadeOut(3000);

        $("#test").fadeOut(3000);

    });

});

//For FadeIn Effects

$(document).ready(function(){

    $(".btn2").click(function(){

        $("#div1").fadeIn();

        $("#div2").fadeIn("slow");

        $("#div3").fadeIn(3000);

        $("#test").fadeIn(3000);

    });

});
</script>
</head>

<body>
<p id = "test">Example of FadeOut Effects</p>
<button class="btn1">Click to fade out boxes</button><br><br>
<button class="btn2">Click to fade In boxes</button><br><br>

//first Div
<div id="div1" style="width:80px;height:80px;background-color:red;"></div><br>
//second Div
<div id="div2" style="width:80px;height:80px;background-color:green;"></div><br>
//Third Div
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>

</body>
</html>

FadeIn Screenshots

Fade-in Fade-out Effects using Jquery

FadeOut Screenshots

Fade-in Fade-out Effects using Jquery


I hope you would like this tutorial on how to add fading effects on div element using Jquery i.e., Fade-in Fade-out Effects using Jquery!

How to blink text in html using css

How to blink text in HTML using CSS ?

How to blink text in HTML using CSS:-  Hi Readers, In this blog I will demonstrate to you that how we can blink text in HTML using CSS.

Some days before we can blink text in HTML using <blink> tag of HTML, Now these option has been depreciated but no need to worry. We can do the same thing by using CSS code :).

Css Code for Blink text

<style>
.blink {
  animation: blink-animation 1s steps(5, start) infinite;
  -webkit-animation: blink-animation 1s steps(5, start) infinite;
}
@keyframes blink-animation {
  to {
    visibility: hidden;
  }
}
@-webkit-keyframes blink-animation {
  to {
    visibility: hidden;
  }
}
</style>

Just Copy this code and paste the code after <head> in HTML code

HTML Code to blink Text :-

<!doctype html>

<html>
<head>
<title>  blink text  html using css</title>
<style>
.blink {
  animation: blink-animation 1s steps(5, start) infinite;
  -webkit-animation: blink-animation 1s steps(5, start) infinite;
}
@keyframes blink-animation {
  to {
    visibility: hidden;
  }
}
@-webkit-keyframes blink-animation {
  to {
    visibility: hidden;
  }
}
</style>
</head>
<body>
<p class="blink">I want to blink this text</p>
</body>

</html>

Now after executing this code in the browser.The text will start blinking on user’s browser screen.

You can blink so many texts in HTML using CSS code, which I have explained you below this line.

<html>
<head>
<title>  blink text  html using css</title>
<style>
.blink {
  animation: blink-animation 1s steps(5, start) infinite;
  -webkit-animation: blink-animation 1s steps(5, start) infinite;
}
@keyframes blink-animation {
  to {
    visibility: hidden;
  }
}
@-webkit-keyframes blink-animation {
  to {
    visibility: hidden;
  }
}
</style>
</head>
<body>
<p class="blink">I want to blink this text</p>


<h1 class="blink">I want to blink this text</h1>

<span class="blink">I want to blink this text</span>


</body>

</html>

I hope you would like this post ” How to blink text in HTML using CSS” and also comment your feedback and problem if any come.

 

Feedback

I hope you enjoyed this post about  How to blink text in HTML using CSS and provide your valuable feedback and share your problem in Technical Forum.