Jquery Facedetection : Simple Way to Detect Human Face for Web

jquery facedetection

if you’re want to creating app that detection human face, you’re in right place. I found best jquery plugin to do that : simple human face detection. Its called : Jquery facedetection and use great algoritm by Liu liu.

Jquery facedetection will return value in array that contains :

  • x: Y coord of the face
  • y: Y coord of the face
  • width: Width of the face
  • height: Height of the face
  • positionX: X position relative to the document
  • positionY: Y position relative to the document
  • offsetX: X position relative to the offset parent
  • offsetY: Y position relative to the offset parent
  • confidence: Level of confidence

So, you can use the array return to your app.

Oh shit, this jquery plugin also ability to detection face in video, wow its very amazing. And you can grab this plugin for free.

If you’re interest to develop this jquery plugin, you can join at github  or download directly or see the amazing demo

Rollerblade.js : A Jquery Plugin to Creating 360 degrees Object Rotation

Do you ever see a 2D object that can in turn be 360 degrees? 2D into 3D model like. For example: display smartphone in GSM arena. Please check the link here. In the above example, you can rotate it 360 degrees smartphone and you can see all parts of the object (smartphone) is. The question is, how to make something like that? Do you have to take a picture of the smartphone through various angles, then combine them?

Introducing Rollerblade.js

Is a jquery plugin that allows you to create what is like GSM arena did. You can combine a series of images, then Rollerblade.js will show his ability. The user can use the mouse to interact with objects, or using gestures (if accessing via a tablet or smartphone).

Tips:

If you want the animation look smoother, you must have a lot of picture series. More and more images will produce the animation smooth, and the result is optimal. Animations look more realistic.

Unfortunately, users of older browsers, such as IE 8 down does not support this library. According to the manufacturer, Rollerblade.js can work perfectly on IE 9+ and all modern browsers (Chrome, Firefox and Safari). Update your browser immediately.

Download this jquery here

Dependencies : Jquery

 

Alternative Jquery Plugins to Creating Pinterest Layout Style

Did you know, pinterest is bring new concept of grid system, its display many images in best view, just like collection. Users can see images in simplicity, then see all image easily. Exploring image now become simple way. Before it, grid use to display image in same size. In pinterest, you can see different size of image, and it is the art.

And right now, many designer want to create a pinterest like style. Many wordpress theme created with pinterest style, blogspot template also, and of course HTML5 template. Pinterest style everywhere.

What technology behind the pinterest layout? can I use it to build own pinterest layout style? yes you can. We were found best library to build pinterest layout style.

Pinterest layout perfect for photography site, website with many image, product show off and many more. Your creativity will determine it. Lets see

Gridfy Jquery Plugin

Its jquery plugin to creating pinterest layout style.

gridfy

Features

  1. support image loaded event
  2. support window resize event
  3. support very long height item
  4. support dynamic item width
  5. support animation (CSS3 transition)

Its easy to coding, just like this

window.onload = function(){
      var options =
      {
           srcNode: 'img',             // grid items (class, node)
           margin: '20px',             // margin in pixel, default: 0px
           width: '250px',             // grid item width in pixel, default: 220px
           max_width: '',              // dynamic gird item width if specified, (pixel)
           resizable: true,            // re-layout if window resize
           transition: 'all 0.5s ease' // support transition for CSS3, default: all 0.5s ease
      }
      document.querySelector('.grid').gridify(options);
 }

Download

Grid-A-Licious Jquery Plugin

Its another jquery plugin to creating pinterest layout style. Its support responsive feature, so your page will best view on any device and any site. You can check out demo page, check responsive feature and many more.

Grid-A-Licious not only fill with image, you can fill grid with text. I think, its greate javascript UI builder.

grid

Demo

Mason.js Jquery Plugin

Its popular jquery plugin and most used by developer and designer to creating pinterest layout style. Its ‘revision’ version of mansory.js, where mansory.js build a grid is constructed there are bound to be holes, so Mason calculates where those holes are fills them in.

mason.js

Demo

BlocksIt.js – Dynamic Grid Layout jQuery Plugin

a jquery plugin to display HTML element like a grid dynamiclly.

blockslt.js

Demo

Woomark Jquery Plugin

Its amazing plugin to creating pinterest layout style. Woomark Jquery is very popular plugin and was reviewed by wide web design blog such as Speckyboy. Woomark detects the size of the window and automatically organizes the boxes into columns. Resize your browser to see the layout adjust.

woomark jquery plugin

Demo

Babylon Grid Jquery Plugin

