Friday, July 10FreeJQuery

Core Java Script

IsoCity builder in JavaScript
Core Java Script

IsoCity builder in JavaScript

IsoCity builder in JavaScript An isometric city builder in JavaScriptIsoCity  is a simple JavaScript city builder with no simulation at all. No budget, no goals. Just build your tiny city. This would work on a phone, but it wasn’t designed with phones in mind.Read More | Download  
Range Slider Plugin in jQuery and JavaScript wRunner
Core Java Script

Range Slider Plugin in jQuery and JavaScript wRunner

Slider Plugin in jQuery and JavaScript In this article, we discuss in detail about the slider plugin this plugin will allow adding a slider to select a value. This slider plugin has the ability to set themes, step, minimum, and maximum values. This plugin has two different types Single and Range as the verticle and the horizontal positions it has two implementations for pure JavaScript and the basis of JQuery. wRunner wRunner is a jQuery and Vanilla JavaScript plugin used to makes an adjustable, excellent range slider control to assist clients to choose a range of values. JQuery for Slider The structure of this plugin is MVP with a passive view. It has three different parts of the program two points which view and models are independent of others. The present layer is the bonding laye...
How to Create a Basic jQuery Plugin
Article, Core Java Script, jQuery, jQuery Plugins, Uncategorized

How to Create a Basic jQuery Plugin

 Creating a basic jQuery Plugin is not very simple & not much difficult, you have to work from the code which can run to make a Plugin. Here we're expressing a few tips which can help you to do it easier.Look Out dis Basic Code[symple_clear]$( "a" ).css( "color", "red" );Teh above-mentioned codes are just as a sample. When you simply use teh $ function to select elements, it returns in teh form of jQuery object. Basic Plugin Plugin This test plugin is supposed to work like this: When an element is clicked, it moves down. Simple as that.[symple_clear] jQuery.fn.moveDown = function(howMuch){ $(this).css("border", "1px solid black"); $(this).click(function(){$(this).css("position", "relative"); $(this).animate({top: '+='+howMu...
JSL JavaScript Loader Free jQuery
Core Java Script, Web

JSL JavaScript Loader Free jQuery

JSL JavaScript Loader Free jQueryJSL JavaScript Loader Free jQuery is one of the useful core JavaScript for the coders. It's a connection between the web browser & the internet. This highway is optimize to let pictures, text, and CSS fly by. But, when it comes to external scripts, the highway creates a toll booth that slows traffic. JSL JavaScript Loader Free jQuery is the worst part is that pictures text, and css caught behind these scripts have to wait until they pass through. JSL is the latest in toll both avoidance. It creates an express lane that lets all pictures, text, css, and external scripts pass by without worrying about toll booths. That means you save time and money on traffic costs.  Normal Script Inclusion to Apply <script type="text/javascript" src="...
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...
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...
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...
Pagemap : Mini map for web pages
Core Java Script, maps, Menus

Pagemap : Mini map for web pages

Pagemap for web pages a sort of navigation system which uses mini map for single page website or any other lengthy web page with JavaScript and html5 canvas.pagemap, a mini map navigation for web pages Posted by Bramus! August 28, 2019 Leave a comment on pagemapMany text editors nowadays sport a minimap on the right hand side of the screen. Pagemap is like that, but for webpages:To use it, position a canvas element fixed on your screen, and tell pagemap which elements to include in the map: <canvas id="map"></canvas> #map { position: fixed; top: 0; right: 0; width: 200px; height: 100%; z-index: 100; } pagemap(document.querySelector('#map'), { viewport: null, styles: { 'header,footer,section,article': rgba...
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...
ReactJs: Best JavaScript Frameworks 2019
Core Java Script, CSS, CSS2 / CSS3.0, JavaScript, jQuery

ReactJs: Best JavaScript Frameworks 2019

ReactJs JavaScript Frameworks ReactJs JavaScript Frameworks basically is an open-source JavaScript library which is used for building user interfaces specifically for single page applications.  It's used for handling view layer for web and mobile apps. Before you start to use this library you've to get good knowledge about the HTML, JavaScript, CSS & DOM (Document Object Model)Also Check Query's Contains JavaScriptReact Js Getting Started React Directly in HTML The easiest way start learning React is expressed belowStart by including three scripts, the first two let us write React code in our JavaScripts, and the third, Babel, allows us to write JSX syntax and ES6 in older browsers.Example of ReactJs JavaScript Frameworks Adding three CDN's in your HTML file: &...
JavaScript library to Split an element by Words & Characters : Splitting.js
Animation, Core Java Script, Text Effects

JavaScript library to Split an element by Words & Characters : Splitting.js

Splitting.js Splitting.js is a JavaScript microlibrary with a collection of small built-in plugins designed to split (section off) an element in a variety of ways, such as words, characters, child nodes, and more!Some of the splitting methods utilize a series of <span>s populated with CSS variables and data attributes unlocking transitions and animations that were previously not feasible with CSS.Basic Usage of Splitting.js Splitting can be called without parameters, automatically splitting all elements with data-splitting attributes by the default of chars which wraps the element's text in <span>s with relevant CSS vars.Splitting is a JavaScript microlibrary with a collection of small built-in plugins designed to split (section off)The Splitting library doe...
Diagonal Slideshow with JavaScript & CSS
Animation, Core Java Script, CSS2 / CSS3.0, Slider

Diagonal Slideshow with JavaScript & CSS

Diagonal Slideshow with JavaScript & CSSA Diagonal Slideshow look and three visible slides. A decorative background element expands to fullscreen when opening the content preview. A slideshow with a "diagonal" look and three visible slides. A decorative background element expands to fullscreen when opening the content preview. There's another slideshow which will surely impress you,  This time we have a diagonal type of look where the current slide is in the center of the page and the previous and next images can be seen laterally, one in the top left corner and one in the bottom right corner of the page.Also Check: Design & AnimationsAfter open, the content preview looks like this.Here you can enjoy this flashing series of diagnonal slideshow,...
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...
FieldsLinker : Matching files Headers to Database Fields
Core Java Script

