Makitweb Posts

Jquery

In HTML it is not possible to add an element in 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.

You can do both operations with select2 jQuery plugin.

Insert image in dropdown lists with jQuery

Read More Insert Image in Dropdown lists with jQuery

Jquery

In CSS !important is use 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.

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 add !important to CSS property with jQuery

Jquery

JavaScript has some inbuilt method which easily converts an Array to string.

You traverse on the Array and concat value to a variable with a separator for string conversion if you are not familiar with methods.

Converting an Array to string in JavaScript

Read More Converting an Array to string in JavaScript

Javascript

Nowadays all modern browsers allow copying content to the clipboard with JavaScript.

But before this, it is not supported in most browsers because of security reasons. You need to ask the user to press CTRL+C to copy the currently selected text.

The ZeroClipboard library uses invisible Adobe Flash movie to copying content to Clipboard. It works well with most browsers.

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

How to copying content to the Clipboard with JavaScript

Read More How to copying content to the Clipboard with JavaScript

How To Javascript

The user gets frustrated when its fill all information in the form and submits it then the data not being submitted because of invalid input.

In this case, instead of checking all values on your server side script you can also do this in Client side with jQuery JavaScript.

Now the user only able to input valid character from its keyboard.

For example, you has doesn’t require alphabets in age field then you can restrict the input element to take only numbers.

In this tutorial, I show how you restrict keyboard character with jQuery.
keyboard character

Read More Restrict keyboard character input with jQuery

Jquery

Pagination is a technique to break and display the large list of content in the smaller parts. This reduces your page load time and it is user-friendly.

There are multiple types of pagination available some are –

In this tutorial, I show How you can add numeric pagination to your web page.

How to make PHP numeric pagination

Read More How to make PHP numeric Pagination

DataBase PHP

When you send AJAX request to fetch the long list of data from the server then it may take some time to process your request and return.

During this case, at the user end, there is no change is being displayed and it doesn’t know either its request is in progress or not. If the user is on the slow network then its take some more time.

You can display a loading Text message on the screen or show an image loader.

In this tutorial, I show you How to display loading image when you are making AJAX request. But you can do the same with Text message.

Display loading image when AJAX call is in progress

Read More Display loading image when AJAX call is in progress

AJAX Jquery

While using jQuery UI Datepicker in your project you want to allow users to select only days between your specified date range.

jQuery UI Datepicker has two options – minDate, and maxDate that allow you to specific date range to your Datepicker.

It simply disables other days which are not between the defined range.

In this tutorial, I show you how to use both options in your jQuery UI Datepicker.

How to Set minimum and maximum date in jQuery UI Datepicker

Read More How to Set Minimum and Maximum Date in jQuery UI Datepicker

Jquery

You have seen on many Mobile apps when you pull down from the top and release it the content is been refreshed.

The common example of this you see in Chrome, Opera mini browser for mobile.

In this tutorial, I show How you can add the similar type of functionality to your web page in desktop view.

What in the demonstration?

I will create two examples,

  • Reload page when the user pulls down the button at the specified height.
  • Reload page when the user releases the button.

How to make Pull down to refresh webpage with jQuery

Read More How to make Pull Down to Refresh Webpage with jQuery

How To Jquery