jQuery By Example: jQuery Plugins

Showing posts with label jQuery Plugins. Show all posts

Wednesday, September 24, 2014

Random newest jQuery plugins

In this quick post, take a look at some of the newest, interesting and unique jQuery plugins released in last couple of months.

PgwBrowser

PgwModal is a Browser & OS / platform detection plugin for jQuery. It detects desktop and mobile devices. And it is compatible with Windows, Mac, Linux, Android and Apple iOS.

Scroll Advance

ScrollAdvance is a jQuery plugin that adds some useful functions as scrollBottom(), scrollRight() or scrollCenter() for the scroll position.

Goodnight

A super small Javascript plugin for applying special CSS styles at night.

TimePicki

Timepicki - free Time picker jquery plugin, it is simple and clean timepicker so user can understand to set time for your project in input forms.

Cropbox

Cropbox is a lightweight and simple jQuery plugin to crop your avatar.

jQuery.my

jQuery.my is a plugin that binds HTML controls with underlying javascript object using declarative MVVM style manifest. Bindings are bi-directional and real-time.

Blurr

jQuery Plugin to create nice blur backgrounds from an image.

Feel free to contact me for any help related to jQuery, I will gladly help you.

Thursday, September 4, 2014

How to fallback to PNG if SVG not supported?

jQuery jQuery Plugins SVG Fallback

SVG or Scalable Vector Graphics image format has suddenly become popular for showing images on your website and its future graphic format. But not all browsers supports SVG format and that's why SVG format was not so popular though it exists from 1999. So in this post, we will find how to fallback to PNG format if SVG is not supported by browser.

Why use SVG

SVG images are vector based! Meaning that they will be as sharp as hell no matter how big they are. SVG files are smaller and easier to compress than other formats. Graphics with SVG will print in a higher resolution. Editing of SVG can be done with even Notepad. SVG images are zoomable and scalable. Like other graphics, SVG works as a static or animated image. SVGs use XML to define paths and shapes, to create our graphic. Recommended reading "Why Use SVG - What are the Advantages".

You may also like:

SVG Fallback

There are couple of solution for SVG fallback.

Using jQuery and Modernizr

First, we need to detect if SVG is supported or not by browser. And for that we can use Modernizr. It is a JavaScript library that detects HTML5 and CSS3 features in the user's browser.

if (Modernizr.svg) {
    // Supports SVG
} else {
    // Doesn't support SVG (Fallback)
}

So, once it is detected then you can fallback to PNG using a simple jQuery script.

if (!Modernizr.svg) {
   $('img[src*="svg"]').attr('src', function() {
      return $(this).attr('src').replace('.svg', '.png');
   });
}

The above script will find all the image with src "svg" and then replace the extension with PNG.

Using Pure JavaScript (No jQuery)

Following JavaScript code block can also be used for SVG Fallback.

if (!Modernizr.svg) {
    var imgs = document.getElementsByTagName('img');
    var endsWithDotSvg = /.*\.svg$/
    var i = 0;
    var l = imgs.length;
    for(; i != l; ++i) {
        if(imgs[i].src.match(endsWithDotSvg)) {
            imgs[i].src = imgs[i].src.slice(0, -3) + 'png';
        }
    }
}

Using jQuery plugins

There are couple of jQuery/JavaScript plugin which can be used for SVG Fallback.

SVGMagic

SVGMagic is a simple jQuery plugin that searchs for SVG images (including background-images) on your website and creates PNG versions if the browser doesn't support SVG.

Just download the SVGMagic.js script include it and initialize it.

$(document).ready(function(){
   $('img').svgmagic();
});

SVGmagic checks which browser your visitor is using. Is it a browser that doesn't support SVG images, than it starts the magic! First of all the script will check which images on your website are SVG and collects their URLs. These URLs are then send to our server which will temporarily download, convert and save them. When that's done the server send back a package with new URLs. The SVG images on your website than get replaced by the new PNG images and your old-school visitor can see the 'SVG' images.

SVGeezy

SVGeezy is in essence, a fallback plugin. It allows you to use SVGs for all your assets, giving you complete resolution independence. It checks if the browser supports SVGs, if not, changes the src of the image to a .png instead (or whatever you pass in).

Just download the svgeezy.js script include it and initialize it.

svgeezy.init(false, 'png'); // this will let the plugin check all images

The first parameter is a class to tell the code not to check. Feel free to pass in false if you want SVGeezy to check all images. This may be because you have no fallbacks for certain SVGs.