Babylon Grid is lightweight jQuery + CSS plugin for creating responsive, dynamic & customizable pinterest like grid with diferent column width support, few display mods and AJAX support.

babylon grid jquery plugin

The codes are simple, just like this

<div id="babylongrid">
    <article>
        First article
    </article>
    <article>
        Second article
    </article>
    <article>
        Third article
    </article>
    <article>
        Fourth article
    </article>
    <article>
        Fifth article
    </article>
<script type="text/javascript">
    (function($) {
        $('#babylongrid').babylongrid();
    },(jQuery));
</script>

Demo

Mosaic Flow

Mosaic Flow is jquery plugin to build pinterest layout style. You can display image without border

mosaic flow

Demo

I hope you can choose one and finish your project in right way. Thanks for visiting my web design blog and reading jquery plugin to build pinterest layout style

 

Interact with HTML5 localStorage and sessionStorage Easier with Jquery Storage API

jquery storage api

Yesterday we wrote about Jcanvas, which is a jquery plugin to interact with HTML5 canvas element. Now, we would like to share information about HTML5 localStorage and sessionStorage API. The second element is the new feature of HTML5 and start widely used by developers to make their applications more perfect, especially HTML5-based games. HTML5 localStorage allows us to store information on the local storage medium, almost similar to a cookie.

By using javascript, we are much easier to interact with HTML5 localStorage and sessionStorage API. To that end, we recommend to use jQuery Storage API. Storage API jQuery is a jquery plugin that allows us to interact with HTML5 localStorage and sessionStorage API

JQuery Storage API Features

  1. To store object easily, encode/decode it with JSON automatically
  2. Ability to define namespace and use it as a specific storage
  3. Magic getter and setter to have access at an infinite object level with one call
  4. Add jquery.cookie and manage your cookies with this API
  5. You want use storage on old browsers? Add jquery.cookie & JSON and JQuery Storage API use cookies to simulate storage!

You can download it here

JCanvas, Easy Way to Deal with HTML5 Canvas via Javascript (Jquery Plugin)

Latest HTML5 features and the potential to grow even more is the canvas. Canvas element in HTML5 is used for drawing, displaying images, as objects and others. The use of canvas will be even more when interacting with data and javascript. Where, dynamic data can be displayed better with javascript.

To interact with the canvas you can directly access it via HTML, but to make it easier to use javascript. If using javascript, we would recommend using Jquery as the main platform, and help plugins to optimize.

Introduce, JCanvas

jCanvas is a jQuery plugin that makes the HTML5 canvas easy to work with. Developers can manipulate and control the canvas itself, shapes on the canvas, their styles, and even overlay multiple canvas layers on top of each other.

JCanvas has access to the following

Canvas Manipulation:

  1. Clear canvas
  2. Rotate canvas
  3. Scale canvas
  4. Translate canvas
  5. Save canvas
  6. Restore canvas
  7. Pixel manipulation
  8. Get canvas image
  9. Draw manually
  10. Detect pixel ratio

Canvas Layer Manipulation:

  1. Layer API
  2. Add Layers
  3. Retrieve Layers
  4. Draw Layers
  5. Manipulate Layers
  6. Animate Layers

Styles Manipulation:

  1. Colors
  2. Shadows
  3. Gradients
  4. Patterns

Drawing Capabilities:

  1. Arcs
  2. Arrows
  3. Curves
  4. Ellipses
  5. Images
  6. Lines
  7. Masking
  8. Paths
  9. Polygons
  10. Rectangles
  11. Slices
  12. Text
  13. Vectors

The Advantages of Jcanvas

  1. Open source and freeware
  2. Small size, its just about 11kb – Gzipped version
  3. Completed with clean documentation. Read here

Download JCanvas now

or play JCanvas in sandbox.

Bonus!

Create animation with HTML5 Canvas

Creating Damn-Simple Calculator with JCalculator

jcalculator

It turns out that we can make a simple calculator with jquery. Yes, only with an input, we can make a calculator. This capability can use for your online store. For example, you can completed the online store with a mini calculator, where prospective buyers can calculate the amount of charge that must he paid.

Is JCalculator, an amazing jquery plugin. In an instant, you can make a calculator, like this below Read more

20 Useful jQuery Plugin to Retrive Data from Social Media Feed

Feedify – Convert Text Into HTML Feed Like Twitter and Facebook

Did you know, there are many jquery plugins that can interact with the Internet and can retrive data from the internet. Well, this post will discuss about the collection of jquery plugins that are useful for you to retriving data from the internet, like instagram feed, facebook feed, twitter feed, google + and others. These data can be displayed on your website.

