Blog

Pinned snapping without reverse snapping issue:

There is an issue with the snap function of the scroll trigger such that – if the user does not scroll enough as a threshold, the section has a bouncy effect and gets auto-snapped to the original position, To make forward snapping always work follow the...

Create Thumbnail of pdf and video file with certain width and height – JavaScript Function

Code Snippets, JavaScript

The following code creates a 480 X 320 px thumbnail and calls the upload function to upload the blob data. Example Screenshots: Extract PDF document thumbnail: JavaScript Function function extractDocThumbnail() { const pdfUrl =...

HTML form with detectable changes and a reset button

Code Snippets, JavaScript, jQuery

Let’s create an HTML form with many different types of inputs with values and a hidden submit button and a reset button. Now, create a jQuery script that detects changes in input fields, unhides the submit and reset buttons, and hides them again if there is no...

OTP HTML and Script that allows pasting

Code Snippets, JavaScript, UI Components

Here is a code with the demo I just found on Codepen, that handles pasting OTP also. See the Pen OTP Field by Puneet Sharma (@webdevpuneet) on CodePen. HTML <body> <h1>Enter OTP</h1> <div class=”otp-field”> <input type=”text”...

javascript detect whether mobile is in landscape or portrait mode

Misc

Both methods will detect changes in orientation. The first method is simpler but only works on mobile devices, while the second method is more universal and can work on desktops as well. Method 1: Using window.orientation function checkOrientation() { if...

Draw any SVG path from 0 to 100% – using GSAP

Misc

See the Pen Draw any SVG path from 0 to 100% by Puneet Sharma (@webdevpuneet) on CodePen. HTML <!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> <meta name=”viewport” content=”width=device-width,...

SVG Path Stroke Animation

SVG Animation

Here is a simple method to animate SVG path strokes <path id=”line1″ fill-rule=”evenodd” clip-rule=”evenodd” stroke=”#000000″ stroke-width=”2″ d=”M340.637 221.93H418.837V224.676H341.774L302.854...