For example, use it in form validation for showing the warning on invalid input or using it to display the alert message when form successfully submitted. There are many other cases when you can use this.
But, the problem is it does not look good on the screen.
There are many free jQuery plugins that you can use to show the user-friendly message box.
In this tutorial, I am using sweetAlert jQuery plugin to show custom message box on the screen and use it as an alternative to default alert box.
It looks much better than default alert and it is responsive.
Whether you are a beginner or not to the WordPress, you have seen the shake effect when you go for the Login in Admin Dashboard.
The login box shakes every time when the user enters the wrong username and password.
In this tutorial, I show How you can create the similar kind of effect using jQuery UI.
What in the demonstration?
For demonstration, I am creating two examples – In first, I am creating a basic Login form which shakes on the wrong username and password and in the second example, using the arguments with shake effect.
A tooltip is a small pop-up element which shows information when moving the mouse pointer to the element. You can dynamically update the tooltip content with AJAX if you don’t want to fix the content while creation.
You can add the tooltip to the element with Bootstrap, jQueryUI, or any other library.
I am using jQuery UI library in the tutorial.
In the demonstration, I am displaying the list of users and dynamically load information on the tooltip with AJAX on mouse hover.
The accordion is an expandable collapsable container layout which takes less space within the page. It is divided into multiple sections or parts and each has contents.
How it’s Work?
The user only able to view one section at a time for seeing other sections content he/she need to expand that section. When a section header gets clicked then it expands and show its content and collapsed previously opened section.
When its require?
When you page contains many forms or contents here, you can use it to divide them into various sections the effect of this is that now its look more user-friendly and easy to navigate.