Not only that, there are some jquery plugins that are useful for processing the raw data from the internet, such as convert the format to xml and json.

20 This is useful jquery plugins to retrive the data from the internet (social media)

Feedify – Convert Text Into HTML Feed Like Twitter and Facebook

Feedify – Convert Text Into HTML Feed Like Twitter and Facebook

Feedify is a jQuery plugin to convert text into HTML feed like Twitter and Facebook. It converts URL to links and Adds User links and Hash search links.

DownloadWebsite

ballboy.js – jQuery Plugin to Display Dribbble Shots

ballboy.js – jQuery Plugin to Display Dribbble Shots

ballboy.js is a jQuery plugin to fetch a user’s shots from Dribbble and display them.

DownloadWebsite

Yunero – jQuery Plugin for Displaying YouTube Video Feed

Yunero – jQuery Plugin for Displaying YouTube Video Feed

Yunero is a new jQuery plugin that creates a widget on your website to display video feed for YouTube channel uploads or custom playlist .Just specify your youtube channel URL and this widget will display the recent uploads from your channel. You may also specify your youtube playlist URL and video feeds from your playlist will be displayed. A subscription box for you is also shown to attract social people.

DownloadWebsite

Socialist – jQuery Social Plugin to Create and Combine Feeds from Social Networks

Socialist – jQuery Social Plugin to Create and Combine Feeds from Social Networks

Socialist is a social feed plugin that combines multiple social media feeds in one place. Use it to combine content and create a social wall from Facebook, Twitter, LinkedIn, YouTube, Pinterest, Flickr, Tumblr, Craiglist RSS and other social networks.

DownloadWebsite

Youmax – Complete Youtube Channel on your Website

Youmax – Complete Youtube Channel on your Website

Youmax is a jQuery plugin used to display any YouTube channel on your website.Basically the plugin displays the below items:

DownloadWebsite

PapaParse – Parse CSV with Javascript

PapaParse – Parse CSV with Javascript

Papa Parse is a robust and powerful CSV (character-separated values) parser with these features:

DownloadWebsite

simpleWeather – Display the Weather Using jQuery

simpleWeather – Display the Weather Using jQuery

simpleWeather is a simple jQuery plugin to display the weather information for any location. The data is pulled from the public Yahoo! Weather feed via the YQL API.

DownloadWebsite

Social Feed – jQuery Plugin for Feeds from Social Networks

Social Feed – jQuery Plugin for Feeds from Social Networks

Social Feed is a jQuery plugin which shows a user feed from the most popular social networks.Currently supports: Facebook, Twitter, VK

DownloadWebsite

Hashtegny – Aggregate Hashtags from Social Media Networks

Hashtegny – Aggregate Hashtags from Social Media Networks

Hashtegny is a jQuery plugin that aggregates “hashtags” from different social media networks like Twitter, Instagram, GooglePlus.Posts are displayed in a unique, attractive, and animated layout with lots of features.

DownloadWebsite

Pimax – jQuery Plugin to Display Picasa and Google+ Photos/Albums on Website

Pimax – jQuery Plugin to Display Picasa and Google+ Photos/Albums on Website

Pimax displays a photo gallery from your Picasa / Google+ albums. The Public albums are pulled from your account and dsiplayed on your website.You can add a public album or add some images to your Google+ account; it will be reflected on your website with this plugin!

DownloadWebsite

zLastFM – LastFM Feeds Reader Plugin for jQuery

zLastFM - LastFM Feeds Reader Plugin for jQuery

DownloadWebsite

jQuery JSONView – Formats & Syntax Highlights JSON

jQuery JSONView – Formats & Syntax Highlights JSON

jQuery JSONView is a plugin to view JSON in a more readable format. It offers some methods and options to customize.

DownloadWebsite

zFlickrFeed – Flickr Feeds Reader Plugin for jQuery

zFlickrFeed - Flickr Feeds Reader Plugin for jQuery

DownloadWebsite

YouTube TV – YouTube User/Playlist Player jQuery Plugin

YouTube TV – YouTube User/Playlist Player jQuery Plugin

YouTube TV is a small, slick, library independent YouTube User/Playlist player. Also it can be used as a jQuery plugin.Features

DownloadWebsite

Facebook jQuery Helper Plugin

Facebook jQuery Helper Plugin

This is a simple jQuery plugin that helps you add the Facebook Javascript SDK to your site asynchronously. It also allows you to to use jQuery events to run code before and after the Facebook’s code is initialized.

DownloadWebsite

Instagram Lite – jQuery Plugin to Display Instagram Photos

Instagram Lite – jQuery Plugin to Display Instagram Photos

