How to Create Multipage PDF from HTML Using jsPDF and html2Canvas

Last Updated on 25 July 2018

There are a number of tools which can easily create PDF files from JSON or raw data provided. But in some situations, we have rich UI elements like images and data representation in graphs, so in that case, we may require PDF as it is.

jsPDF and html2canvas are really powerful tools which can help you to convert whole HTML page into multi-page PDF document, which you can show in iFrame or user can even download it.

Continue reading How to Create Multipage PDF from HTML Using jsPDF and html2Canvas

Image/thumbnail Zoom Effect on Mouse Hover Using jQuery

In this post, we will discuss jQuery custom code to implement Image/ Thumbnail Zoom effect on hover. For a number of images, we usually place thumbnails of larger images which be selected by the user to view full-size image.

In this example, we will place images in square boxes which will show thumbnails by default but zooms to original dimensions as we over/ mouseover with the cursor. A user can also click on that image thumb to view full-size image in fullscreen.

Continue reading Image/thumbnail Zoom Effect on Mouse Hover Using jQuery

Navigate Form Field Link Elements Using TAB and Shift+TAB Keys in Webpage

Sometimes HTML page having form fields need keyboard navigation by a user in a specific area or a container. A user can navigate using TAB forward motion or TAB+SHIFT key combination for backward navigation through form elements like the link, input, text areas, select dropdowns etc.

But we can control it to some extent using HTML attribute tabindex to set an order of navigation. After completing all elements it jumps to browser controls which annoys a user not interested in the focus of those controls.

Continue reading Navigate Form Field Link Elements Using TAB and Shift+TAB Keys in Webpage

Hide or Close Div Using Escape Key JavaScript | jQuery | AngularJS

Esc key on our keyboard can be useful even in Web pages and applications. We can use Esc key to close dialogue boxes or any custom popup modals. Here we will discuss even handling on ESC key press in which we can fire any event we want.

Continue reading Hide or Close Div Using Escape Key JavaScript | jQuery | AngularJS

How to Get Selected Value in DropDown List using jQuery JavaScript?

In this post, we will discuss the various method in jQuery and JavaScript to get value selected in DropDown. In Javascript, it becomes a bit tricky to fetch selected values, but in jQuery, we have some predefined and easy methods to fetch values from form fields like drop down.

Continue reading How to Get Selected Value in DropDown List using jQuery JavaScript?