Insert Image in Dropdown lists with jQuery

In HTML it is not possible to add an element to the dropdown list. You need to customize it.

For example –

If you try to add a search box in an <option> or add a country flag image following with country name. When you run it you don’t see any changes in the dropdown.

This can simply be done with the jQuery plugins which adds more features to the simple dropdown element.

In this tutorial, I show how you can insert an image in the dropdown with select2 and Easyautocomplete plugins.

Insert Image in Dropdown lists with jQuery

Read more

How to add !important to CSS property with jQuery

In CSS !important is used to increase the priority of a CSS property. This ignores the overriding properties.

In jQuery, you can use the css() method to manipulate style property of the selector but this doesn’t allow to set !important to property.

For example –

$('#txt').css('width', '100px !important');

The above code doesn’t work when you run it.

In this tutorial, I show how you can add !important to CSS property with jQuery.

How to add !important to CSS property with jQuery

Read more

How to Convert an Array To a String in JavaScript

In JavaScript, arrays are an effective data structure that you can use to store and manage collections of values. Nevertheless, there are some circumstances in which you might need to convert an array into a string, such as when you want to display the contents of the array on a web page or send the array as a parameter in a URL.

Mainly it is done by traversing on the Array and concat value to a variable with a separator for string conversion.

Fortunately, there are several built-in methods in JavaScript that can be used to convert an array to a string.

How to Convert an Array To a String in JavaScript

Read more

How to copying content to Clipboard with JavaScript

Numerous we­b applications require the ability to copy conte­nt easily, for a variety of purposes such as note­-taking, code snippet repositorie­s, and social media sharing tools. Copying text or data through a simple click on the­ clipboard in today’s digital landscape is an essential fe­ature.

In the pre­sent-day scenario, most modern browse­rs offer an effortless way to copy conte­nt to the clipboard utilizing JavaScript.

Before­ proceeding, it is worth noting that due to se­curity protocols, this feature may not be compatible­ with several browsers. To copy the­ selected te­xt, kindly instruct the user to press CTRL+C shortcut command.

In this tutorial, I show how you can copy the content to the clipboard with or without plugins.

How to copying content to Clipboard with JavaScript

Read more