Instagram Lite is a simple, lightweight jQuery plugin used to display a user’s Instagram photos.

DownloadWebsite

Tweet! – jQuery Twitter Feed Plugin

Tweet! - jQuery Twitter Feed Plugin

DownloadWebsite

Social Feed – jQuery Plugin for Feeds from Social Networks

Social Feed – jQuery Plugin for Feeds from Social Networks

Social Feed is a jQuery plugin which shows a user feed from the most popular social networks.Currently supports: Facebook, Twitter, VK

DownloadWebsite

jribbble – jQuery plugin for the Dribbble API

jribbble – jQuery plugin for the Dribbble API

jribbble is a jQuery plugin to fetch shot and player info from the Dribbble APIWhat jribbble can do?

DownloadWebsite

Instagram Infinite Scroll

Instagram Infinite Scroll

Instagram Infinite Scroll is a single page Infinite Scroll app built using jQuery, and CSS.

DownloadWebsite

jQuery Alerts Must Be Try Before Write a Code

Avgrund Modal jQuery Plugin

Alerts and notifications are used designers to notify the results of a process to the user. Therefore, alerts and notifications should be cool and easily understood by the end user.
There are some javascript or jquery plugin to create alerts and notifications to be even better. Developers and designers also made easy with this plugin.
All this under a free plugin, you can use it on all your projects.

Avgrund Modal jQuery Plugin

Avgrund Modal jQuery Plugin

Avgrund is a jQuery plugin for modal boxes and popups. It uses interesting concept showing depth between popup and page. It works in all modern browsers and gracefully degrade in those that do not support CSS transitions and transformations (e.g. in IE 6-9 has standard behavior).

Website | Download

Bootbox.js – Bootstrap Powered Alert, Confirm and Dialog Boxes

Bootbox.js – Bootstrap Powered Alert, Confirm and Dialog Boxes

Bootbox.js is a small JavaScript library which allows you to create programmatic dialog boxes using Twitter Bootstrap modals, without having to worry about creating, managing or removing any of the required DOM elements or JS event handlers.

Website | Download

FBModal – Facebook Style jQuery Modal Plugin

FBModal – Facebook Style jQuery Modal Plugin

FBModal is a jQuery plugin that is the first Facebook replica modal dialog. FBModal provides a simple ways to invoke a modal dialog.

Website | Download

Bootstrap Dialog – Flexible Dialog for Bootstrap

Bootstrap Dialog – Flexible Dialog for Bootstrap

Bootstrap Dialog is a flexible modal for Bootstrap 3 using pure javascript. It has many options and methods to customize.

Website | Download

Alertify – JavaScript Alert/Notification System

Alertify – JavaScript Alert/Notification System

Alertify is an unobtrusive customizable JavaScript notification system.Features

Website | Download

SweetAlert – Beautiful Replacement for JavaScript Alert

SweetAlert – Beautiful Replacement for JavaScript Alert

SweetAlert is a beautiful replacement for JavaScript’s alert.It automatically centers itself on the page and looks great no matter if you’re using a desktop computer, mobile or tablet. It’s highly customizeable.

Website | Download

noty – jQuery Notification Plugin

noty - jQuery Notification Plugin

noty is a jQuery plugin that makes it easy to create alert, success, error and confirmation messages as an alternative the standard alert dialog. The notifications can be positioned at the top, topCenter (like GMail), bottom, centre, top left or top right. There are lots of other options in the API to customise the text, animation, speed, buttons and much more.

Website | Download

jQuery Sticky Alert

jQuery Sticky Alert

Sticky Alert is a minimal jQuery plugin to add a sticky alert bar to the top of your website. It’s available under the MIT license and is free for use on personal or even commercial projects.

Website | Download

Easy Z Modal – jQuery Modal Plugin

Easy Z Modal – jQuery Modal Plugin

Easy Z Modal is a simple, customizable and dynamic jQuery plugin to create modals and dialog boxes.

Website | Download

Apprise – Attractive Alert Alternative for jQuery

Apprise – Attractive Alert Alternative for jQuery

An alert alternative for jQuery that looks good. Apprise is a very simple, fast, attractive, and unobtrusive way to communicate with your users. Also, this gives you complete control over style, content, position, and functionality.Apprise is, more or less, for the developer who wants an attractive alert or dialog box without having to download a massive UI framework.

Website | Download

jQuery Ambiance Notification Plugin

jQuery Ambiance Notification Plugin

jQuery Ambiance allows you to create notifications on the fly by just calling the function and providing some information

Website | Download

