Friday, July 10FreeJQuery

Tag: plugins

10 Random Free jQuery Plugins
2019, jQuery, jQuery Plugins, Plugins

10 Random Free jQuery Plugins

10 Random jQuery Plugins In This Article You Fine 10 Random Jquery Plugins There many other JavaScript frameworks available, but jQuery is clearly the most popular (according to BuiltWith, it’s currently used by over 78% of top million sites). The purpose of jQuery is to make many of those JavaScript functions that typically need many lines of code easier to manage and write by bundling them into methods that can be called upon with just a single line of code. It’s lightweight, and because it is extendable, there are jQuery plugins freely available for almost every functionality you can think of. 1. pixelate.js jQuery plugins to pixelate images and, optionally, reveal on hover.SourceDemo 2. Seriously.js A real-time, node-based video effects compositor for the web built with HTML...
How To Use Head.js to Load All Your JavaScript
JavaScript, jQuery

How To Use Head.js to Load All Your JavaScript

Head.js to Load All Your JavaScript This is really great for developers, but it has also made life difficult when it comes to managing multiple resources. One disadvantage is that loading multiple JavaScript file makes the site slower to load. This is because scripts block the rendering of the page until they are downloaded, parsed and executed. This can be fixed by using a Script loader library, and of these Head.js is the most popular. This post shows how to use Head.js to load all your JavaScript, including third party libraries like jQuery.First of all, let’s take a look at what Script loader is and how it works… What is Script Loader? There is no concrete definition for Script loader, but one can think of Script loader as a library that helps in loading multiple JavaScript file...
Fade HTML Table Row on Hover Using jQuery
jQuery, TUTORIALS

Fade HTML Table Row on Hover Using jQuery

Fade HTML Table Row Fade HTML table Row are the ideal choice for displaying data in tabular form.  You can do different style experiments with tables for a better user experience. In this short post, we’ll also experiment with fading all rows except the selected row on hover to get user attention using jQuery and CSS. Fade HTML MARKUP To get started, create a standard HTML table on the page. For this demo, our table has 3 columns: Name, Age, Country and some random data. <table id="tblData"> <tr> <th>Name</th> <th>Age</th> <th>Country</th> </tr> <tr> <td>Maria Anders</td> <td>30</td> <td>Germany</td> </tr> <tr> <td>Francisco Chang</td> <td>24</t...
How to use Redux with jQuery
jQuery, jQuery Plugins

How to use Redux with jQuery

How to use Redux with jQuery Redux is generally used in combination with React, but it’s not tied to React. It is written in vanilla JavaScript which makes it compatible with other libraries such as jQuery, Angular, Backbone, or Cycle.js. This post reviews Redux and its core concepts and then demonstrates how to use it with jQuery. We’ll be creating 2 applications to demonstrate the use of Redux with jQuery. The first application deals with simple string values, the second with an application using an object. What is Redux? From the official documentation. Redux is a predictable state container for JavaScript apps. It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test. On top of that, it provides a grea...
7 Responsive jQuery Dropdown Menu Plugins
Plugins

7 Responsive jQuery Dropdown Menu Plugins

Dropdown Menu Plugins In this article you guys can read about 7 Responsive jQuery Dropdown Menu Plugins. JQuery Dropdown Menu Plugins are mostly used for website navigation. They are essentially lists of horizontal options that each contain a vertical menu that will “drop down” when the user hovers the mouse on the primary option. jQuery Dropdown menu plugins are the preferred and ideal choice for accommodating a large set of options for display in a menu.7 Responsive jQuery Dropdown Menu Plugins StellarnavOther features:3 different inbuilt theme options: Light, Dark and Plain Option to make menu sticky on the scroll Auto fix of horizontal scrollbar issue on very long navs Pixel value configuration to create mobile friendly menu PrMenuIt ...
Countit : Text Analyzer With Angular Material
2019, AngularJS, Forms

Countit : Text Analyzer With Angular Material

