Makitweb Posts

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

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

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

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

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

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

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

How To Jquery

jQuery not only allow us to attach Event Handlers on the element it also allows to take control the flow of the events.

You can enable and disable an event whenever you want in your program.

When it’s required?

  • The event is no longer needed on the element.
  • Enable event when the specific condition is TRUE otherwise disables it. The most common example, of this you see on Registration page of many websites where they don’t enable click event until the user is not checked I agree on terms & conditions.

jQuery has on() and off() method that helps you to enable and disable your specific selector.

Enable and Disable Event from element with jQuery

Jquery

jQuery UI library has many widgets for the specific purpose like – Accordion, Tabs, Tooltip, etc. one of them is Datepicker that allows the users to pick a date from the Widget.

It has various options by which you can manage the Datepicker layout e.g. change default date format, restricting date range, show year dropdown, etc.

While using this Widget you may have condition arises where you want to highlight some of the specific dates, or change background-color of Holidays, events Days.

You can do this with beforeShowDay option in the datepicker() method. This allows you specify CSS class which contains your defined CSS style.

How to Highlight selected date in jQuery UI Datepicker

 

Jquery

The :contains() is a jQuery selector which allows us to search text within the element and select it and perform an action on it.

For example – you are dynamically listing records from MySQL database table here, you have a requirement to add search filter based on key press. In case you can use jQuery AJAX which requests and load data from the server every time when the user press key in the search field.

You can simplify this with :contains() jQuery selector to filter data in Client side.

There are some other ways in jQuery by which you can do the same operation. But, in this tutorial, I explain you the use :contains() selector for search text.

Note – The :contains() searching is case-sensitive. In the demonstration, I show how you can use for case-insensitive search.

jQuery - Search text in the element with :contains() selector

Jquery