How to Use before() and after() method in jQuery

In CSS before and after pseudo-elements use to add style to the targeted selector elements.

There are two methods with a similar name in jQuery.

They adjust the position or add the element before and after instead of changing CSS.

In this tutorial, with examples, I show how you can use before() and after() methods on your webpage.

How to Use before() and after() method in jQuery

Read more

How to make Editable Div Element with contentEditable Attribute

Did you ever thought to make an editable div element or <p>, <span>, etc. that works the same as a Text field and Textarea.

Some websites allow the user to edit their content by just pointing to the content and start to update it.

You will already know that <div> is a read-only container that means you can’t edit the content inside of it.

In this tutorial, I show how you can do this with the contentEditable attribute.

How to make Editable Div Element with contentEditable Attribute

Read more

HTML – How to Show Text Above Image on Hover

If you are good at Photoshop then you can directly show text above an image by customizing an image like that.

But what when you have to display text when the mouse moves over the image.

This kind of functionality is basically seen in the news, product-based websites, or in blogs, they show the post image and title but when the user moves the mouse over one of an image then the short description of the post is visible above the image.

In this quick tutorial, I show how you can show text above Image when the user hovers the image using only HTML and CSS, no jQuery and JavaScript.

HTML - How to Show Text Above Image on Hover

Read more

How to Shake an element with jQuery UI

In the WordPress Admin dashboard login form, the login field animates with a shake effect whenever the user enters incorrect details. This feature can be easily implemented using the jQuery UI library.

With jQuery UI, you can apply a shake effect to an element, specifying the direction and distance of the shake.

This functionality serves to alert users when invalid input is entered.

In the demonstration, a login form is created, and it shakes when an incorrect username and password are entered.

How to Shake an element with jQuery UI

Read more