The second is a filetype, this can be anything you want, just make sure the file path resolves to an image. ie. '/images/logo.svg', will be replaced with '/images/logo.png'.

Summary

If you are still not using SVG, then start using. SVGs are resolution independent, meaning responsive design. SVG images can also be created directly in your HTML document, without even having to save the file itself.

Feel free to contact me for any help related to jQuery, I will gladly help you.

Wednesday, September 3, 2014

5 Latest jQuery Image Crop Plugins

Image Crop Plugins jQuery jQuery Image Crop Plugins jQuery Plugins

Previously I have posted about "5 jQuery Image Crop Plugin & Tutorials" but after that many new image crop plugins are released. So in this post, find a complied list of latest jQuery image crop plugins.

You may also like:

Cropit

A jQuery plugin for image cropping and zooming. It loads images locally via FileReader, and does cropping using canvas.

croppic

croppic is an image cropping jquery plugin that will satisfy your needs and much more.

Image Cropper

A simple jQuery image cropping plugin.

Fakecrop

jQuery-Fakecrop Plugin takes a collection of images and automatically scale them to fit a custom-defined bounding box. This creates a "fake" cropping effect on those images; which produces convincing thumbnails.

CropZoom

CropZoom is a jQuery plugin to crop, zoom and rotate images.

Feel free to contact me for any help related to jQuery, I will gladly help you.

Monday, August 25, 2014

How to easily validate form and inputs using jQuery

jQuery jQuery Plugins jQuery Validation Validation Plugins

Validation is an important and required functionality for any application. Without proper validations of input, you application will die. So here is a jQuery plugin named "Valideasy " which helps you to validate your forms and input control without worrying about writing long lines of code.

Valideasy is a jQuery plugin that you can use in form validation without writing complex JS script. Everything's done via HTML attributes added to your form fields. And it is is compatible with all modern browsers, starting from IE7. This plugins also allows you to easily customize the validation error message.

You may also like:

Website

Feel free to contact me for any help related to jQuery, I will gladly help you.

Thursday, August 21, 2014

How to Integrate Facebook Login To Your Web App using jQuery

Facebook Facebook Login jQuery jQuery Plugins

Adding a Login with Facebook option to your web app is a pain! The process requires multiple requests to the Facebook API, and usually results in a messy callback soup that you get stuck managing.

A typical Facebook login flow usually requires the following sequence:
https://github.com/ryandrewjohnson/jquery-fblogin

window.fbAsyncInit
FB.init
FB.login
FB.api(/me)

You may also like:

Include script after the jQuery library:

<script src="/path/to/jquery.fblogin.js"></script>

You will need a valid Facebook App Id and the Facebook JS SDK loaded to use the plugin. After that simply call $.fblogin(options) where options is an object with the desired settings.

// This will login a user with Facebook and return user's public data
$.fblogin({
    fbId: '{FB app id}',
    success: function (data) {
        console.log('Basic public user data returned by Facebook', data);
    },
    error: function (error) {
        console.log('An error occurred.', error);
    }
});

Login requesting Facebook permissions:

// the permissions option is a comma separated list of extended FB permissions
$.fblogin({
    fbId: '{FB app id}',
    permissions: 'email,user_birthday',
    success: function (data) {
        console.log('User birthday' + data.birthday + 'and email ' + data.email);
    }
});

Visit the official website for documentation, sample and find out what other options are available.

Official Website

Feel free to contact me for any help related to jQuery, I will gladly help you.

Thursday, July 31, 2014

10 Free jQuery Social Sharing Plugins

jQuery jQuery Plugins Sharing Social Social sharing plugin

Social medium has become necessity for any website to grow and connect with readers. So here is collection of free jQuery social sharing plugins which allows you to easily create share button, follow button and get content recommendations which helps in you get more likes, shares, followers and keep them coming back.

You may also like:

Share Button

Simple, light, flexible, and good-looking share button.

socialProfiles

socialProfiles is a jQuery plugin to list social accounts and socialShare is a jQuery plugin to share any page with 46 icons.

floatShare

floatShare is a free jQuery plugin that allows your website visitors to share your web content on popular social media platforms with a single- click giving you good coverage and audience on multiple social media platforms.

jQuery prettySocial

jQuery prettySocial is a custom share buttons for Pinterest, Twitter, Facebook and Google Plus.

Socialite

Socialite provides a very easy way to implement and activate a plethora of social sharing buttons — any time you wish. On document load, on article hover, on any event!