jQuery Confirm – Multipurpose Web Alert & Confirm

jQuery Confirm – Multipurpose Web Alert & Confirm

jQuery Confirm is a multipurpose jQuery plugin for alert, confirm and dialog. It provides set of features like, Auto-close, Ajax-loading, background-dismiss, themes and more.

Website | Download

Sticky – Simple Notification for jQuery

Sticky – Simple Notification for jQuery

Sticky is a simple notification system that allows you to send such messages with ease, and class. Quickly notify a user of software updates, process completions, or annoy them with registration reminders.

Website | Download

Lobibox – Responsive jQuery Notification Plugin

Lobibox – Responsive jQuery Notification Plugin

Lobibox is a responsive jQuery messagebox and notification plugin.Both Messageboxes and Notifications has some useful option to customize.

Website | Download

Simply Toast – Simple Toast Messages for jQuery

Simply Toast – Simple Toast Messages for jQuery

Simply Toast is a simple toast messages for jQuery. All css styles were extracted from bootstrap, so if you already use bootstrap, you don’t need include plugin css file.

Website | Download

10+ Beautiful Slider jQuery Plugin

Animated SVG Hero Slider

Slider is a special element to the web which saves space, because in the slider, you can put some pictures or other elements. Users only need a click or touch swipe for exploring the images.

This post will discuss some of the latest collection of slider plugins for jquery. Responsive features became a necessity, developers must have thought about this. Responsive feature allows you to look good and work on different devices.

Also read

  1. jQuery plugin to create drag and drop
  2. jquery plugin to modify text and string

Here, 10+ jquery slider plugin that is cool and beautiful

Animated SVG Hero Slider

Animated SVG Hero Slider

A tutorial about creating full page slider, with animated SVG elements used as transition effects.

DownloadWebsite

Zoom Slider – Content Slider with Depth-Like Zoom Functionality

Zoom Slider – Content Slider with Depth-Like Zoom Functionality

Zoom Slider is a simple content slider with depth-like zoom functionality.Each slide has a predefined zoom area that will be used to calculate the appropriate scale value for a fullscreen fill. Once the icon for zooming is clicked, the zoom area as well as the page get scaled, creating the illusion that the viewer is approaching the item

DownloadWebsite

Flickity – Touch, Responsive, Flickable Galleries

Flickity – Touch, Responsive, Flickable Galleries

Flickity makes galleries, sliders, & carousels that feel lively and effortless. You can use Flickity as a jQuery plugin.Features:

DownloadWebsite

Zenith – Responsive Slider jQuery Plugin

Zenith – Responsive Slider jQuery Plugin

Zenith is responsive slider jQuery plugin that has 4 basic layouts + 4-th layout has dozen variations of it’s own, giving 3 additional sub-layouts.Zenith also comes with 7 transition animation and unlimited possibilities of styling and creating your own variations. You can edit some HTML, and add that markup by passing it’s elements classes or id’s to the options when initializing zenith.

DownloadWebsite

Slider Pro – Responsive and Touch Enabled jQuery Slider

Slider Pro – Responsive and Touch Enabled jQuery Slider

Slider Pro is a modular, responsive and touch-enabled jQuery slider plugin that enables you to create elegant and professionally looking sliders.Features:

DownloadWebsite

jQuery Lens Slider

jQuery Lens Slider

jQuery Lens Slider comes with full open source jQuery code library, that user can develop, debug and deep customize slider of one’s own.

DownloadWebsite

Sliiide – jQuery Plugin to Create Sliding Nav Menu

Sliiide – jQuery Plugin to Create Sliding Nav Menu

Sliiide is a jQuery plugin to create a sliding menu easily. Sliiide will help you out to create an App-style navigation menu that will slide when a hamburger icon is clicked.

DownloadWebsite

gridslide.js – Multi-Directional jQuery Image Slider

gridslide.js – Multi-Directional jQuery Image Slider

gridslide.js is a multi-directional jQuery image slider. It’s useful for displaying multiple albums on one page or diorama style photo arrays.

DownloadWebsite

Flat Slider – Style Your jQuery UI Slider

Flat Slider – Style Your jQuery UI Slider

Flat Slider is a useful tool to customize and style jQuery UI Slider.

DownloadWebsite

Nex – Flexible jQuery FullScreen Slider

Nex – Flexible jQuery FullScreen Slider

Nex slider is a blazing fast fullscreen slider optimized for best performances and compatible with all platforms. It allows you to embed images, videos and even google maps in the same slider.Features

DownloadWebsite

jQuery Hero Slider

jQuery Hero Slider

