Monday, July 13FreeJQuery

Tag: free jquery plugins

Best jQuery Audio Player Plugins
2019, jQuery, jQuery Plugins

Best jQuery Audio Player Plugins

jQuery Audio Player Plugins In This Article We discuss about Best jQuery Audio Player Plugins Music and human voice have a remarkable effect on people, especially when they do not expect it, jQuery Audio Players plugins turn out to be handy while developing music-related websites or if you want to upload some mp3, audio, or some other type of media file on your websites. 1. Toneden SDK Of jQuery Audio Player PluginsToneden.js is a pure JS customizable audio player for your SoundCloud. Fully customizable, responsive, and extensible. 2. Uba PlayerUbaPlayer is a simple jQuery plugin that plays audio natively in modern browsers and uses Flash where native playback is impossible. The jQuery HTML5 Audio Player with Flash Fallback. 3. Acron Media PlayerAcorn Media Player is an HTM...
How to Load jQuery Conditionally
2019, jQuery

How to Load jQuery Conditionally

In This Article We read about Load jQuery Conditionally Many developers like to link to an externally hosted jQuery library, like for example Google’s jQueryCheck it out: CODE: <!-- Grab Google CDN jQuery. fall back to local if necessary --><script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><script>window.jQuery && document.write('<script src="js/jquery-1.4.2.min.js"><\/script>')</script>Of course, you’ll need to insert your own path to wherever your local jQuery files are located (instead of ‘<script src=”js/jquery-1.4.2.min.js”></script>’), but this is a very simple way to make sure that your jQuery library always loads. Read More |  
How To Add jQuery’s Selectors
2019, jQuery

How To Add jQuery’s Selectors

jQuery’s Selectors In This Article We Are Going To Talk About jQuery’s Selectors in jQuery are actually similar in a lot of ways to selectors in CSS. For example, when you want to select an ID, you precede it with the “#” symbol, and when you want to select a class, you precede it with the symbol, only the syntax for doing so is quite different.In jQuery, when you want to select an element (for the purposes of this example, let’s say you’re selecting an element with the ID of “main”), your selector will need to look like this:$("#main") Beginner’s Guide to jQuery’s Selectors So like CSS, you use the “#” symbol to indicate that it’s a class you’re selecting, but unlike CSS, the selection text all needs to go in within quotation marks, surrounded by parentheses, and preceded by th...
Top Best JavaScript Template Engines
JavaScript, RESOURCES

Top Best JavaScript Template Engines

Best JavaScript Template Engines In This Article you can read about Best JavaScript Template engines which will help in the decoupling of HTML and JavaScript code to reduce the client-side code complexity and make it manageable. Once you know the advantages of the template engines, you will definitely fall in love with them and start using them right away. There are lots of problems that you come across at the time of client-side development likeThese template engines were chosen based on their popularity, simplicity to learn and code, being actively maintained, and having great community support. Let’s begin.  Handlebars.jshttp://handlebarsjs.com/Handlebars is a logic-less templating engine. Logic-less templates help to build templates with ease and without adding any ...
Newest jQuery plugins for responsive website
2019, Plugins

Newest jQuery plugins for responsive website

jQuery plugins for responsive website In this Article You read About Some Newest jQuery plugins which are suitable for a responsive website. These jQuery plugins allow you to create responsive modal windows, image galleries, grids, tables, responsive image viewing, timelines, time picker, hamburger navigation menus, content sliders and several other functionalities. Enjoy! Smart Photo for responsive website https://github.com/appleple/SmartPhoto     Smart Photo is a responsive jQuery plugin which works as an image viewer, especially on mobile devices. It supports intuitive gestures such as pinch-in, pinch-out, drag and swipe for a better image viewing experience. It uses the accelerator to move the images.https://github.com/dolce/...
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...
10 Stylish and Modern jQuery Tooltip Plugins
2019, Plugins

10 Stylish and Modern jQuery Tooltip Plugins

