Autocomplete jQuery using tokeninput
Tokeninput is a jQuery plugin that allows users to select multiple items from a predefined list or database via AJAX.Using autocompletion as they type to find each item.You may have seen a similar type of text entry when filling in the. Features Intuitive UI for selecting multiple items from a large list Easy to skin/style […]
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 = window.open(”, ‘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=”https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js”></script> <img class=”lazy” data-src=”http://example.com/image.png” /> <img class=”lazy” data-src=”http://example.com/image.png” /> <img class=”lazy” data-src=”http://example.com/image.png” /> <img class=”lazy” data-src=”http://example.com/image.png” /> jQuery code setTimeout(function() { lazyLoadImages( $(‘.lazy’) ); }, 100); var […]
Add class or attribute in jQueryAdd class or attribute in jQuery
Hello, Reader today we discuss the add class or attribute in jQuery.Sometimes developers need to add a custom class or attribute on the element after the page load or clicked somewhere to perform functionality according to the need. 1. Add random class or attribute on the drop-down options var counterOption = 0; jQuery(“select”).each( function (){ […]
Add/Remove Class in Javascript
Add/Remove Class in Javascript, we will use “classList” function. When a user clicks on the element, then a class will be added to that element.Apply your logic using the newly added class, like show hide another div to attract the user. HTML code <!DOCTYPE html> <html> <head> <title></title> </head> <body> <div id=”close-container”> <button id=”my_button”> My […]
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() { […]
setTimeout() and setInterval in jQuery
Today we will discuss about setTimeout() and setInterval function in jQuery . setTimeout function :- The setTimeout() is executed only once.Use the clearTimeout() method to prevent the function from starting.By calling clearTimeout() you can to stop the execution. var myTimeout = setTimeout(function () { // Your logic }, 2500); // 2500 are milliseconds // to […]
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: […]
Section wise scrolling in jQuery
Section wise scrolling in jquery, smoothly snaps to sections. Mouse scroll to scroll and snap to each section. Set the ID for your section to scroll the section. You can change the speed of the scrolling and stay time on the section. Example of section wise scrolling in jQuery <!DOCTYPE html> <html> <head> <meta charset=”utf-8″> […]
Propertychange And ajax call in jquery
propertychange event on input box The onpropertychange event is fired in both (the direct and the indirect) cases. You can use the propertyName property of the event object in the event handlers for the onpropertychange event to get the name of the modified propertyI want to detect whenever a textbox’s content has changed and execute […]
.Net – How to Set values to Session in JavaScript?
Today, we will not posted a blog. It’s a question and answer. Below you will find how to set values to session in JavaScript? Question – I want to set the drop down selected value in Session. I have done in Code behind. But for some condition i have to Do in Client Side Itself. […]