Tuesday, July 15, 2014

10 jQuery plugins for creating floating elements

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


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.


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.
Read more...

Friday, July 11, 2014

5+ jQuery plugins to create Youtube like loading bar

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.
Read more...

Tuesday, July 8, 2014

Different ways of handling errors in jQuery.ajax

While using jQuery ajax, one needs to be very careful while handling errors as there are chances that your ajax request gets failed for any reason like server didn't respond, database error or any server side exception. So it is best practice to always handle errors while using jQuery.ajax().

To handle errors, there are 3 different ways which can be categorize into
  • Local Events
  • Global Events
  • Using Promise Interface
You may also like:

Local Events

This is most common way of handling error. These are callbacks that you can subscribe to within the Ajax request object, like so:
$.ajax({
  url: "demo.php",
  type: "GET",
  dataType: "html",
  success: function (data, status, jqXHR) {
    console.log("In local success callback.");
  },
  error: function (jqXHR, status, err) {
    console.log("In local error callback.");
  }
})
As you can see in above code, with ajax settings 2 callbacks events (success and error) are also attached. Success callback will be called when ajax request is executed properly on server with no error. And error callback will be called in case of any error. Within the callback, you can also get the HTTP status and exception object that was thrown.

Note: The success() , error() , and complete() callbacks are deprecated as of jQuery 1.8.

Global Events

You can also attach success and error callback globally. As name suggest globally, so these callbacks will be called for every ajax request made from the page. These events are triggered on the document, calling any handlers which may be listening.
$(document).ajaxSuccess(function (e, jqXHR, settings) {
  console.log("In global success callback.");
});

$(document).ajaxError(function (e, jqXHR, settings, err) {
  console.log("In global error callback.");
});
So above callbacks will be called for every ajax request on the page. However, there is an way to disable these global callback. Global events can be disabled for a particular Ajax request by passing in the global option, like so:
$.ajax({
   url: "test.html",
   global: false,
   // ..
});
You can find list of all Global ajax event here.

Using Promise Interface

Now, this is a new way to handle jQuery ajax callback using Promise interface. The $.ajax() method returns jQuery XMLHttpRequest (jqXHR)object and jqXHR implements the Promise interface. So now with $.ajax() you can assign multiple callbacks on a single request, and even to assign callbacks after the request may have completed. Available promise methods are ".done", ".fail", ".always" and ".then".
$.ajax({
  url: "demo.php",
  beforeSend: function( xhr ) {
    xhr.overrideMimeType( "text/plain; charset=x-user-defined" );
  }
}).done(function(data) {
    console.log("Success");
}).fail(function(jqXHR, status, err) {
   console.log("Error");
});
You might be finding this similar to local events, but they are not. The jqXHR object returned by $.ajax() and used by various promise callbacks.

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

Friday, July 4, 2014

Don’t Use jquery-latest.js

Previously I had posted about "How to always reference latest version of jQuery" as to always use latest version of jQuery without even updating your referencing code through jQuery CDN.

But jQuery team now says "Don’t Use jquery-latest.js" as their CDN had an issue that made the jquery-latest.js and jquery-latest.min.js files unavailable for a few hours in some geographical area. Yesterday, they have posted on their blog and below is the excerpt of the blog post.

"Earlier this week the jQuery CDN had an issue that made the jquery-latest.js and jquery-latest.min.js files unavailable for a few hours in some geographical areas. (This wasn’t a problem with the CDN itself, but with the repository that provides files for the CDN.) While we always hope to have 100% uptime, this particular outage emphasized the number of production sites following the antipattern of using this file. So let’s be clear: Don’t use jquery-latest.js on a production site."

You can read the complete post here.

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

Tuesday, June 24, 2014

Latest jQuery Plugins released in June 2014

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.


Crossfade.js


Crossfade.js is a tiny (~3kb) jQuery plugin for crossfading images as you scroll down a page.


Instagram Lite


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


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

Thursday, June 19, 2014

Make Your Credit Card Input Form Better

Card will take any credit card form and make it the best part of the checkout process. Everything is created with pure CSS, HTML, and Javascript and no images required.


You may also like:
Card can be used in forms where you have multiple inputs that render to a single field (i.e. you have a first and last name input).


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

Monday, June 16, 2014

FancyText - Textbox Effects Plugin

FancyText is a text box plugin that automatically converts standard HTML input element to an animation composite control, with lots of transitions too choose from. It is a combination of jQuery and CSS3 animations.


You may also like:
Using FancyText is very simple, add input controls to your HTML document and provide customization via custom attributes and call the FancyText initializer function.


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