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.
How to Handle CSS in Browser Full-Screen Mode
When an element goes to full-screen , you can change the user interface by changing CSS properties. Tutorial handles all the cases that can possibly come.
How to Detect Browser Language with Javascript
Using navigator.language property, you can detect browser language with Javascript.
Google Login with Javascript API
You can implementing "Login with Google" feature using only Javascript, using the Google SDK. This tutorial shows how to get a user to login with Google, and get his profile information.
Implementing 'Read More - Read Less' in Javascript
A good way to reduce a long text to a shorter one is by implementing "Read More - Read Less" functionality with Javascript.
UI Tip : Using Animated Favicon to Attract User Attention for an Inactive Browser Tab
While the user is on a different browser tab, you can get his attention by animating the favicon of the website.
How to Get Video Thumbnails with Javascript
It is possible to get the thumbnail of a video at a specified duration using canvas and video html elements.
How to Animate a Favicon in (Most) Browsers with Javascript
Only Firefox allows an animated GIF as favicon. To achieve an animated effect in rest of the browsers, you need to keep changing the favicon at regular intervals with Javascript.
Writing jQuery closest() in Pure Javascript
$.closest() is one of the most useful functions in jQuery. Know how to write this in pure Javascript.
Writing jQuery find() in Pure Javascript
$.find() is one of the most useful functions in jQuery. Know how to write this in pure Javascript.
Visual Illustration of Offset Height, Client Height & Scroll Height
Visually understand the difference between offsetHeight, clientHeight & scrollHeight with a live DOM element.
Auto Grow a Textarea with Javascript
Using the scrollHeight property you can make your textarea auto grow vertically based on its content.
Understanding clientHeight, offsetHeight & scrollHeight
offsetHeight = VISIBLE content & padding + border + scrollbar ● clientHeight = VISIBLE content & padding ● scrollHeight = ENTIRE content & padding (visible or hidden)
How to Add CSS Rules to a Stylesheet with Javascript
You can use insertRule to add new CSS rules to a stylesheet using Javascript.
Revealing Hidden Elements By CSS Animations
Examples of revealing (show & hide) elements through CSS animations.
Validate URL form field in Javascript Without Regular Expression
By using an input element of type URL and HTML5 Constraint Validation API, you can eliminate the need of a regular expression for form validation.
How to Move an Element in a Circular Path with CSS Offset-Path (Motion Path)
Moving / animating an element along a circular path can be achieved by CSS Offset Path (Motion Path).
How to Detect User Timezone in PHP
You need to use the Javascript getTimezoneOffset() method to get the timezone offset in hours, then pass this offset to PHP to detect user timezone name using timezone_name_from_abbr() function.
How to get DateTime with Timezone Offset (8601 format) in Javascript
You need to use the Javascript getTimezoneOffset() method to get timezone difference in hours and minutes, and then combine it with the current datetime using Date object.
Handling Multi-Touch with Pointer Events in Javascript
A tutorial on how to handle multi-touch with the new Pointer Events.
Advantages of Using Pointer Events Over Mouse & Touch Events
The new Pointer Events can handle both mouse, touch and pen events without any special case handling. Start using them now !
How to Convert PDF to Image (JPEG / PNG) with Javascript using PDF.JS
A PDF can be converted to a JPEG or PNG using the Javascript PDF.JS library.
How to Show a Loading Progress Bar in PDF.JS
In this tutorial we will discuss how we can implement a progress bar when PDF.JS loads a PDF.
How to Open a Password Protected PDF with Javascript using PDF.JS
PDF.JS being a complete PDF viewer also supports viewing of password protected PDFs. This means that your application can prompt the user for password of the PDF when trying to be viewed.
PDF.JS Tutorial - How to display a PDF with Javascript
This tutorial explains how to display a PDF file in your web application using the PDF.JS library.
HTML5 Canvas Tutorial - How to Draw a Graphical Co-ordinate System with Grids and Axes
In this tutorial we will draw a graph that has grid lines and X & Y axis. The graph also has tick marks at the grid lines with corresponding values.
HTML5 Canvas - Solving the Problem of Inverted Text When Y-Axis is Inverted
There are situations where we have to invert the Y-axis of the canvas element. However then text or images added there become inverted too. The tutorial tells you how to solve this problem.
How to Draw 1px Crisp Lines in HTML5 Canvas
To drawing a 1px smooth line on the canvas, you need to adjust 0.5px so that pixel boundaries of the canvas matches with the actual boundaries of the screen.
Performance of ES6 Template Literals as compared to String Concatenation (+) Operator
Template literals is the ES6 way of writing multi-line strings. But surprisingly the performance of template literals is almost the same as the string concatenation (+) operator.
Previewing Images with jQuery : Data URIs vs Object URLs
At the time of uploading images, web applications usually show a preview of the image. This preview can be shown in 2 ways - by using the Data URI of the image or by using its Object URL.
2 Ways of AJAX File Upload - FormData and FileReader
A file can be uploaded with jQuery in 2 ways. The first method is implemented using FormData where a multipart/form-data POST request is sent. The second method is uploading using FileReader where a normal POST request is sent.
Using Server-Sent Events for Logged-in Users
A tutorial on how to implement Server-Sent Events for logged-in users. Server will send updated content specific to that logged-in user.
How to Make the Window Full Screen with Javascript
The Javascript Fullscreen API allows developers to change the browser to fullscreen mode with JavaScript and CSS.