Category: Javascript and jQuery

Image preview before upload using jQuery

Image preview before upload using jQuery. Show the image before uploading it on the server using jQuery, This article explains how to preview an image before uploading. Allowed File Extensions while image upload using “allowedFileExtensions“ HTML code <input type=”file” class=”form-control” id=”file_attache” placeholder=”file attache” name=”file_attache”> jQuery code $(“#file_attache”).fileinput({ overwriteInitial: true, maxFileSize: 2500, showClose: false, showCaption: false, […]

Print HTML Content using JavaScript

Today we discuss about the Print HTML Content using JavaScript.To print the content page or page with dynamic html.The document.write() method is used to write data to the tag of your HTML document. JavaScript code example var mywindow =”, ‘Printing example’, ‘height=400,width=600’); mywindow.document.write(‘<html><head><title>Print demo</title>’); /*optional stylesheet*/ //mywindow.document.write(‘<link rel=”stylesheet” href=”main.css” type=”text/css” />’); mywindow.document.write(‘</head><body>’); mywindow.document.write(‘<div>I am […]

Image lazy loading using JS

Image lazy loading using JS, improve your website speed. Lazy loading images JavaScript Background-image lazy load Lazy load images jQuery Piece of html code // jquery librabray <script src=””></script> <img class=”lazy” data-src=”” /> <img class=”lazy” data-src=”” /> <img class=”lazy” data-src=”” /> <img class=”lazy” data-src=”” /> jQuery code setTimeout(function() { lazyLoadImages( $(‘.lazy’) ); }, 100); var […]

Detect device in jQuery

Sometime we need to detect device in jQuery to identify the screen, To add some extra or different logic according to the requirement. 5 ways to detect the mobile Devices in jQuery Solution 1:- Using navigator userAgent. if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) { // mobile device code } Solution 2:- Using window matchMedia method $(function() { […]

Create a pie chart using JavaScript.

Today, We learn to create a pie chart without any library. This post will take you through how to do that using JavaScript, HTML Canvas, and CSS. Pre-Requirements HTML CSS JavaScript Create a pie chart full code: <!DOCTYPE html> <html> <head> <title>canvas test</title> <style type=”text/css”> .pie_container{ width: 100%; height: 100vh; display: flex; justify-content: center; align-items: […]

Back To Top