Category: Jquery

You already know that in HTML there is no search option in the dropdown element. When you press any single key on the dropdown then it takes you to the option but not allows you to search whole or particular string.

There are many jQuery plugins which do this for you.

But in this tutorial, I am not using any jQuery plugins for implementing it.

When it’s required?

This kind of feature generally requires when we have the long list of options in the Select element and want to make an easier navigation for users.

By this way, you enable user to search option on dropdown

The most common example is Country Dropdown which you have seen on many websites when you go for Registration.

What in the Demonstration ?

Creating a simple form which also contains a drop-down element. When the dropdown gets clicked then showing the Search Box and according to the input show suggestion.

Make a Dropdown with Search Box using jQuery

AJAX 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 your time when you need to add the same line of code in several files.

But what when you are not using Server side scripting within your project.

For solving your problem you can use <iframe > which simply add another page in your file but I don’t think it is a better way.

You can handle this on your Client-side with jQuery.

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

  • AJAX request
  • .load() method

How to include HTML page with jQuery

AJAX Jquery

I think you have already used before and after pseudo-elements within your CSS many times. It inserts CSS on your targeted element before or after.

Within jQuery, there are two methods with the similar name. But they position or add the element before and after instead of changing CSS.

before() and after() method in jQuery

Jquery

Sometimes we have required displaying the custom context menu instead of Web Browser default one.

By doing that you can set menu according to the element and you have full control over it. You can theme or design it according to your website, add actions, show only those items in the menu which requires.

How to implement it ?

For implementing this I am using jQuery which disable the default Right click and show the custom menu.

What in the demonstration ?

Within demonstration, I am creating the list of elements when the user right clicks on one of it then showing the custom context-menu options.

And also creating a hidden field which stores the id of the Right-clicked element based on that we perform an action on that only.

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 are 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.

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 use 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.

What it’s required?

It mainly requires when you want to perform an action on all child elements or find the collection of elements which have given class, etc.

There are many other cases where you can use this.

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

The images which are wouldn’t successfully load on the web page will show nothing when the source does not exist.

It looks bad when there are many images and some of them are missing.

For solving this you need to look through all the pages and find the broken images and fix them manually time to time. It is the time-consuming process.

What in the demonstration?

I show you with two examples, How you can automatically detect the broken images and replace with another image.

  • In the first one, I am using the jQuery, and
  • In the second, using AJAX with jQuery

AJAX Jquery

There are many cases when require to update certain part of the web page on the regular basis.

For example – showing live cricket or football score, display latest news feeds,etc.

There are two ways to send AJAX request on specified time –

  • By setInterval() and
  • By setTimeout() JavaScript functions.

Both do the same work but they are reliable for certain cases, which I discuss in this tutorial.

How to fire AJAX Request on Regular Interval

AJAX Jquery PHP