jQuery Tooltip Plugins Writing your own implementation for creating jQuery Tooltip Plugins may require a lot of effort, testing and fixing platform compatibility issues will definitely consume time. If you don’t want to waste your precious hours, here is a list of 10 stylish and powerful jQuery tooltip plugins for your next project! TooltipsterTooltipster is a tiny, flexible, extensible, simple yet powerful jQuery plugin for creating modern tooltips. This plugin works well with HTML and plain text, and supports a variety of features, including:Support of image maps & SVG Custom themes & animations Multiple tooltips on a single element Smart positioning to reposition based on the viewport dimension Custom callbacks Extensible with plugins Support cust...
SlideMenu.js : Easy Off-Canvas Menu
2019, Core Java Script, Menus

SlideMenu.js : Easy Off-Canvas Menu

Easy Off-Canvas Menu In This Article You can read about easy Off-Canvas Menu is a easy menu with mobile touch support.Off-canvas menus are ones that are located outside of a user’s viewport and only slide in when a user activates them. This technique is awesome from the point of view of mobile usability. Menu fiction Off-Canvas Menu The fly-out menu has been proven to be the most efficient navigation that dramatically can improve your visitors experience on your website.scotchPanels.js scotchPanels.js is a jQuery plugin for easily creating off canvas menus, navigations, and other panel types such as images, videos, and iframes. Slidebars Slidebars is a jQuery framework for quickly and easily implementing app style off-canvas space into your website.Pushy Pus...
Digital Stopwatch App With Angular
Date & Time, Plugins

Digital Stopwatch App With Angular

Digital Stopwatch App Digital Stopwatch App is a simple timer service for Angular, base on RxJS.Name/ID(string) base API. RxJS object not exposed.Install Usage  Module Component API  newTimer  delTimer  getTimer  getSubscription  subscribe unsubscribe Example Repository Contributors Changelog LicenseInstall Digital Stopwatch App ng2-simple-timer is implemented as Angular injectable service name SimpleTimer.Add SimpleTimer into module providers (eg. app.module.ts).import { SimpleTimer } from 'ng2-simple-timer';   @NgModule({   providers: [SimpleTimer] })Componentimport {SimpleTimer} from 'ng2-simple-timer';   export class ChildComponent {     constructor(private st: SimpleTimer) { }   }new Timer newT...
Microsite Concept with Rotating Background
Animation, Core Java Script, Slider

Microsite Concept with Rotating Background

Microsite Rotating BackgroundAn animated microsite concept with rotating background made with CSS3, jQuery and GSAP’s TweenMax. A microsite is an individual web page or small cluster of web pages that act as a separate entity for a brand. A microsite typically lives on its own domain, but some exist as a subdomain. Companies have different reasons for investing in microsites. For example, some companies have used them to highlight a specific campaign or target specific buyer personas. Others have used them to tell a short story or to inspire a specific call-to-action.Interested in mastering CSS3 like a pro? CSS Master, by Tiffany Brown, is available for download to all SitePoint Premium members. Alternatively, you can grab your copy of the book for just $19.Scaling, skewing a...
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) ...
How To Add Material Badge for AngularJS
AngularJS, Plugins

How To Add Material Badge for AngularJS

Material Badge for AngularJS Material Badge for AngularJS design inspired customizable badges for your AngularJS applications.Install Download the package: yarn add angular-material-badgeUsage of Material Badge for AngularJS In your document head, include:<link rel="stylesheet" href="node_modules/angular-material-badge/angular-material-badge.min.css" />Use the md-badge where you wish:<md-badge>12</md-badge><ng-md-icon md-badge="12" icon="notifications"></ng-md-icon>Then, just before close body tag, include:<script src="node_modules/angular-material-badge/angular-material-badge.min.js"></script>Include the module in your application:var application = angular.module('Application', ['ngMdBadge']);B...
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...
Radial Menu with JavaScript
Core Java Script, Menus

Radial Menu with JavaScript

Radial Menu Radial menu is a highly customizable radial menu that’s very easy to setup.It is customizable and beautiful radial menu for your web app that can be used as a standalone menu or override the default context menu. On a desktop or notebook click the second button of the mouse (context menu). On a smartphone or tablet, click the screen and hold for few seconds and the menu will pop.About Radial Menu Create a customized and beautiful radial menu for your web app that can be used as a standalone menu or override the default context menu. On a desktop or notebook click the second button of the mouse (context menu). On a smartphone or tablet, click the screen and hold for few seconds and the menu will pop.Work in progress. Writing the documentation and doing some tests.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 ...