jQuery Hero Slider is a full-width, responsive and easy to customize slideshow, enriched by a tabbed navigation.

DownloadWebsite

Useful jQuery Plugin to Create Drag and Drop Interface

Drag and drop models offer a convenience to adjust the settings. Users feel like touching the elements, especially if done with the touch screen. To create a drag and drop interface, it takes jquery plugins, though not always using jquery, but the easiest way is with jquery plugins.Many developers offer jquery plugins that you can use to create a drag and drop interface. Think, a lot of applications or games that can be created with drag and drop, a lot of ideas. You can be creative even further.

This post will collect some useful drag and drop jquery plugins that you can use for free.

Also read

  1. Use jquery plugin to modifiy text
  2. jquery plugin to create pinterest layout
  3. jQuery plugin to create animations

Sortable : JavaScript Drag & Drop Sorting Library

Sortable — is a minimalist JavaScript library for modern browsers and touch devices. No jQuery.Features:

Read more

Draggabilly : Make that shiz draggable with JavaScript

Make that shiz draggable with javascript.Rad because it supports IE8+ and multi-touch.

Read more

Dragmove : jQuery Plugin for Dragging DOM Elements

Lightweight jQuery extension for enabling draggable functionality on DOM elements without requiring the jQuery UI library. Compatible with trackpads, touch devices, and standard computer mice.

Read more

Gridstack.js : jQuery plugin for Widget Layout

Gridstack.js is a jQuery plugin for widget layout. This is drag-and-drop multi-column grid. It allows you to build draggable responsive bootstrap v3 friendly layouts.It also works great with knockout.js

Read more

Dragon : jQuery Draggable plugin

Another fn.draggable plugin for jQuery. This plugin is independant of any widget or core architecture, just plop it on your page after jQuery and you’re good to go.

Read more

SnapPuzzle : jQuery Image Puzzle Game

A jQuery plugin for turning an image into a jigsaw puzzle game.

Read more

dasBaum : jQuery Drag & Drop Treeview plugin

A simple jquery ui widget supporting drag & drop, inline renaming, keyboard navigation, and other cool stuff.

Read more

Touch-dnd : jQuery Touch compatible Drag’n’Drop library

Advanced touch-compatible Drag’n’Drop library providing Draggable, Droppable and Sortable for Zepto.js and jQuery.

Read more

Dad.js : jQuery Drag & Drop Plugin

DAD.js is a simple and awesome Drag And Drop plugin.

Read more

Playful Interaction for Draggable Elements

A little playful interaction idea where we add some bounciness to a draggable element and animate it depending on its position.We wanted to create a playful dragging interaction that will morph and animate an element depending on its position. If dropped before the bounds we will snap the element back with an elastic effect. We also add some bounciness to inner elements so that everything gets an even more organic feel.

Read more

Interact.js : Javascript Drag and Drop, Resizing and Gestures

Javascript drag and drop, resizing and gestures for modern desktop and mobile browsers.Features:

Read more

Drag and drop form builder using bootstrap

I was working on a web survey type of project with a requirement that admin users should be able to build forms on the go, which will then be displayed to user to fill up and submit. while browsing i came across this nice script Formbuilder.drag and drop form builder is simply a interface to build your own web forms, On each move it generates json output which you can use to rebuild the html form at run time.

Read more

Interactive Drag and Drop Coloring Concept

Today we would like to share a fun interactive coloring concept with you. The idea is to simply drag a color from a color palette to a website mockup and color designated areas of it (like sections or texts). You might have encountered customization tools before, but we wanted to add some fun to this idea and make it enjoyable to use.

Read more

jQuery T-Shirt Designer

T­shirt Designer is the tool you have been looking for! You can create now your own t­shirt generator directly on your website. Works with any kind of product and can be integrated in minutes.Features:

Read more

Drag and Drop Interaction Ideas with jQuery & CSS3

Some ideas for drag and drop interactions in a UI. The idea is to show a droppable area that stands for certain actions after an element is being dragged.

Read more

vSort : jQuery Lists Sortable Plugin with Handle

vSort is a simple jQuery plugin for making lists sortable with a handle

Read more

jQuery Sortable Tree Lists

jQuery plugin to sorting lists also the tree structures. Smooth motion while dragging and scrolling.

Read more

Dropper : jQuery Drag & Drop uploads Plugin

A jQuery plugin for simple drag and drop uploads.

Read more

Collections : Drag and Drop jQuery collection Add-on

Drag and Drop jquery collection add-on for ecommerce site.

Read more

tinyDraggable : jQuery plugin for making objects Draggable

