Search

jQuery's Articles

jQuery is a JavaScript library designed to simplify HTML DOM tree traversal and manipulation, as well as event handling, CSS animation, and Ajax. It is free, open-source software using the permissive MIT License. As of May 2019, jQuery is used by 73% of the 10 million most popular websites.

Disable Text Selection In WebPage Using jQuery and CSS
Many times you need to prevent text selection on your web pages because of no one direct copy your web page content. In this article, we will share with you how to disable text selection on HTML web pages using jQuery and CSS. Why did text selection make disable? Many people have question why we need HTML web pages text selection to make disable for web users? it has a simple answer is for a security purpose. in some web pages, some text content needs to protect for a copy past functionality then this functionality is very helpful for us. You can make any particular tag's text selection make disable. we will show it in the example. and you can do it simple CSS property user-select and also as well help of some jQuery coding. this is a very small functionality but very helpful. Disable text selection using CSS We can be done it also help of user-select CSS property. here you show how to use it and make text selection disable in your HTML web pages. <!DOCTYPE html> <html> <head> <title>Disable text selection using CSS - HackTheStuff</title> <style type="text/css"> body { user-select: none; /* supported by Chrome and Opera */ -webkit-user-select: none; /* Safari */ -khtml-user-select: none; /* Konqueror HTML */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ } </style> </head> <body> <h3>Disable text selection using CSS</h3> <p>The text of the element and its sub-elements is not selectable. Note that the Selection object can contain these elements.</p> </body> </html> Disable text selection using jQuery In this example, we will share with you how to make text selection disable using jQuery. in this example, we will create our own disableSelection() function for disabling text selection in our HTML web pages. <!DOCTYPE html> <html> <head> <title>Disable text selection using jQuery - HackTheStuff</title> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> </head> <body> <h3>Disable text selection using jQuery</h3> <p class="disabletest">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <script type="text/javascript"> (function($){ $.fn.disableTextSelection = function() { return this .attr('unselectable', 'on') .css('user-select', 'none') .on('selectstart', false); }; })(jQuery); $('.disabletest').disableTextSelection(); </script> </body> </html> Look above example. I am here do make disable text selection on CSS class help of jQuery. here only the first p tag's text was not selected by on web page. but you can be done is on your own requirement. Disable text selection using a jQuery UI library You can also be done with the jQuery UI library. it provides much helpful functionality By default and HTML web page's test selection make disable is also provides it. you should import the jQuery UI library in your HTML code. <!DOCTYPE html> <html> <head> <title>Disable text selection using jQuery UI library - HackTheStuff</title> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> </head> <body> <h3>Disable text selection using jQuery UI library</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <script type="text/javascript"> $('body').disableSelection(); </script> </body> </html> Conclusion As you can see, text selection makes disable in HTML web pages using CSS and jQuery is very easy to use in any web application. We hope that small tutorials help everyone.
jQuery Get Selected Option From Dropdown
In this article, we will share with you how to get selected option value from a select box using jQuery with example. this is very common functionality and many times use in any web application. you can be done it using jQuery help in many ways. we will here share with you some helpful examples of how to get selected option value from the select box. Example - 1 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery Get Selected Option Value</title> <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> </head> <body> <form> <label>Select Language:</label> <select class="language"> <option value="php">PHP</option> <option value="python">Python</option> <option value="java">Java</option> </select> </form> <script> $(document).ready(function(){ $("select.language").change(function(){ var selectedLanguage = $(this).children("option:selected").val(); alert("You have selected the language - " + selectedLanguage); }); }); </script> </body> </html> Example - 2 If you have no value for a option tag then how to get the selected option text from the select box. looks at the following example. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery Get Selected Option Text</title> <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> </head> <body> <form> <label>Select Language:</label> <select class="language"> <option>PHP</option> <option>Python</option> <option>Java</option> </select> </form> <script> $(document).ready(function(){ $("select.language").change(function(){ var selectedLanguage = $(this).children("option:selected").val(); alert("You have selected the language - " + selectedLanguage); }); }); </script> </body> </html> Example - 3 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery Get Selected Option Value</title> <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> </head> <body> <form> <label>Select Language:</label> <select class="language"> <option value="php">PHP</option> <option value="python">Python</option> <option value="java">Java</option> </select> </form> <script> $(document).ready(function(){ $('.language').on('change', function() { selectedLanguage = $('.language').find(":selected").val(); alert("You have selected the language - " + selectedLanguage); }); }); </script> </body> </html> Example - 4 In this example, we can get selected value by this keyword <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery Get Selected Option Value</title> <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> </head> <body> <form> <label>Select Language:</label> <select class="language"> <option value="php">PHP</option> <option value="python">Python</option> <option value="java">Java</option> </select> </form> <script> $(document).ready(function(){ $('.language').on('change', function() { selectedLanguage = this.value; alert("You have selected the language - " + selectedLanguage); }); }); </script> </body> </html> We hope you like this small article and it is helpful to you. if you have any question then comment below.
Simple Parallax Scrolling Effect with Parallax.js
There are lots of Javascript and jQuery plugins that makes our small task easy by providing simple and required functionality in our web application. parallax.js plugin is one of them which makes images scrolling effect beautiful in your website. parallax.js is simple and easy to use jQuery plugin makes parallax scrolling effect in <div>, images. The plugin is inspired by Spotify. Installation To use parallax.js in your website, first download the package from GitHub. Then include parallax.min.js file in the html file after jQuery. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="/path/to/parallax.min.js"></script> You can also use CDN instead of download file and use it. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/parallax.js/1.4.2/parallax.min.js"></script> Note: You must include <!DOCTYPE html> on top of document file. Usage To simply create parallax effect, just create <div> tag as bellow: <div class="parallax-window" data-parallax="scroll" data-image-src="/path/to/image.jpg"></div> Or initialise with jQuery code: <script type="text/javascript">     $(document).ready(function() {         $('.parallax-window').parallax({             imageSrc: '/path/to/image.jpg'         });     }); </script> And then include bellow Javascript to start creating parallax effect. You will also need to set height of the element and make transparent, otherwise you can not see the element. .parallax-window {     min-height: 400px;     background: transparent; } Note: The parallax plugin presumes a fixed page layout unless it encounters a scroll or resize event. If you have a dynamic page in which another javascript method may alter the DOM, you must manually refresh the parallax effect with the following commands: jQuery(window).trigger('resize').trigger('scroll'); If your <div> tag is more complex, then use bellow HTML code <div class="parallax-window">     <div class="parallax-slider">         <span style="position:absolute; top: 400px; left: 400px;">Some Text</span>         <p>Some other Content</p>       </div> </div> Then you will need to add bellow jQuery with the naturalWidth and naturalHeight options in order to be rendered correctly. <script type="text/javascript">     $(document).ready(function() {         $('.parallax-window').parallax({             naturalWidth: 600,             naturalHeight: 400         });     }); </script> You can also set responsive image. <div class="parallax-window">     <div class="parallax-slider">         <img src="/path/to/image.jpg" srcset="/path/to/image-400px.jpg 400w, /path/to/image-800px.jpg 800w, /path/to/image-1200px.jpg 1200w" sizes="100vw">     </div> </div> Options You can pass bellow options to change behaviour of the plugin. You can pass option with data-attribute in the <div> tag like data-image-src="" or pass the option in jQuery code like $('.parallax-window').parallax({imageSrc: '/path/to/image.jpg'}); Name Type Default Description imageSrc path null Path of the image you wish to apply to the parallax effect naturalWidth number auto Natural width and natural height of an image to speed up loading and reduce error when determining the correct aspect ratio of the image. naturalHeight number auto position xPos yPos center center Background-position css property that specify coordinates as top, bottom, right, left, center, or pixel values positionX xPos center positionY yPos center speed float 0.2 The speed at which the parallax effect runs. 0.0 means the image will appear fixed in place, and 1.0 the image will flow at the same speed as the page content zIndex number -100 The z-index value of the fixed-position elements. By default these will be behind everything else on the page bleed number 0 You can optionally set the parallax mirror element to extend a few pixels above and below the mirrored element. This can hide slow or stuttering scroll events in certain browsers iosFix boolean true iOS devices are incompatable with this plugin. If true, this option will set the parallax image as a static, centered background image whenever it detects an iOS user agent. Disable this if you wish to implement your own graceful degradation. androidFix boolean true If true, this option will set the parallax image as a static, centered background image whenever it detects an Android user agent. Disable this if you wish to enable the parallax scrolling effect on Android devices. overScrollFix boolean false If true, will freeze the parallax effect when "over scrolling" in browsers like Safari to prevent unexpected gaps caused by negative scroll positions. mirrorContainer jQuery Selector body The parallax mirror will be prepended into this container. This way, you can easily create parallax scrolling effect. I hope you liked the article and will help to add in your website.
Image Crop and Upload using Croppie jQuery plugin
In every social networking website, there is crop and upload functionality available in profile picture. There are many ways you can do it for your web application. One easy and quick way is to use Javascript or jQuery plugin. Croppie is simple and easy to use jQuery plugin which provides crop the image functionality in easy way before you save images for user. In this article, we will create Image crop example and also will upload cropped image in PHP with AJAX. So Follow this steps to create image crop example. First create index.html file with file upload input. In this file we have included croppie.min.css and croppie.min.js CDN files. Also we have included bootstrap for view. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <link href="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.4/croppie.min.css" rel="stylesheet"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.4/croppie.min.js"></script> Then create <div> tag where you want to generate croppie view. <div id="croppie-demo"></div> We have also created image upload for adding image in croppie. And we have added some javascript code to upload image in server and return back cropped images. Here is the full code for index.php file. <!DOCTYPE html> <html> <head>     <meta charset="utf-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <title>Croppie</title>     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">     <link href="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.4/croppie.min.css" rel="stylesheet">     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>     <script src="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.4/croppie.min.js"></script>     <style type="text/css">         #croppie-demo {             width: 350px;         }         #croppie-container {             padding-top: 30px;         }         #croppie-view {             background: #e1e1e1;             width: 300px;             padding: 30px;             height: 300px;             margin-top: 30px         }     </style> </head> <body>     <div class="container">         <h2>Croppie</h2>         <div class="row">             <div class="col-md-4 text-center">                 <div id="croppie-demo"></div>               </div>               <div class="col-md-4" id="croppie-container">                 <strong>Select Image:</strong>                 <br/>                 <input type="file" id="croppie-input">                 <br/>                 <button class="btn btn-success croppie-upload">Upload Image</button>               </div>               <div class="col-md-4" style="">                 <div id="croppie-view"></div>               </div>         </div>     </div>     <script type="text/javascript">         var croppieDemo = $('#croppie-demo').croppie({             enableOrientation: true,             viewport: {                 width: 250,                 height: 250,                 type: 'circle' // or 'square'             },             boundary: {                 width: 300,                 height: 300             }         });         $('#croppie-input').on('change', function () {              var reader = new FileReader();             reader.onload = function (e) {                 croppieDemo.croppie('bind', {                     url: e.target.result                 });             }             reader.readAsDataURL(this.files[0]);         });         $('.croppie-upload').on('click', function (ev) {             croppieDemo.croppie('result', {                 type: 'canvas',                 size: 'viewport'             }).then(function (image) {                 $.ajax({                     url: "/upload.php",                     type: "POST",                     data: {                         "image" : image                     },                     success: function (data) {                         html = '<img src="' + image + '" />';                         $("#croppie-view").html(html);                     }                 });             });         });     </script> </body> </html> The other file is upload.php which is for AJAX upload and return image file html. <?php $data = $_POST['image']; list($type, $data) = explode(';', $data); list(, $data) = explode(',', $data); $data = base64_decode($data); $imageName = time().'.png'; file_put_contents('upload/'.$imageName, $data); You can also pass bellow options.                      Name Type Default Description boundary object Size of the container The outer container of the cropper enableExif boolean false                 Enable exif orientation reading. Tells Croppie to read exif orientation from the image data and orient the image correctly before rendering to the page.                 Requires exif.js              enableOrientation boolean false Enable or disable support for specifying a custom orientation when binding images enableResize boolean false Enable or disable support for resizing the viewport area. enableZoom boolean true Enable zooming functionality enableOrientation boolean user user enforceBoundary boolean true Restricts zoom so image cannot be smaller than viewport mouseWheelZoom boolean true Enable or disable the ability to use the mouse wheel to zoom in and out on a croppie instance. showZoomer boolean true Hide or Show the zoom slider viewport object { width: 100, height: 100, type: 'square' }                 The inner container of the coppie. The visible part of the image                 Valid type values: 'square' 'circle'              You can also use bellow methods to get some useful details: Name Type Description Parameter get() object Get the crop points, and the zoom of the image.   bind({ url, points, orientation, zoom }) Promise Bind an image to the croppie. Returns a promise to be resolved when the image has been loaded and the croppie has been initialized.                 url - URL to image                 points - Array of points that translate into [topLeftX, topLeftY, bottomRightX, bottomRightY]                 zoom - Apply zoom after image has been bound                 orientation - Custom orientation, applied after exif orientation (if enabled). Only works with enableOrientation option enabled (see 'Options').                 Valid options are:                 1 unchanged                 2 flipped horizontally                 3 rotated 180 degrees                 4 flipped vertically                 5 flipped horizontally, then rotated left by 90 degrees                 6 rotated clockwise by 90 degrees                 7 flipped horizontally, then rotated right by 90 degrees                 8 rotated counter-clockwise by 90 degrees              destroy()   Destroy a croppie instance and remove it from the DOM   result({ type, size, format, quality, circle }) Promise Get the resulting crop of the image                 type - The type of result to return defaults to 'canvas'                 'base64': returns a the cropped image encoded in base64                 'html': returns html of the image positioned within an div of hidden overflow                 'blob': returns a blob of the cropped image                 'rawcanvas': returns the canvas element allowing you to manipulate prior to getting the resulted image                 size - The size of the cropped image defaults to 'viewport'                 'viewport': the size of the resulting image will be the same width and height as the viewport                 'original': the size of the resulting image will be at the original scale of the image                 {width, height} an object defining the width and height. If only one dimension is specified, the other will be calculated using the viewport aspect ratio.                 format - Indicating the image format.                 Default: 'png'                 Valid values: 'jpeg' | 'png' | 'webp'                 quality - Number between 0 and 1 indicating image quality.                 Default: 1                 circle - force the result to be cropped into a circle                 Valid Values: true | false              rotate(degrees)   Rotate the image by a specified degree amount. Only works with enableOrientation option enabled (see 'Options'). degrees - Valid Values:90, 180, 270, -90, -180, -270 setZoom(value)   Set the zoom of a Croppie instance. The value passed in is still restricted to the min/max set by Croppie. value a floating point to scale the image within the croppie. Must be between a min and max value set by croppie. Croppie also triggers bellow method. update(croppie)Croppie Triggered when a drag or zoom occurs $('.croppie').on('update.croppie', function(ev, cropData) {     // your code... }); For more example, see official site demo. I hope you liked this article.
addMore.js jQuery Plugin To Duplicate Form Group
jQuery has many important and magical plugins that make web development lot easy. There is one plugin addmore.js that allows to dynamically add and remove a repeatable group of form elements. This is useful when you want to receive multiple inputs of the same fields. In this article, I will show you how to add or remove input fields dynamically using jQuery. To create dynamic form-field, first download the plugin from the Github. Then include admore.js and jquery.js file path from the package you have downloaded. I have also included bootstrap.css CDN for simple styling. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/admore.js"></script> Now add the .mulit-field-demo class to the form element that you want to dynamically duplicate or remove. Here I have added two input fields. You can add as more as you need. <div class="mulit-field-demo">     <div class="form-group">         <label for="email">Email address:</label>         <input type="email" class="form-control" id="email">     </div>     <div class="form-group">         <label for="pwd">Password:</label>         <input type="password" class="form-control" id="pwd">     </div> </div> In the last, add the following script at the end of the document.  <script type="text/javascript">    $(document).ready(function () {         $(".mulit-field-demo").EnableAddMore({linkText: 'add more'});     }); </script> That's it. Now you can duplicate all of that class html dynamically. You can also add more parameters to .EnableAddMore function. For more customization, see addmore.js file. Here is my full html file. You can also modify according to your requirement. I have also uploaded code to our Github repository. <!DOCTYPE HTML> <html>     <head>         <title>Addmore.JS</title>         <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">         <script type="text/javascript" src="js/jquery.js"></script>         <script type="text/javascript" src="js/admore.js"></script>     </head>     <body>         <div class="container">             <div class="row">                 <div class="col-md-12">                     <form class="form-inline" action="#">                         <div class="mulit-field-demo">                             <div class="form-group">                                 <label for="email">Email address:</label>                                 <input type="email" class="form-control" id="email">                             </div>                             <div class="form-group">                                 <label for="pwd">Password:</label>                                 <input type="password" class="form-control" id="pwd">                             </div>                         </div>                         <button type="submit" class="btn btn-primary">Submit</button>                     </form>                 </div>             </div>         </div>             <script type="text/javascript">            $(document).ready(function () {                 $(".mulit-field-demo").EnableAddMore({linkText: 'add more'});             });         </script>     </body> </html> I hope you had liked this article.
jQuery Test if checkbox is NOT checked
JQuery is simple but very helpful and useful framework in web develoing. Every web developer should have known jQuery after learning Javascript. It saves lot a time to write lengthy code than Javascript. In this article, we will learn on how to find if the clicked checkbox is checked or unchecked using JQuery. jQuery has prop() method that sets or returns properties or property value. To return the property value in jQuery, use the bellow code: $(selector).prop(property); This way we can check if checkboc has checked property or not using bellow code. $('input[type="checkbox"]').click(function() {     if($(this).prop("checked") == true) {         alert("you just checked checkbox.");     } else if($(this).prop("checked") == false) {         alert("you just unchecked checkbox.");     } }); Here is the full HTML code by which you can also test it. Just copy and paste bellow code in HTML file and run in the browser. <!DOCTYPE html> <html lang="en-US">     <head>         <title>Get Checkbox checked property value</title>         <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">         <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>     </head>     <body>         <div class="container">             <div class="row">                 <div class="col-md-8 offset-md-2">                     <h1>Get Checkbox checked property value</h1>                     <div class="form-check">                         <label class="form-check-label">                             <input type="checkbox" class="form-check-input" value="checkbox-value">Check me!                         </label>                     </div>                 </div>             </div>         </div>         <script type="text/javascript">             $(document).ready(function() {                 $('input[type="checkbox"]').click(function() {                     if($(this).prop("checked") == true) {                         alert("you just checked checkbox.");                     } else if($(this).prop("checked") == false) {                         alert("you just unchecked checkbox.");                     }                 });             });         </script>     </body> </html> On check event, you can find checkbox value and set new event as you required. For example, I have set alert() event on checkbox. I hope this article will help you.
JQuery click event not Working Issue Solved
JQuery is simple Javascript which makes Javascript event and animation easy and fast. But sometimes it makes harder when attaching event with element, mostly click events. Sometimes when everything is right, your code is correct, you have also loaded JQuery libraby before. stil click event not work. No errors shows in console. It happens with almost every new developer when initially working with JQuery. For example, if you dynamically create elements with the class name class-name you need to bind the event to a parent which already exists. This is called event delegation and works as followed. The event should be attached to a static parent element that should be already exist when page loaded, for example document, body or your wrapper. This is how to handle event in that cases. $(document).on(eventName, selector, function() {     // script to be run on event... }); For example, if you want to add click event on btn class which was added after page loaded. $(document).on('click', '.btn', function() {     // do something here }); or  $('body').on('click', '.btn', function() {     // do something here }); I hope it will help you.
Remove Duplicate Value from an Array in JQuery
In this article, I will share with you how to remove duplicate values from an array in jQuery using filter() with a simple example. as you know many times we will needed this type of functionality in our web application. when you got the unique values from the given array. here I will provide a simple example of how to remove duplicate values from an array and get the unique values from an array in jQuery. <html lang="en"> <head> <title>Remove Duplicate Values from an Array in jQuery</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> </head> <body> <script> var my_Array = ["PHP","JavaScript","Java","PHP","Python","Java"]; var NewArray = my_Array.filter(function(element,index,self){ return index === self.indexOf(element); }); console.log(NewArray); </script> </body> </html> i hope thi will be help to you.