jQuery | Freaky Jolly

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 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!

Gmail Login Input Field Style!

A few days back Gmail changed it’s login screen with a nice interactive input field with floating labels when the user focus to write. This looks awesome and reminds of many android native device form fields. The ionic framework also having options to create a similar type of form fields with floating labels on them.

In this post, I will create a form inspired by similar style form fields for email and password. Here I will use on basic CSS and a pinch of jQuery code. I have kept this simple without using any bootstrap class so that it can be easily plugged and customized as per requirement.

Continue reading Gmail Login Input Field Style!

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

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

Category: jQuery