Countit Text Analyzer This is a fast Countit Text Analyzer app built using Angular Material.Text analyzer will examine your wall of text and display the occurrence of each unique word in click-able bars.Fork and Run Install Angular-CLI npm install -g @angular/clicd into project, npm installRun ng serve , navigate to localhost:4200 Build Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the -prod flag for a production build. Text Analyzer Text analyzer will examine your wall of text and display the occurrence of each unique word in click-able bars. Clicking on a word will display more details. To see an example, click "Try Me!".For More Amazing Content Click Read More | Demo | Download
Fileuploader
2019, Ajax, Drag & Drop, File Uploader, HTML5, Images, PHP, Plugins

Fileuploader

Fileuploader:Fileuploader is a beautiful and powerful HTML5 file uploading tool. A jQuery and PHP plugin that transforms the standard file input into a revolutionary and fancy field on your page.File preview with image thumbnail or icon File image thumbnail can be generated in canvas to resize it perfectly for given with and height Render synchron the file preview File icon background is generated from file extension Customize your own input and thumbnail elements Responsive and fancy animations Choose multiple files from different folders Drag&Drop feature Upload each file with Ajax Synchron the files Upload Upload progressbar with many data available Start, retry and cancel upload actions Paste images from clipboard (only in Chrome) ...
Two Fields Autocomplete Using jQuery & PHP Latest
jQuery UI, PHP

Two Fields Autocomplete Using jQuery & PHP Latest

  Autocomplete Using jQuery & PHPAutocomplete Using jQuery & PHP we are going to watch how to highlight state name & country name in the same text field.When user types the city or state name in the text box, It will make ajax request to apache server, where PHP will make connection to MySQL database and get the city and state names based on user entered data in the textbox. Then Apache server return those response, finally jQuery UI autocomplete will show the city and state name as suggestions to select. Two Fields jQuery UI Autocomplete Working Description: When user types the city or state name in the textbox, It will make ajax request to apache server, where PHP will make connection to MySQL database and get the city and state names based on user entered data ...
How to Plugin Angular 2/4 Image Gallery
Gallery, Plugins

How to Plugin Angular 2/4 Image Gallery

Angular 2/4 Image Gallery Plugin A simple yet full-featured image gallery for Angular 2/4 applications. Features:Custom layout Navigation arrows Autoplay Multi-row thumbnail navigation Fullscreen mode Touch-enabled Custom animationsAngular Material Angular 2/4 Image Gallery If you are not using Angular Material you can skip this section.Angular Material is using transform: translate3d(0,0,0); in components styles. Unfortunately transform changes positioning context and preview won't work properly. To avoid this situation you have to override material styles, for example: @import "~@angular/material/prebuilt-themes/indigo-pink.css"; // your theme.mat-sidenav-container, .mat-sidenav-content, .mat-tab-body-content { transform: none !important; }...
Angular directive for Slick Carousel
AngularJS, Carousel, Plugins

Angular directive for Slick Carousel

Directive for Slick CarouselAn Angular directive for slick carousel, which is a responsive carousel jQuery plugin that supports multiple breakpoints, CSS3 transitions, touch events/swiping & much more! Usage for Slick CarouselUsing bower to install it. bower install angular-slick-carousel Add jquery, angular, slick-carousel and angular-slick-carousel to your code.<link rel="stylesheet" href="../bower_components/slick-carousel/slick/slick.css"> <link rel="stylesheet" href="../bower_components/slick-carousel/slick/slick-theme.css"><script src="../bower_components/jquery/jquery.js"></script> <script src="../bower_components/angular/angular.js"></script> <script src="../bower_components/slick-caro...
Angular Autosize TextArea Height Directive
Forms, Plugins

Angular Autosize TextArea Height Directive

