Category: JQuery

You already know that in HTML there is no search option in the dropdown element.

When you press any single key in the dropdown then it takes you to the option but not allows you to search whole or particular string.

Searching is required on the list when there is the long list of items are available.

It is time-consuming to find the option by scrolling the list.

In this tutorial, I show how you create dropdown with search box using select2 plugin and read the selected option.

Make a Dropdown with Search Box using jQuery

JQuery PHP

If you are familiar with PHP, there you can quickly embed another PHP or HTML file within your page using include and require statements.

This saves the time when need to add the same line of code in several files.

If you are not using the server-side script in your webpage then you can use the iframe or Client-side scripting language.

There are two ways in jQuery for including a file in another HTML file –

  • AJAX request
  • .load() method

How to include HTML page with jQuery

AJAX How To JQuery

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

There are two methods with the 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 these methods on your webpage.

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

How To JQuery

Sometime it is require to show custom context menu instead of browser default one when right-click on the webpage or on specific element.

By doing that it is possible to show context menu according to the element and disable the default menu where necessary.

It is customizable according to the website design.

For implementing this I am using jQuery in this tutorial.

When right-click on the element then disable the browser default context menu and display the custom options.

Custom Right Click Context menu with jQuery

JQuery

In this post, I show how you can add and remove new element within your web page with jQuery.

There are two approaches for doing this –

  • Pre-made all elements
  • Dynamically create new element

The first case is easy but you have to create all of the element at once and hide them which is not required currently.

When you have to add an element you need to display the element one by one and for removing hide them.

Here the problem is – there are multiple unused elements are available which occupies space within your code and makes it messy even if you don’t have needed some of the elements.

The second solution is better than the first here you create and remove an element dynamically when you have to require.

In the demonstration, I am using the second solution.

Dynamically add and remove element with jQuery

JQuery

Some website owner Blur some part of the content and ask the user to register to their website or share the article for full the whole content.

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

What in the tutorial ?

In this quick tutorial, I will show How you can Blur an element using jQuery.

For Blur effect I am using Foggy jQuery Plugin. It is a light-weight plugin which is easy to setup and use.

How it works

Foggy by default uses the “-webkit-filter: blur” CSS attribute.

If the browser doesn’t support it, Foggy falls back to a manual blur. It makes several copies of the selected HTML element. It adds transparency to all copies and moves each of them by small amount, thus creating the blur effect.

Blur effect on the element via Foggy jQuery Plugin

JQuery

The .each() is used for looping in jQuery. It is similar to foreach loop in the PHP which loops until it gets data.

It works with an Array, Object, and jQuery selector, and you don’t have the need to know how many data are available it performs iteration continuously until it getting data that makes it differ from other looping methods.

While iteration it also keeps tracking the element index.

How to use the .each() function in jQuery

JQuery

Password field by default doesn’t show any visible text other than the symbol.

Some websites allow the user to view the hidden text in password field by toggling.

For this, they provide an element e.g. checkbox or a button when it gets clicked then the password element value is been visible on the screen and reset to default view when it again gets clicked.

In this article, I show How you can implement this functionality with jQuery and JavaScript.

show and hide Password field text with jQuery and JavaScript

Javascript JQuery