A minimalistic jQuery plugin for making objects draggable.Compatible with jQuery 1.5+ in Firefox, Safari, Chrome, Opera, Internet Explorer 7+. No dependencies except the jQuery library.This plugin was developed by and for Pixabay.com – an international repository for free Public Domain images. We have implemented this piece of software in production and we share it – in the spirit of Pixabay – freely with others.

Read more

HTML5 Sortable : jQuery Sortable Lists and Grids

Lightweight jQuery plugin to create sortable lists and grids using native HTML5 drag and drop API.

Read more

Useful jQuery Plugin to Interact with Text and String

textAssist – Smart Auto Text Assistant with jQuery

Working with the text is not always easy because PHP as a language processing does not have a complete feature. There are some cases where developers have to modify the text and the string on the client side. For this it is necessary javascript and javascript functions for modern web programming.
When using javascript, developer more you select using jquery, although there are disadvantages that the web becomes more severe loading. However, it will be paid with a complete jquery features.

Also read:

  1. Use jquery no.conflick() in wordpress
  2. 20 usefull jquery plugin
  3. Cool jquery snippet for developers

This time I want to share some jquery plugins to modify and interact with text and strings.

textAssist – Smart Auto Text Assistant with jQuery

textAssist – Smart Auto Text Assistant with jQuery

textAssist is the smart auto text assistant script with highly customizable options. This script uses the jQuery framework and you can use it on dynamic web pages. textAssist helps web developers in making web sites more usable and user friendly.

DownloadWebsite

Truncated Text – Truncate Text with Character Limit

Truncated Text  – Truncate Text with Character Limit

Truncated Text is a javascript function that you can truncate string with character limit. There is no broken words when truncating text

DownloadWebsite

Blast.js – Blast Text Apart in JavaScript

Blast.js – Blast Text Apart in JavaScript

Blast.js separates text in order to facilitate typographic manipulation. It has four delimiters built in: character, word, sentence, and element. Alternatively, Blast can match custom regular expressions and phrases.Blast’s uses include typographic animation, juxtaposition, styling, search, and analysis.

DownloadWebsite

Lining.js – Javascritp Plugin to Easy Select ‘nth’ Text Lines

Lining.js – Javascritp Plugin to Easy Select 'nth' Text Lines

Lining.js is an easy to use javascript plugin offers you complete DOWN-TO-THE-LINE control for radical web typography.

DownloadWebsite

Emoticons.js – jQuery Plugin to Enhance Text

Emoticons.js – jQuery Plugin to Enhance Text

Emoticons.js is a jQuery plugin to insert emojis, font smileys, embed videos (youtube/vimeo), media files,pdf and highlight code syntax.Features

DownloadWebsite

Typer – jQuery Plugin for Slick Typing Effect

Typer – jQuery Plugin for Slick Typing Effect

Typer is a jQuery plugin for a slick typing effect. There are some option to customize plugin such as typeSpeed, typerInterval, typeDelay, etc.

DownloadWebsite

Type.js – Typographic Tools for Better Web Type

Type.js – Typographic Tools for Better Web Type

Type.js adds new type properties to your CSS, giving you the control you need for type on the web. You can write these properties in your CSS and they will work like any other property.

DownloadWebsite

Letter by Letter JS – jQuery Plugin for Typing / Letter by Letter Effect

Letter by Letter JS – jQuery Plugin for Typing / Letter by Letter Effect

Letter by Letter JS is a lightweight jQuery plugin to present text letter by letter on a HTML page. This text can appear as if was just being typed, or it can fade in more gently.

DownloadWebsite

Overlapping Letters

Overlapping Letters

Overlapping Letters is a jQuery plugin that automatically adds span tags to letters by using javascript.

DownloadWebsite

Wodry.js – jQuery Plugin for Text Flipping/Rotating

Wodry.js – jQuery Plugin for Text Flipping/Rotating

Wodry.js is a simple jQuery plugin for a text flipping/rotating. Wodry.js allow you to set animation from animations collection, set your own callback on content flipping, etc.

DownloadWebsite

TypeType – Human Typing with jQuery

TypeType – Human Typing with jQuery

TypeType is a jQuery plugin that simulates a human typing. It can be combined with jQuery animations.

DownloadWebsite

Reading Time – Displaying Estimated Time to Read Text

Reading Time – Displaying Estimated Time to Read Text

Reading Time is a simple, lightweight jQuery plugin used to display an estimated time to read some text.

DownloadWebsite

CircleType.js – jQuery Plugin for Circular Text

CircleType.js – jQuery Plugin for Circular Text

Circletype.js is a tiny jQuery plugin that lets you set type on a circleFeatures

