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?
Category: jQuery
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
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.
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