How to Enable Text Selection in PDF.JS
By default PDF.JS does not enable text selection in rendered PDFs. To enable text selection, another method needs to be called that renders the PDF text in a separate text layer.
Creating a Simple HTML Editor with Javascript
This tutorial shows how you can create a simple WYSIWYG HTML editor with Javascript, somewhat like a mini version of the famous TinyMCE HTML editor.
Javascript - Previewing PDFs During Upload
The very useful PDF.JS library makes it possible to show a preview of the PDF before uploading to server.
Javascript - Previewing Images During Upload
Showing a preview of the image before being uploaded to server provides a good user experience. You can show a preview image using the URL.createObjectURL method on the selected file.
The Useful <time> HTML Element
The time tag defines date and time in a HTML document. This tag is helpful in making the markup more structured, so that it becomes easier for machines to interpret the page.
Manipulation of HTML Select Element with Javascript
This tutorial explains how you can perform common operations on select element with vanilla Javascript - adding/deleting options or getting/setting the selected options.
Pure Javascript - Replacing an Element
replaceChild and replaceWith methods can be used to replace an element with pure vanilla Javascript.
How to Change URL Parameters with Javascript
This tutorial explains how you can change url parameters - edit, add or delete, using the URL and URLSearchParams objects.
Copying to Clipboard with Javascript
The feature of copying something to the OS clipboard is quite useful for the end user. In a web page it can be implemented with the Selection API.
How to Get URL Parameters with Javascript
The URL and URLSearchParams objects makes it very easy to get parameters in a url.
Javascript Promises - Understanding Chaining and Error Handling
Javascript Promises are quite simple to start with, but confusions arise when Promises are chained. This tutorial focuses on the return values of then() and catch(), which are crucial to understanding the process.
Typing and Deleting Effect with Javascript
Typing effect is a good way to grab user attention. To implement typing effect, you can start by showing the first character initially; after a few milliseconds you can show the first 2 characters; and so on till the whole sentence has been shown.
Dynamically Loading Fonts with Javascript
There are some cases where an application must load a font dynamically rather than setting it through the @font-face CSS rule. Fonts can be downloaded with Javascript using the new CSS Font Loading API.
How to Get Image Dimensions (Width & Height) with Javascript
Width and height of an image can be found using the "naturalWidth" and "naturalHeight" properties of the image DOM element.
Javascript - Downloading Files with AJAX and Showing a Progess Bar
Currently most of the web applications show a normal link for the user to download a file. However it is also possible to download a file using a Javascript AJAX request.
Pure Javascript - AJAX File Uploading and Showing Progess Percentage
This tutorial shows how to upload a file using Javascript. It includes everything that is involved - from selecting a file, validating its type and size, sending an AJAX request and showing the upload progress of the file.
Changing Size of Iframe Automatically to Fit Content
You can inform the parent about the changed size of the iframe page by passing messages from the iframe to the parent. This is helpful in preventing scrollbars from coming up.
Tracking Downloads with Google Analytics using Custom Events
Track downloads happening on your website using Google Analytics, and a bit of Javascript. See the analytics data in the Google Analytics dashboard.
Setting HTTP Headers in a Beacon Request
The Beacon API extracts the type of the transmitted data, and sets this as the Content-Type for the HTTP request.
Sending AJAX Data when User Moves Away / Exits from Page
It is sometimes required that your application sends an AJAX to the server before the user moves away from the page (goes to another page, reloads the page, closes the browser etc). The tutorial explains how to do this.