Angular Autosize TextAreaAngular Autosize TextArea angular2-autosize is an Angular2 directive that automatically adjusts textarea height to fit content.It adjusts the textarea height automatically to any text input, or changes to the model bound to the textarea. Installation:npm install angular2-autosizeUse Example: Add the declaration to your @NgModule:import {Autosize} from 'angular2-autosize';...@NgModule({ declarations: [ Autosize ] })Use directly inside your HTML templates <textarea autosize class="my-textarea">Hello, this is an example of Autosize in Angular2.</textarea>SettingsName Default Type DescriptionminRowsinteger Sets minimal amount of rows of the textareamaxRowsinteger Set...
AngularJS Arshaw FullCalendar
calendar, Plugins

AngularJS Arshaw FullCalendar

angular-fullcalendar directive A complete AngularJS directive for the Arshaw FullCalendar.A simple and lite directive for quickly include Fullcalendar (v.3) in your AngularJS projects. Perfomed for AngularJS 1.6.xYou can view DEMO. How to use Installing package with bower: bower install angular-fullcalendar --saveInstalling pacakge with npm: npm i angular-fullcalendar --saveUse directive as an attribute and you can pass the fullcalendar options and the list of events in ngModel.  <div fc fc-options="optionsObj" ng-model="eventsObj" ></div>You can use the Arshaw Fullcalendar options in official docs.    //  <div fc fc-options="calendarOptions" ng-model="events" ></div>     var app = angular.module('demo', ['angular-ful...
Angular Hamburger Menu Toggle
AngularJS, Animation, Menu & Navigation, Plugins

Angular Hamburger Menu Toggle

Angular Hamburger Toggle Angular hamburger Toggle menu is component which allow you to active a part of information or navigation that is hidden by default for UX purpose.This usually means activating a SideNav, but might also roll down a Navbar menu.Examples of Bootstrap hamburger menu use:SideNav activation Navbar menuFeatures:Two way bound state model. Tuned for Bootstrap. Super easy.Angular directive of Material Design morphing hamburger menu. It's based off of Material Design Hamburger.###FeaturesTwo way bound state model. Tuned for Bootstrap. Super easy.How to style hamburger icon? In my code example, I’m using class= “navbar-inverse” in line 1 of nav.component.html. And this means the hamburger icon is designed to be use...
Angular Telephone Filter
Forms, Plugins

Angular Telephone Filter

Angular Telephone Filter A simple Angular filter to clean or format a US telephone number. While working on a project, I came across the need for an Angular component that would format a tel input for phone numbers based on the North American Numbering Plan, a standard followed by 24 countries. This standard allows for a 10-digit number, and it generally starts with what we know as the area code. The component had to support Angular forms for validations, as well as the ability to trigger some events on blur, change, and focus. After creating the component, I thought it might be useful for others who just need a simple component that will format phone numbers appropriately for North America. There are some Angular directives available for formatting telephone inputs, but they are all f...
Ngx-uploader : Angular2 File Uploader
AngularJS, Forms, Plugins

Ngx-uploader : Angular2 File Uploader

Ngx-uploader The ngx-uploader component provides a handy client-side drag’n’drop file upload experience for Angular 2 applications. Got a Question or Problem? Do not open issues for general support questions as we want to keep GitHub issues for bug reports and feature requests. You've got much better chances of getting your question answered on Stack Overflow where the questions should be tagged with tag ngx-uploader.To save your and our time, we will systematically close all issues that are requests for general support and redirect people to Stack Overflow. Installation of Ngx-uploaderAdd ngx-uploader module as dependency to your project.npm install ngx-uploader --saveInclude NgxUploaderModule into your main AppModule or in module where you will use it.//...
Custom Checkboxes with Angular 2+
Forms, Plugins

Custom Checkboxes with Angular 2+

Checkboxes with Angular 2+This is a very simple library to create custom checkboxes with Angular 2+ projects.This library use pretty-checkbox to create the customs checkboxes.Checkbox label The checkbox label is provided as the content to the <mat-checkbox> element. The label can be positioned before or after the checkbox by setting the labelPosition property to 'before' or 'after'.If you don't want the label to appear next to the checkbox, you can use aria-label or aria-labelledby to specify an appropriate label.  Use with @angular/forms <mat-checkbox> is compatible with @angular/forms and supports both FormsModule and ReactiveFormsModule.  Indeterminate state <mat-checkbox> supports an indeterminate state, similar to the native <input type="checkbo...
Angular Bootstrap Nav Tree
Bootstrap, Plugins

