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

Get Parameters from URL with JavaScript: Tips and Best Practices

Reading URL parameters is a usual thing in web development, especially when making dynamic web pages that depend on what users type in. URL parameters help different parts of a website communicate with each other. They’re handy for adjusting how a page looks or works based on what a user likes or does.

JavaScript supports a number of methods, each with advantages and disadvantages, for reading parameters from URLs.

Built-in URLSearchParams API in JavaScript, regular expressions, and string manipulation techniques are three methods for extracting URL parameters that are covered in this article.

By the end of this article, you will know more about how to get URL parameters in JavaScript and which method is best for your specific use case.

Get Parameters from URL with JavaScript: Tips and Best Practices

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

Blur effect on the element via Foggy jQuery Plugin

Some website owners Blur some parts of the content and ask the user to register to their website or share the article for full access to the content.

Blur effect can be used for better user-experience for example – showing container elements when mouse focus over it and Blur other containers.

For the blur effect, I am using the Foggy jQuery plugin. It is lightweight and easy to set up.

In this tutorial, I show how you can use the Foggy jQuery plugin to blur the HTML content on mouse hover.

Blur effect on the element via Foggy jQuery Plugin

Read more