Angular 7/8 | Use Popular jQuery Datatables in Angular2+ Projects in few steps

Compatible from Angular 2 to 8

Datatable is popular among developers developing in web projects using the mainly jQuery library. It is a full package of many basic features like Pagination, Sorting, Filter search bar, etc.

In this post, we will implement this fully featured Datatables library in Angular project and discuss various options available from basic to advance level of Datatables.

Continue reading Angular 7/8 | Use Popular jQuery Datatables in Angular2+ Projects in few steps

jQuery | Checkbox List Select / Unselect All with Indeterminate Master Check Example Tutorial

Selection of items with a checkbox is very common user interaction found in many web application. Usually, there is a master checkbox to Check / Uncheck list items with a single click.

In this post we will create an item list with checkboxes and master checkbox, on Checking/ Unchecking will select/ unselect the following list. We will also implement indeterminate state of the checkbox which indicates that some of the items with checks are checked but not all.

Continue reading jQuery | Checkbox List Select / Unselect All with Indeterminate Master Check Example Tutorial

JavaScript PreloaderJS | How to Pre / Post Load Assets like Images, CSS, JS files using Preload JS liberary

In this post, we will discuss How to load assets like images, CSS files, js files and another type of files in lazy load manner using Preload JS library. Using Preload we can check how much data is loaded and also check progress in percentage.

Preload Js can be used in a number of scenarios like if we have a number of heavy images then we can show a loader when images are loading in the background, then after the all images are loaded we can show success message or hide loader.

Continue reading JavaScript PreloaderJS | How to Pre / Post Load Assets like Images, CSS, JS files using Preload JS liberary

Add reCAPTCHA v2 and Form Validation using Custom jQuery

In this post, we will create a form having custom validation for required fields using jQuery. This custom form will also have reCAPTCHA v2 of Google to verify if the user is a bot or real person.

Continue reading Add reCAPTCHA v2 and Form Validation using Custom jQuery

Responsive Tabs in jQuery Without Any Plugin!

Showing tabs elements on a web page looks great and really minimize space coverage by content. The user feels free to select only heading to view related content. in mobile devices also we can provide similar behavior in responsive design.

in this post we will create responsive tabs in jQuery, this will not have any plugin. I have added some jQuery custom code and CSS to make it easy to plug and use anywhere.

Continue reading Responsive Tabs in jQuery Without Any Plugin!

CSS & jQuery – How to Disable Text Selection Highlighting?

In some cases, we don’t want others to copy selected text. To prevent text on a webpage we can opt for CSS, Pure JavaScript or jQuery solution. We will discuss one by one.

Continue reading CSS & jQuery – How to Disable Text Selection Highlighting?

jQuery – Top 5 Image Slider/ Carousel Responsive

Image Sliders plays a key role in beautifying user interface by placing multiple images at a single or limited area. Here we will discuss Top 5 Image Sliders/ Carousel Available for free. We will also discuss the pros and cons of each option available.

Continue reading jQuery – Top 5 Image Slider/ Carousel Responsive

Owl Carousel 2 – Customize Navigation Next Prev Arrows

Owl Carousel 2 is a very popular and easy to implement Image and HTML slider. This is the most loved and favorable image slider available. Most developers prefer to use this slider due to many reasons like responsiveness, touch device support and also support older browsers. It is a full package of many useful options to customize it.

Here we will discuss navigation arrows, next prev buttons available by default looks a bit simple and centralized in between, so adding some custom CSS we will align them on both corners of the slider.

Continue reading Owl Carousel 2 – Customize Navigation Next Prev Arrows

jQuery – Show Tooltip on Long Text with Ellipsis AKA DOTDOT

Sometimes in grids, we have long strings of data to show in cells, but they not only distort the UI but also make all data visible even when not necessary. So to resolve these scenarios what we can do is to show access data in tooltip on hover and by default exceeding data from a limit be hidden in the ellipse or what we say DOTS (…). This method makes grid balanced to see, more compact and clean to analyze.

Continue reading jQuery – Show Tooltip on Long Text with Ellipsis AKA DOTDOT