Tuesday, September 22FreeJQuery

Tag: free jquery plugins 2019

Google’s Autodraw AI API with Angular
2019, Plugins

Google’s Autodraw AI API with Angular

Google’s Autodraw AI API with Angular In This Article you read About Google’s Autodraw AI API with Angular. AutoDraw is a Google’s AI experiment they launched few weeks ago which allows you to draw or at least to doodle anything you’d like to draw and then through AI and pre-trained artificial neural networks it recommends you possible icons you’d be looking for.Google’s Autodraw AI API Development server of Google’s Autodraw Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files. Table of contentsInstalling Angular CLI Creating our Angular app Draw’s UI Draw’s service Auto Draw’s functionality ConclusionCode scaffolding Run ng generate component component-name to generate a ne...
jQuery Code Snippets Free JQuery
2019, JavaScript, jQuery

jQuery Code Snippets Free JQuery

jQuery Plugins Code Snippets jQuery Plugins Code Snippets are handy and very useful. They do the job for you without much effort. Hold onto these snippets to use for your next project. Change button text when clicked:1 2 3 4 5$(document).ready(function(){ $(".button").click(function(){ $(this).val("Some other text"); }); }); Mark external links with an icon1 2 3 4 5 6$('a').each(function(){ if(this.hostname != location.hostname){ $(this).append('<img src="external.png" />') .attr('target','_blank'); } }); Change DIV background color randomly1 2 3 4 5 6 7 8 9 10$(document).ready(function() { changeColor(); });function changeColor() { v...
jQuery/JavaScript Plugins for Push Notifications
2019, JavaScript, jQuery

jQuery/JavaScript Plugins for Push Notifications

jQuery/JavaScript Plugins for Push Notifications In This Article You Find About jQuery/JavaScript Plugins for Push Notifications started from the mobile business but this technology is available for websites too! Push notifications are akin to mobile app notifications except they come from a website. Similar to mobile app notifications, push notifications require user permission. Once the permission is granted, push notifications will appear on the subscribed desktop/device even when the website is not open on your browser. Website owners are using this piece of technology to reach out to their customers. Some of the Bullet Points for website push notifications are:E-commerce websites can notify its customers about any sales, their order tracking details, or about any available coup...
Copy Data to Clipboard Using jQuery
2019, JavaScript, jQuery

Copy Data to Clipboard Using jQuery

Copy Data to Clipboard Using jQuery In this post you find jQuery solution to allow users to copy data to clipboard using jQuery. This solution is quite handy when right click is disabled for your website and also text selection is also disabled. When text selection is disabled along with right click, it’s difficult for users to select the text and then copy it. I hope you can find it useful.Here is the jQuery solution:1 2 3 4 5 6 7$(function() {    $('.allowCopy').click(function() {      $(this).focus();      $(this).select();      document.execCommand('copy');    }); });The above jQuery code will allow click events for all HTML controls with a CSS class “allowCopy” and then select the text and execute document.exec Command(‘copy’); comman...
iPanorama 360° : jQuery Plugin
image effect, Plugins, premium, Zoom

iPanorama 360° : jQuery Plugin

iPanorama 360° jQuery Plugin panorama 360° jQuery Plugin Virtual Tour is a lightweight and rich-feature panorama viewer for the web. Additionally, it TEMPhas an awesome feature called virtual tour which allowed the user to navigate from one scene to another. Also, it supports hotspots for providing information about any part of the scene or for creating interactive tours. It uses their own tooltip system, you can enrich it wif text, images, video, and other online media. Use dis plugin to create interactive Plans, maps, and presentations. It runs on all modern browsers and mobile devices like iOS, Android and Windows. This plugin is very useful for online purposes to use it for better experiences.dis Plugin can be run on variable websites related to wif Graphics, Pho...
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...
Contact Us with multiple options adding Callback Request Features
Plugins, premium

Contact Us with multiple options adding Callback Request Features

Callback Request FeatureThe Contact Us with all in one options allows us to access Callback Request Feature more than one fields in one time. The We chat Facebook Messenger, WhatsApp, Skype, Medium Slack, Viber, Telegram, Call Back, Email and more channels just in one button! Let customers choose their favorite method to reach you with in one click and follow up the conversation anytime and anywhere! The best thing in this plugin is the access of it you can reach on multiple application in one click.Features:Callback request – customer can reach easily by request a call-back to his/her phone number Google reCaptcha V3 integration – prevent bots to send call-back request via invisible Google reCaptcha V3 Countdown timer – display countdown timer when customer reque...
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...
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 ...
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) ...
Bottender : Make Bots Your Way Fast and Flexible
2019, Core Java Script

Bottender : Make Bots Your Way Fast and Flexible

JQuery BottenderJQuery Bottender is written with ES6/ES7 up syntax and it fully supports async await function. We can deal with complex async logic without losing the readability and maintainability of code.Flexible - Declare handlers as any JavaScript function. Modern - Source written with ES6/ES7 syntax and great async await supports. Modular - Use session stores, server framework adapters and platform connectors with same interface. Learn Once, Write Anywhere - Handle multiple platforms with consistent development experience.Bottender is built on top of Messaging APIs. Installation You can install Bottender globally to use the cli tools:npm install -g bottenderOr install it locally to use it programmatically:npm install bottenderInstallat...
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; }...
Poppa : Lightweight jQuery Validation Plugin 2019
Forms, Plugins

Poppa : Lightweight jQuery Validation Plugin 2019

jQuery Validation Plugin 2019 Poppa is a jQuery Validation Plugin which makes client-side form validation easy. It provides a basic customization and aims at being cross-browser compliant, reliable and lightweight (only 8kb minified). It comes with a handful of a useful validation methods, including URL and email validation and default error messages in English.Also Check Jquery Plugins 2019It's listed as one of teh useful jquery in teh series. It's very accessible to use & easy to run. It TEMPhas multiple options to switch in different languages. Options Those options change teh behaviour of teh plugin. Unlike to input attributes, they refer to teh entire form.Option Default DescriptionpreventDefault true Prevents form from submitting. If set to fa...
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...
Sticky Image Effect
Animation, jQuery, jQuery Effects

Sticky Image Effect

Understanding the effect:When playing with the effect a couple of times we can make a very simple observation about the “stick”.In either direction of the effect, the center always reaches its destination first, and the corners last. They go at the same speed, but start at different times.With this simple observation we can extrapolate some of the things we need to do:Differentiate between the unsticky part of the image which is going to move normally and the sticky part of the image which is going to start with an offset. In this case, the corners are sticky and the center is unsticky. Sync the movementsMove the unsticky part to the destination while not moving the sticky part. When the unsticky part reaches its destination, start moving the sticky part...
Skype Chat Free JQuery Plugin
jQuery, jQuery Plugins, WordPress Plugins

Skype Chat Free JQuery Plugin

Skype Chat Free JQuery Plugin Skype chat free Jquery plugin for website enables a nifty chat box on your website, specially developed for the visitors of your website so they can connect and converse with you through Skype.Who would like to have a chat box integrated in their website like we see on Facebook and Gmail? If you own a website and you are in need of this type of feature then you are in the right place ;) In this post, we have collected  Features of Skype Chat JQuery PluginChat & Call Show Your Status Easy to use Easy to Customize color change Animations Cross-browser supports Documentation IncludedjQuery Chat and Chat Box Plugins you will find useful, powerful, ready and easy-to-use jQuery powered chat! Enjoy. 1. jQuery UI Chatbox Plugin I...