DownloadWebsite

Succinct – jQuery Plugin for Truncating Multiline Text

Succinct – jQuery Plugin for Truncating Multiline Text

Succinct is a tiny jQuery plugin for truncating multiple lines of text. It shortens your text to a specified size, and then adds an ellipsis to the end.

DownloadWebsite

TextTailor.js – Tailor-Made Text to Fit Your Needs

TextTailor.js – Tailor-Made Text to Fit Your Needs

TextTailor.js is a jQuery plugin for responsive text to fill the height of the parent element or ellipse it when it doesn’t fit.

DownloadWebsite

Fitter Happier Text – Performant, Fully Fluid Heading

Fitter Happier Text – Performant, Fully Fluid Heading

Fitter Happier Text is a javascript library for performant and fully fluid heading inspired by FitText.Fitter Happier Text replaces each node with an SVG text node and sets the viewBox attribute based on its width and height.

DownloadWebsite

LetterFx – jQuery Plugin for Animated Visual Text Effects

LetterFx – jQuery Plugin for Animated Visual Text Effects

LetterFx is a a jQuery plugin to apply animated visual effects to text – letters, words & custom patterns.LetterFx works by temporarily injecting markup into the text of an $(“element”) and sequentially adding & removing transition-based CSS classes.

DownloadWebsite

slabText – jQuery Plugin for Big, Bold & Responsive Headlines

slabText – jQuery Plugin for Big, Bold & Responsive Headlines

slabText is a jQuery plugin for producing big, bold & responsive headlines.slabText splits headlines into rows before resizing each row to fill the available horizontal space. The ideal number of characters to set on each row is calculated by dividing the available width by the pixel font-size – the script then uses this ideal character count to split the headline into word combinations that are displayed as separate rows of text.

DownloadWebsite

fontFlex – jQuery Plugin for Responsive Font Sizes

fontFlex –  jQuery Plugin for Responsive Font Sizes

fontFlex is a lightweight jQuery plugin for dynamically changing font sizes according to screen / browser width. Intended to be used with responsive or adaptive CSS layouts.

DownloadWebsite

FlowType.JS – jQuery Plugin for Responsive Web Typography

FlowType.JS – jQuery Plugin for Responsive Web Typography

FlowType.JS is a plugin for Responsive Web Typography at its finest: font-size and line-height based on element width.FlowType.JS is changing the font-size—and subsequently the line-height based on a specific element’s width. This allows for a perfect character count per line at any screen width.FlowType.JS works just fine with Typekit, Cloud.Typography, Google Webfonts and any other services.

DownloadWebsite

Knwl.js – Scan Through Text for Data of Interest

Knwl.js – Scan Through Text for Data of Interest

Find dates, times, emails, phone numbers, links, reading time, even the emotion of the text, or check if it’s spam. Knwl.js makes it possible to scan through large amounts of text for data that may be of interest.

DownloadWebsite

highlightRegex – jQuery Plugin to Highlight Text with Regular Expression

highlightRegex – jQuery Plugin to Highlight Text with Regular Expression

highlightRegex is a jQuery Plugin that lets you highlight document text with a regular expression.

DownloadWebsite

Squishy – jQuery Plugin for Fitting Text

Squishy – jQuery Plugin for Fitting Text

Squishy is a jQuery plugin that automatically resizes text to exactly fit the container with no extra work on your part. This plugin only works for a single line; if you are looking for multiline text fitting you can see SlabText.

DownloadWebsite

Words Rotator – Simple Text Elements Rotator Plugin

Words Rotator – Simple Text Elements Rotator Plugin

WordsRotator is a jQuery plugin to easily add rotating words with CSS3 animation.

DownloadWebsite

Character Counter for jQuery

Character Counter for jQuery

jQuery Character Counter plugin is simple character counter for your forms.

DownloadWebsite

TheaterJS – Javascript Typing Effect Plugin

TheaterJS – Javascript Typing Effect Plugin

TheaterJS is basically a javascript typing effect plugin. Its particularity is to mimic human behavior.

DownloadWebsite

Markdownify – Simple Markdown Editor with jQuery

Markdownify – Simple Markdown Editor with jQuery

Markdownify is the simplest markdown editor with built in cloudinary image upload.

DownloadWebsite

funnyText.js – Create Funny and Crazy Moving Texts

funnyText.js – Create Funny and Crazy Moving Texts

funnyText.js is a jQuery plugin that creates animation for the letters inside a text moving them vertically or horizontally. Ideal for titles and you can configure colors, speed of movement, font size…

DownloadWebsite