Responsive Social Sharing Buttons

RRSSB is a solution for responsive social share buttons that you can easily customize it by tweaking a few variables. SVGs allow for tiny file size and retina support.

ClassySocial

ClassySocial is a jQuery plugin that lets your site visitors easily see what networks you belong to and visit them in a click of a button. Currently supports Facebook, Twitter, Dribbble, Socl, Youtube, Vimeo, Google Plus, Pinterest, LinkedIn, Instagram and e-mail.

HideShare

HideShare is a social sharing plugin that inserts social sharing links. Allows for sharing of current page with the option for sharing any link or image. Requires that Font-Awesome fonts and CSS be installed.

SocialCount

SocialCount is a small jQuery plugin for progressively enhanced, lazy loaded, mobile friendly social networking widgets. This plugin currently supports Facebook, Twitter, and Google Plus.

jQuery Social Sharing Buttons

Simple social sharing buttons with shared count ajax lookups.

Social Likes

Single style social like buttons with counters for jQuery: Facebook, Twitter, Google+, Pinterest and also popular Russian social networks.

Feel free to contact me for any help related to jQuery, I will gladly help you.

Wednesday, July 30, 2014

10 jQuery plugins for textarea element

jQuery jQuery Plugins jQuery Textarea plugins Textarea

Find a complied list of 10 jQuery plugins for textarea input element. These plugins allows you to set characters count limit, make them easily grow/expandable as and when user types.

You may also like:

jQuery Textarea Fullscreen

A jQuery plugin for textarea in fullscreen mode.

Autosize

Autosize is small jQuery plugin to allow dynamic resizing of textarea height, so that it grows as based on visitor input. To use, just call the.autosize() method on any textarea element.

jQuery Expandable Plugin

A jQuery plugin that auto-expands textareas to fit the contents as a user types.

NobleCount

NobleCount is a customizable jQuery plugin for a more improved counting of the remaining characters, and handling of resulting behaviors, of a text entry object, e.g. input textfield, textarea. Also, NobleCount supports pre-existing text within the text object and jQuery chaining.

flexibleArea.js

A jQuery plugin that dynamically updates textarea’s height to fit the content.This plugin works for textareas with fixed width as well as for textareas with fluid width. The CSS resize property is set to “none” by this plugin, which means you will not be able to manually resize the textarea.

Elastic

Elastic makes your textareas grow and shrink to fit it’s content. It was inspired by the auto growing textareas on Facebook. The major difference between Elastic and it’s competitors is it’s weight.

Expanding Textareas

Expanding Textareas is a jQuery plugin for elegant expanding textareas. The plugin creates a textarea clone with identical dimensions to that of the original.

AutoGrow textarea

AutoGrow textarea jQuery plugin that will auto-grow your text areas vertically (like facebook) or horizontally. It is based off a code snippet by dhruvbird. The plugin uses a hidden mirror textarea to calculate the idea height (and width) of the target text area.

jQuery Textarea Counter

This plugin allows you to set and limit user input by max characters within html textarea (it is only limited by characters other than words). It binds keyup, paste and drag events. The extra div is displayed under the textarea, which shows the current number of input characters and words.

jQuery Countable Plugin

A jQuery plugin that adds a character counter to inputs and textareas.

Feel free to contact me for any help related to jQuery, I will gladly help you.

Tuesday, July 15, 2014

10 jQuery plugins for creating floating elements

Floating Floating Plugins jQuery jQuery Plugins

Having floating element in your website is a new interesting thing. So here is a complied list of jQuery floating plugins to create floating elements like image, sharing buttons, header, footers, text labels, news, notifications, create floating message and many more...

You may also like:

floatShare

hcSticky

hcSticky is a cross-browser jQuery plugin that makes any element on your page float. It is used for sidebars on long pages, so they can be visible all the time user scrolls down the page, instead of a empty space visitors usually see. It is also used for floating top menus, emphasizing it to the user at all time.

floatThead

floatThead is a floating/locked/sticky table header jQuery plugin that requires no special CSS and supports window and overflow scrolling.

jsPanel

jsPanel is a jQuery Plugin to create highly configurable floating panels for use in a backend solution and other web applications.

jqFloat.js

jqFloat.js is a jQuery plugin that able to make any HTML objects appear to be "floating" on your web page. It helps create simple floating animation and make your websites come alive with these little "floating" object.

FlowupLabels.js

Augments form labels to behave like placeholders, but with a twist.

floatlabels.js