Angular Bootstrap Nav Tree

Angular Bootstrap Nav TreeAn AngularJS directive that creates a Tree based on a Bootstrap “nav” list. The style is completely Bootstrap because the tree is actually just a Bootstrap “nav” list, with a few changes: Indentation is added, expand/collapse icons are added, and Angular CSS animations are used during expand/collapse.The abn-tree now works Bootsrap 2, or Bootstrap 3, and with Angular 1.1.5 or 1.2.0The normal Glyphicons work well, but they appear black instead of blue. Alternatively, you can use the Font Awesome icons, which look even better, and match the blue color of the text.You can change the icons used by specifying them in html attributes.This tree is developed using CoffeeScript and Jade, but you don't need to be using either of those to use this tree ...
Jstree: Plugins
2019, JavaScript, Plugins

Jstree: Plugins

jstree jsTree is jquery plugin, that provides interactive trees. It is absolutely free, open source and distributed under the MIT license.jsTree is easily extendable, themable and configurable, it supports HTML & JSON data sources, AJAX & async callback loading.functions properly in either box-model (content-box or border-box), can be loaded as an AMD module, and has a built in mobile theme for responsive design, that can easily be customized. It uses jQuery's event system, so binding callbacks on various events in the tree is familiar and easy.You also get:drag & drop support keyboard navigation inline edit, create and delete tree-state checkboxes fuzzy searching customizable node typesInclude all necessary files To get started you need...
Framer Motion : Animation & Gesture Library for React
Animation, Core Java Script

Framer Motion : Animation & Gesture Library for React

Framer Motion Framer Motion is a new open source, production-ready motion library for React on the web.Design fluid animations for the web, across desktop and mobile.Motion is an open source, production-ready library that's designed for all creative developers.It looks like this:<motion.div animate={{ x: 0 }} />And does this:Spring physics Keyframes Drag SVG paths Server-side rendering Pose-inspired tree animations CSS variables Position transitions Unmount transitionsFeaturesAnimations When any value in animate changes, the component will automatically animate to the updated target. The default snappy animation is fully configurable via the transition prop.Variants Variants are a declarative way to orchestrate co...
jQuery Bootstrap Dropdown Plugin
2019, Bootstrap, Plugins

jQuery Bootstrap Dropdown Plugin

jQuery plugin “bootstrapSelect” which transform a select in a bootstrap dropdown. Select multiple are shown with checkboxesjQuery plugin "bootstrapSelect" which transform a select in a bootstrap dropdown with colorsTransform an HTML select into a bootstrap dropdown the select is hidden and the chosen value is also available in it as they are bindedv0.83 : in case of multiple choice, the menu stays open until outside clickv0.82 : Translations : the word "items" can be replace and the world "all" in options (2nd param) $("#multChoice").bootstrapSelect("init", { "translations" :{ "all": "All checked", "items": "Values" }});When all the items have been checked, the word "all" or its translation appears instead of "n items"v0.81 : with multiple choice, now uses th...
ProgressBar : jQuery Image Progress Bar Plugin
jQuery

ProgressBar : jQuery Image Progress Bar Plugin

jQuery Image Progress Bar JQuery Image Progress Bar this is provides a jquery plugin for making vertical progress bars out of images. Once the progress bar has been created you can interact with it to set the current percentage as required.ProgressBar This provides a jquery plugin for making vertical progress bars out of images. Once the progress bar has been created you can interact with it to set the current percentage as required.Getting startedAdd the js and css files from the src folder to your html (and you'll need jquery).<script type="text/javascript" src="../src/jquery.progressbar.js"></script> <link rel="stylesheet" type="text/css" href="../src/progressbar.css">Create the progress barvar duckbar1 = $("#divDuck1").progressBa...