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
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
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!
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
In my previous post, we created a Google Map Static API image using a Get URL. In one of my project, there was a requirement of HTML conversion into PDF document. So I wanted to add that Map Image into that PDF document. I used html2canvas and jsPDF libraries for that.
When I was trying to convert an HTML section with Google Static Map Image into the canvas, I faced a strange issue.
Uncaught (in promise) DOMException: Failed to execute ‘toDataURL’ on ‘HTMLCanvasElement’: Tainted canvases may not be exported.
Continue reading Resolved! Uncaught (in promise) DOMException: Failed to execute ‘toDataURL’ on ‘HTMLCanvasElement’: Tainted canvases may not be exported
In an Angularjs project, if you are trying to add a datepicker having all features like MinDate MaxDate etc, you will hardly find any module which is performance efficient, bug-free and is requirement friendly like jQuery UI datepicker.
So, If you are looking to use jQuery Datepicker as a directive in your AngularJS project, then believe me at present it will be a great option available which is fast, healthy and powerpack with huge options.
here I am going to share with you datepicker directive with basic options only like MinDate, MaxDate and default date, But as per requirement you can follow the same procedure to add more option in the directive.
Continue reading jQuery UI Datepicker AngularJS Directive using Min Max Options
Following are defined format strings, which can be used to format JS date object.
Continue reading How to format JS date object in AngularJS using date filter.
Using tab index attribute in HTML form fields a user can easily navigate to the next or previous field by merely using the keyboard. But after some presses, Tab index focus caret secretly goes to a new dimension where it becomes impossible to press tab to get back that caret guy in place. ultimately we use to move back caret guy in place.
So during a requirement where I wanted to trap carret guy in a wrapper so that even after continous tabbing caret we never be able to leave that defined wrapper. After defined at input field that will focus on first defined form field automatically.
Continue reading Use TabIndex Form Field Focus in Specific Container
Small and easily customizable percentage progress bar can be help full in some cases when you want to show quick inline graphs or data notations. If the requirement is simple, we can’t proffer heavy libraries. For the same reason, I have written a small jQuery function to draw an animated progress bar. I have added some custom option which user can easily change in HTML attribute it self.
We can change Height, Width, Background or Bar color, Speed of animation. You can suggest me if other features can be added.
Continue reading Simple Small Progress Percentage Bar Using Custom CSS and jQuery
You can always find jQuery plugins or libraries for any type of requirement. But if we try to add plugins for every specific requirement, then we end up with a bunch heavy loaded library set which can take much time to load and can badly affect page efficiency. So I personally prefer to always try to code some specific function or method which can easily do the stuff without causing any hassle to page load time and including big sized libraries which always and have not required features which we will never need in future.
Here we will talk about very simple but very important function which can make longer texts look more concise and user-friendly. When we have a web page with longer texts in every section, it becomes very difficult for users to scroll those lengthy documents either they are on desktops or mobile devices. So “Read More” functionality comes to the rescue. This feature adds a read more link after longer texts trimming to 2-3 lines. So if a user wants to read the whole text, they can simply click on “Read More” and see the whole text.