FieldsLinker : Matching files Headers to Database Fields

FieldsLinker FieldsLinker Designed for matching files headers to database fields during the process importing. Allows drawing links between elements of 2 lists (headers of the file on the left, column names on the right) and getting back the result in a js object.Given 2 lists : for instance one from a text import, the second listing the fields a db table the jquery plugin allows you to draw and save links between the 2 listsYou can link on a one to one basis or on a one to many basis. Fields can be declared as mandatory the result reporting an error in case there are not filled. FieldsLinker v0.72Allows to link elements of list A to elements of list B and returns the links in a js objectYou can choose beetween an input/output with positions or names Colours can b...
Dragio.js : JavaScript Drag Drop File Upload Library
Core Java Script

Dragio.js : JavaScript Drag Drop File Upload Library

Dragio.js JavaScript Dragio.js is a JavaScript class to work with file upload. Custom responsive forms, progress bars, drag ‘n’ drop function, Ctrl + V paste, image preview etc. Demo of Dragio.js JavaScript  Check out the demo to see it in action (on your mobile or emulate touches on your browser).Features Everything you need in a JavaScript file upload libraryProgress Bar A fully customizable progress bar is included in UI mode. Core users can build their own with the help of a friendly API.Drag and Drop Drag and drop files (and even folders in Chrome and Opera) straight from your desktop.Retry Sometimes the network misbehaves. Fortunately, Fine Uploader can detect these sorts of disturbances and notify the user, or even automatically...
Infinite AJAX Scroll : JavaScript Library
Core Java Script

Infinite AJAX Scroll : JavaScript Library

Infinite AJAX Scroll is a jQuery scrolling plugin. It works by reading the next (and previous) links of your existing server-side pagination and load these pages via AJAX when the visitor scrolls to the end of the page.SEO friendly Doesn’t break browsers back button Highly customizableInstallation Use Infinite Ajax Scroll via CDN Get up and running in no time by linking directly to Infinite Ajax Scroll on unpkg. <script src="https://unpkg.com/@webcreate/infinite-ajax-scroll@3/dist/infinite-ajax-scroll.min.js"></script>Place this code right before the </body> tag on each template or page that you want to use infinite scroll on. Manage as a package Are you using NPM in your projects? You can install and update our package easily.$ npm instal...
Simple Data Table with JavaScript Latest
Core Java Script, tables

Simple Data Table with JavaScript Latest

DataTables is a plug-in for teh jQuery Javascript library.Lightweight and simple data table with no dependencies, used for multi purposes to sort out teh data in a proper way. dis data table is very classy & simple containing many other features also. It can also display data in Arrays & in teh meantime you can control you're data by process of loading. This Data Table can Support custom events as well as capability support custom plugin. Features:Display data (array with objects) in simple table Lazy loading of data (you can load data whenever you can) Support custom skins Small size of package No dependencies Support custom events (update, add, remove) Fluent API Recognize data in input and change input type Simple & Eas...
EasyStar.js : Javascript A* Pathfinding library for HTML5 games
Core Java Script, games, HTML5

EasyStar.js : Javascript A* Pathfinding library for HTML5 games

EasyStar.js HTML 5 games: EasyStar.js HTML5 games JavaScript A* is an algorithm for finding the shortest path between two points. It is very useful in game development. Any tile-based game that requires this kind of movement will probably […]EasyStar.js HTML 5 games InstallationWeb: Find the minified file in the /bin directory node.js: npm install easystarjs Phaser: see Phaser Plugin Bower: bower install easystarjsDescription easystar.js is an asynchronous A* pathfinding API written in Javascript for use in your HTML5 games and interactive projects. The goal of this project is to make it easy and fast to implement performance conscious pathfinding. Features of EasyStar.js HTML 5 games:Calculates asynchronously for better overall performance Simple AP...
SpaceTime : Javascript Timezone Library
Core Java Script, JavaScript

SpaceTime : Javascript Timezone Library

JavaScript Timezone Library SpaceTime is a lightweight JavaScript timezone library. handle dates in remote timezone heavily-support daylight savings, leap years (and seconds!)and hemisphere-logic Moment-like  API Orient by quarter, season, month, week.. Zero Dependencies no Intl API weighs just. Featuers of Javascript Timezone Librarycalculate time in remote timezone support daylight savings, leap years, and hemispheres Moment-like 💘 API (but immutable!) Orient time by quarter, season, month, week.. Zero Dependencies - (no Intl API) only 43KB.<script src="https://unpkg.com/spacetime"></script> <script> var d = spacetime('March 1 2012', 'America/New_York') //set the time d = d.time('4:20pm')d = d.goto('America/Los_Angeles') d...
Image Trail Effects with TweenMax & CSS
Animation, Core Java Script, CSS2 / CSS3.0, image effect

Image Trail Effects with TweenMax & CSS

Image TweenMax & CSS & Image Trail EffectsA set of brutalist effects for mouse-following image trails that show a random series of images with tweenmax and css.The idea is to follow the mouse and show a trail of random images. It’s a kind of brutalist effect and there are various possibilities when it comes to showing and hiding the images. So we compiled a set of demos that explores different animations. A set of brutalist effects for mouse-following image trails that show a random series of images.Today we’d like to share a fun mouse interaction effect with you that we found on the VLNC Studiowebsite. The idea is to follow the mouse and show a trail of random images. It’s a kind of brutalist effect and there are various possibilities when it comes to showing and hiding t...