floatlabels.js is a jQuery plugin for the Float Label Pattern. The Pattern is easy to explain. On User Interaction with an input field the placeholder value moves up, and is displayed above the typed text.

Portamento

Portamento is a jQuery plugin that makes it simple to add sliding (aka "floating") panel functionality to your web page. All that's needed is some simple CSS and one line of JavaScript, and you're away! It works fine with floated and absolutely-positioned layouts, in all modern browsers and some not-so-modern ones too.

Stickyfloat

This plugin makes it possible to have a fixed position element that is relative to it’s parent. A normal fixed positioned element would be "out of context" and is very difficult to use in the most common situations with fluid designs. This plugin solves that problem with as little code as I could possible get it so it will run in the most optimized way, while also allow you to customize it in many important ways which might suit you best.

JVFloat.js

JVFloat uses CSS3 Transform and Transitions to perform the animations by default. Browsers that doesn’t support those will simply doesn’t show anything when user typing on the input elements. to fix that, enable/uncomment the legacy rules on the default CSS file, and comment out the CSS3 rules.

jQuery Floating Message Plugin

jQuery Floating Message Plugin is display the messages easily.

Feel free to contact me for any help related to jQuery, I will gladly help you.

Friday, July 11, 2014

5+ jQuery plugins to create Youtube like loading bar

jQuery jQuery Plugins jQuery YouTube Loading Animation Plugins Show Loading

YouTube red color progress bar which appears on top of a YouTube page while loading has drawn many attentions. And same loading animation can be seen on many websites these days. Wondering how to implement it and thinking of having same on your website? Well, here is the list of 5+ jQuery plugins and tutorials on how to make YouTube like progress bar for a page. Enjoy!!!!!

You may also like:

Loading Bar

A little jQuery plugin that will let you add a Youtube-like loading bar to all your ajax links.

jquery.ytLoad

A youtube inspired, simple, lightweight jQuery plugin to visualize ajax progress.

Make youtube like progress bar easily for

your page

A tutorial to implement youtube like loading bar.

NProgress

Slim progress bars for Ajax'y applications. Inspired by Google, YouTube, and Medium.

Pace

Pace is Automatic page load progress bar. Include pace.js and a CSS theme of your choice, and you get a beautiful progress indicator for your page load and ajax navigation.

YouTube like progress bar in jQuery

Ajax Loading Bars

A tutorial to implement youtube like loading bar.

Feel free to contact me for any help related to jQuery, I will gladly help you.

Tuesday, June 24, 2014

Latest jQuery Plugins released in June 2014

jQuery jQuery Plugin 2014 jQuery Plugins

Today we bring a list of latest jQuery plugins released in June 2014. These plugins are fresh, interesting, simple and lightweight. You may find them useful for your next project!!!

jQuery Eraser

jQuery Eraser is a jQuery plugin that makes an image erasable (with mouse or touch movements) This plugin replaces the targeted image by an interactive canvas that can be erased using touch or mouse inputs.

jQuery FontIconPicker

jQuery fontIconPicker is a small (3.22KB gzipped) jQuery plugin which allows you to include an elegant icon picker with categories, search and pagination inside your administration forms. The list of icons can be loaded manually using a SELECT field, an Array or Object of icons or directly from a Fontello config.json or IcoMoon selection.json file.

ScrollMe

A jQuery plugin for adding simple scrolling effects to web pages.

jReject

jReject is a simple, light-weight library designed to display a popup based on a the browser, specific browser version, specific platforms, or rendering engine. Provides full customization of the popup. Uses a small CSS file, and can easily be used on page load or during a specific page event. Also provides a flexible way to beautifully and cleanly display custom browser alternatives in the popup.

You may also like:

Amaran JS

Amaran JS is a jQuery plugin to create beautiful and stylish notifications with animations.

jNottery

jNottery is a jQuery plugin that lets you add notes and markers to webpages. All the data is encoded as a part of an URL which makes it easy to share or save.

CoverVid

CoverVid is a jQuery plugin to make your HTML5 video behave like a background cover image. It's so easy to use.

jQuery Scrollify

Scrollify is a jQuery plugin that assists scrolling and smoothly snaps to sections. Fully configurable and optimised for touch.

Shuffle Images

Shuffle Images let you display and shuffle multiple images by moving cursor around or several other ways to trigger.This plugin is perfect for when you want to save space while allowing users to take a peak at what other images are related to the one displayed. It can also be used to create an interactive animation on multiple static images at once.