Category: jQuery

Resolved! Uncaught (in promise) DOMException: Failed to execute ‘toDataURL’ on ‘HTMLCanvasElement’: Tainted canvases may not be exported

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

Generate Multipage PDF using Single Canvas of HTML Document using jsPDF

jsPDF is a nice library to convert HTML content into PDF. We can put the different type of elements in PDF from HTML like an icon, images, text, CSS styles.
Here we will discuss an example of jsPDF to convert long HTML page into PDF document which will be generated client-side and download.

Continue reading Generate Multipage PDF using Single Canvas of HTML Document using jsPDF

Create and Download XLS Excel From JSON Response Data in Webpage Using Javascript

Viewing formatted data on HTML webpage is a good idea until the user wants to do some quick changes in tabular data like sorting, filtering. So it is better to take it in your own hands instead of making server calls. Today we will convert JSON response data into the Excel file. Excel file will have a header and columns defined which will be downloaded on the client side.

Continue reading Create and Download XLS Excel From JSON Response Data in Webpage Using Javascript

Convert HTML Document into Image JPG PNG from Canvas

html2canvas is a powerful library to convert HTML into a canvas. Canvas created can be used to create PDF or we can simply append in the document somewhere required. Here we are going to simply convert HTML document or any element into a canvas which we later convert into Image of JPG or PNG type.

Continue reading Convert HTML Document into Image JPG PNG from Canvas

jQuery & PHP Convert Date time to Facebook Style TimeAgo

Whenever a user sees a date or time, he/she start doing comparisons between current time and given time. So it takes some more brain resources to do time difference calculations. Facebook knows about this lazy human behavior, that’s why it always shows date time in the following format

less than a minute ago
17 minutes ago
1 Year ago

Instead of

30 May 2018 15:35:47
30 May 2018 15:18:33
23 May 2017 09:28:23

Continue reading jQuery & PHP Convert Date time to Facebook Style TimeAgo

jQuery UI Datepicker AngularJS Directive using Min Max Options

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

How to format JS date object in AngularJS using date filter.

AngularJs provides its own “date” filter to modify Javascript date object to a given format.

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.

Use TabIndex Form Field Focus in Specific Container

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

How to Set Disqus Configuration Variables.

Disqus is a great discussion add-on available for multi platforms. The installation process is very simple for known CMS and platforms. But my requirement was to add Disqus on a single page app. To get it installed, I landed on this page.

Continue reading How to Set Disqus Configuration Variables.

Simple Small Progress Percentage Bar Using Custom CSS and jQuery

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