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