Quantcast
Channel: jQuery By Example
Viewing all 248 articles
Browse latest View live
↧

10+ Free/Paid Tools for Cross-Browser Testing

May 14, 2014, 5:00 pm
$
0
0
For a developer code not working is a daily battle, same way cross browser testing is a challenge for a software tester. Since there is no standard method followed by the browsers for rendering websites and handling of JavaScript and CSS which in turn leads to defective functionality and tons of errors. Read Error/Exception handling in jQuery. But fortunately there are cross browser testing tools available which can ease the process of testing and minimize testing efforts.

Below is a complied list of both free and paid cross-browser testing tools. These tools will help you to test from legacy browsers to all modern browsers. These tool also allows you to test different version of any browser. For example, you can test the page in IE6, IE7 and till 11, which is great. In fact, you can test on more than 300 modern browser combinations. Enjoy!!!

You may also like:

saucelabs


Sauce Labs' platform supports interactive testing on over 250 browsers and platforms and it can even automate the testing process, running checks and reporting on your sites browser performance.


BrowserStack


BrowserStack provides live, web-based browser testing with instant access to every desktop and mobile browser.


BrowserShots


Browsershots makes screenshots of your web design in different operating systems and browsers. It is a free open-source online web application providing developers a convenient way to test their website's browser compatibility in one place. When you submit your web address, it will be added to the job queue. A number of distributed computers will open your website in their browser. Then they will make screenshots and upload them to our central dedicated server for your review.


Browsera


Browsera is a tool that tests the cross-browser layout of your website. You will see the differences and errors on your
site.


CrossBrowserTesting


Cross browser test your website in dozens of browsers with instant results. It allows you to test your AJAX, HTML forms, Javascript, and Flash in almost any browser and operating system - all from your own browser or with a remote VNC connection.


Browserling


Browserling runs the browsers on their servers and it provides fully interactive sessions, not static screenshots. The good thing about this tool is that it uses no flash, no applets and nothing to install. Powered entirely by <canvas> and javascript.


Spoon


Spoon.net is a browser sandbox to test multiple versions of current, beta or legacy web browsers. All you need to do is to log in, install a small plugin, select the browser you want to test and it will launch instantly.


BrowseEmAll


BrowseEmAll helps you to find cross-browser issues in minutes, optimize your sites for mobile devices, automate your
cross-browser testing and run different browsers side by side.


IETester


IETester is a free (both for personal and professional usage) WebBrowser that allows you to have the rendering and
javascript engines of IE10, IE9, IE8, IE7 IE 6 and IE5.5 on Windows 8 desktop, Windows 7, Vista and XP, as well as the
installed IE in the same process.


NetRenderer


NetRenderer is a tool for checking how your site is rendered in different versions of Internet Explorer. It’s free and
returns screenshots quicker than most other services.


IE Tab


A Firefox and Chrome add on to simulate IE browse with a single click of a button. This is a great tool for web developers, since you can easily see how your web page displayed in IE with just one click and then switch back to Firefox.

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

Create Android style pattern lock using jQuery

May 21, 2014, 2:49 am
$
0
0
Pattern Lock is a light weight plugin to simulate android like pattern lock mechanism for your hybrid app or for a website. It's easy to configure and style so you can have different type of pattern lock according to your need.


You may also like:

How to use it?


Include jquery library and patternLock.js and patternLock.css in your page. 
<link href="patternLock.css"  rel="stylesheet" type="text/css" />
<script src="jquery.js"></script>
<script src="patternLock.js"></script>
Then with simple initialization you have created your pattern lock. 
var lock = new PatternLock("#patternContainer");
You can create different size of patterns and also control the size and spacing between dots.

This plugin also comes with following additional things like Keep pattern hidden while drawing, use mapper and use at captcha for spam prevention.

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

jQuery on() - Click event not working for dynamically added element

May 26, 2014, 5:30 pm
$
0
0
My colleague got stuck into a problem where he was using jQuery on() method to attach the click event handlers but click event was not working for dynamically added elements. Although he knew that .bind() method doesn't work for dynamically added element but he was quite sure about .live() and .on(). Since .live() method is already deprecated, so .on() method was the only left choice.

But for him even the .on() was working for one of his scenario. First let's see the scenario. There is a HTML table with set of rows and every row with class "trDummy" being added dynamically. 
<table class="tbMain">
  <tr class="trDummy">
     <td>Some Data</td>
     <td><a href="#" class="toggle">Close</a></td>
  </tr>
</table>
And there was a close event attach to "tr" using .on() which does blah blah..
$(document).ready(function () {
  $('.trDummy').on('click', '.close', function () {
     //Do something...
  });
});
The close event was working fine for already added "tr" but it was not working for dynamically added "tr" rows. Is there anything wrong?
YES, there is. Official jQuery document about jQuery on() says,

"Event handlers are bound only to the currently selected elements; they must exist on the page at the time your code makes the call to .on()."

So click event works only for element present on the page. If it is added dynamically, it's not going to work. So, the solution is to delegate the events to that wrapper, instead of binding handlers directly on the dynamic elements. So always use static elements in which you add the dynamic control while using .on().
$(document).ready(function () {
  $('.tbMain').on('click', '.close', function () {
     //Do something...
  });
});
Related Post:Feel free to contact me for any help related to jQuery, I will gladly help you.
↧

15+ Useful jQuery Validation Plugins

May 29, 2014, 6:30 pm
$
0
0
Collection of 15+ Useful jQuery Form Validation Plugins.

Form validation is required for better user experience and for security purpose. But implementation of validation can give you serious headache. To save you from serious head bashing, here is a list of 15+ jQuery Form Validation Plugins, that will make form validation easy.

You may also like:

jQuery Validation Plugin


jQuery Validation Plugin makes simple clientside form validation trivial, while offering lots of option for customization.

The plugin comes bundled with a useful set of validation methods, including URL and email validation, while providing an API to write your own methods. All bundled methods come with default error messages in english and translations into 36 locales.


Validetta


Validetta is a tiny jQuery plugin which you can do client-side validation of your forms. It aims to decrease your burden with easy usage and flexible structure. It is currently supported in current stable releases of Chrome, Firefox, Opera, Safari as well as IE8 and up. This plugins works with every input control like text, list, radio button, checkboxes etc..


Formance.js


Formance.js is a jQuery library for formatting and validating form fields. It supports form fields like Credit card, Date, EMail, Phone number etc..


jQuery.validationEngine


jQuery validation engine is a Javascript plugin aimed at the validation of form fields in the browser (IE 6-8, Chrome, Firefox, Safari, Opera 10). The plugin provides visually appealing prompts that grab user attention on the subject matter.
Validations range from email, phone, and URL, to more complex calls such as ajax processing or custom javascript functions. Bundled with many locales, the error prompts can be translated into the language of your choice.


nextVal


nextVal is an easy-to-use, flexible and robust form validation plugin for jQuery. Each input should have a validate attribute. Elements can also have placeholder and title attributes. Also validate attribute can be passed multiple values.


bValidator


bValidator is a jQuery plug-in for client side form validation. It supports fully customized error messages defined with template and CSS, many validation functions (actions) like date, email, URL, IP address, validation of dynamic forms, customized validation functions and more.


Ajax Fancy Captcha


Ajax Fancy Captcha is a jQuery plugin that helps you protect your web pages from bots and spammers. We are introducing you to a new, intuitive way of completing “verify humanity” tasks. In order to do that you are asked to drag and drop specified item into a circle.


jQuery Credit Card Validator


jQuery Credit Card Validator detects and validates credit card numbers. It’ll tell you the detected credit card type and whether the number length and Luhn checksum are valid for the type of card.


Goodness


Goodness is a light jQuery form validation plugin. There are no included validation rules*, feedback markup or error styles. Instead, you make the rules and use the names as classes in your own markup. When the form is validated, classes will be added or removed from your markup to match your defined styles and animation.


Validity


jQuery.validity is a plugin designed to aid in the configuration of clientside form-validation. Validity was concieved with three goals which are Easy setup, Unobtrusive JavaScript and Customizable Appearence. In style, validity makes use of jQuery's selector engine and follows its pattern of method chaining.


Motion Captcha


MotionCAPTCHA is a jQuery CAPTCHA plugin, based on the HTML5 Canvas, requiring users to sketch the shape they see in the canvas in order to submit a form. At the moment, it’s just a proof-of-concept – it only uses client-side gesture recognition, and doesn’t really have IE support.


Creditly.js


Creditly.js is a jQuery plugin for creating an input masked form with input validation for your customers that makes it easier to input credit card information.


Formly


Formly is a jQuery Plugin for easily adding cross-browser styling and validation to forms. Formly makes adding forms to your site a bit more exciting. Easily add style, validation, and a more impressive user interaction with a single function.


NumBox


The NumBox jQuery Plugin helps ensure that a numeric keyboard will pop-up on mobile devices when a number is entered. It offers real-time validation as you type plus display formatting for mobile devices and desktop browsers, is designed for HTML5's input type="number" elements, and provides a number of customization options.


Pliant


Pliant is a jQuery validation plugin that allows easy extending/overriding of rules, as well as defining field validation by html comments.


Happy Js


Lightweight form validation for jQuery or Zepto.js


Strength.js


The ultimate jQuery password input plugin. Featuring secure strength indicator and hide/show password.


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

Top 10+ Newest jQuery Popup window plugins

June 2, 2014, 8:00 pm
$
0
0
Popup Windows are great way to show news, alert, errors, notice, information, modal windows, dialog or take inputs. Earlier I had posted about Top 10+ jQuery Popup window plugins and that list was just awesome.

But after that many new popup window plugins are released and its been while since this list was updated. So here is a list of Top and Newest jQuery Popup window plugins which are free, easy to integrate and use. Enjoy...

You may also like:

PopEasy


PopEasy is a light weight jQuery plugin that is a must have for any developer to easily create modal windows. Put focus on important elements by applying a mask to your page and opening a customizable pop up modal window.


SimpleModal


SimpleModal is a lightweight jQuery Plugin which provides a powerful interface for modal dialog development. Think of it as a modal dialog framework. SimpleModal gives you the flexibility to build whatever you can envision, while shielding you from related cross-browser issues inherent with UI development.


CoverPop.js


CoverPop is a lightweight lightbox popup plugin with cookie integration. Style agnostic. Responsive friendly. If you are trying to show up a lightbox popup to first time visitors that is easily styleable and has cookie integration, this is for you.


Remodal


Remodal is a flat, responsive, lightweight, easy customizable modal window jQuery plugin with declarative state notation and hash tracking.


popModal


popModal is a powerful and versatile jQuery modal plugin which allows you to create popup windows for multiple purposes like hint modal, notify modal, dialog modal and much more.


jBox


jBox is a powerful and flexible jQuery plugin, taking care of all your modal windows, tooltips, notices, lightbox and more.


LiteBox


LiteBox is a versatile, auto detecting content, lightbox/modal window for use with images, embedded content (YouTube, Vimeo, Daily Motion and KickStarter), iframes and inline html.


Vex


Vex is a modern dialog library which is highly configurable, easily stylable, and gets out of the way. It's tiny, has a clear and simple API, works on mobile devices, and can be customized to match your style in seconds.


Msgbox


Msgbox is an versatile jQuery popup plugin for creating modals, dialogs, message boxes that are draggable, themable, resizable and fully customizable.


Simple jQuery Popup Plugin


This is a simple jQuery popup plugin with transition effect.


FBModal


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


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

6+ Lightweight jQuery Slider Plugins

June 4, 2014, 8:00 pm
$
0
0
Collection of 6+ Lightweight jQuery Slider Plugins.

jQuery slider plugins are indeed useful but they also add extra overhead on bandwidth (Common jQuery Mistakes) as reference to their library is required. That's why one has to be careful while choosing the plugin. There are tons of jQuery slider plugins available on web to choose from. More choice leads to more confusion.

But just relax as we have collected and complied a list of jQuery Slider Plugins which are lightweight and tiny in size to save bandwidth and helps to load webpage faster. Enjoy..

You may also like:

Unslider (2.6KB)


Unslider is a lightweight jQuery slider plugin that just slides content without fancy effect and unnecessary markup. It's fluid, flexible and minimal. It is responsive, works cross-browsers and also support keyboard navigation.


ResponsiveSlides (4KB)


ResponsiveSlides.js is a tiny jQuery plugin that creates a responsive slider using elements inside a container. ResponsiveSLides.js works with wide range of browsers including all IE versions from IE6 and up. It also adds css max-width support for IE6 and other browsers that don't natively support it. Only dependency is jQuery (1.6 and up supported) and that all the images are same size.

Biggest difference to other responsive slider plugins is the file size (1.4kb minified and gzipped) + that this one doesn't try to do everything. But for only minified version the file size is 4KB.


Light Slider (5KB)


jQuery lightSlider is a lightweight responsive Content slider with carousel thumbnails navigation (5KB minified). Its fully responsive, supports touch devices, supports all major browsers and also have keyboard support.


jQuery Slider² (5KB)


A small and lightweight jQuery-plugin to create simple inline slideshow.


simpleSlider (6KB)


simpleSlider is a jQuery "Anything" slider, simple and easy to setup and very customizable. It slides anything (Images, Text, Videos, HTML), works without any CSS and provide option to control sliding speed.


Basic jQuery Slider (7KB)


Basic jQuery Slider has been developed to be as simple and lightweight as possible. Only the essential functionality has been included combined with clean semantic mark-up. This means instead of removing features and bending it to suit your needs, you can use this slider and as a base and with a little bit of CSS and JavaScript knowledge, you can extend it to be as feature rich, or as simple, as you need.


Glide.js (9KB)


Glide.js is responsive and touch-friendly jQuery slider. Based on CSS3 transitions with fallback to older broswers. It's simple, lightweight and fast. Designed to slide, no less, no more.


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

Detect IE11 using JavaScript/jQuery

June 9, 2014, 10:30 pm
$
0
0
In this post, find JavaScript/jQuery code to detect IE 11. Your old code detect IE browser either using navigator.userAgent or $.browser.msie will not work for IE 11 as the User Agent string for IE 11 is changed.

Previously I had posted about Detect Browsers using jQuery, but with the release of jQuery 1.9$.browser feature was removed. But to support legacy code, they have released jQuery Migrate plugin to detect deprecated and removed features, or to restore old features for those sticky situations where you need old code to run with new jQuery. You can read more about How to migrate older jQuery code to jQuery 1.9+

You may also like:
The user agent string for IE11 on Windows 8.1 is, 
Mozilla/5.0 (Windows NT 6.3; Trident/7.0; rv:11.0) like Gecko
And if you compare with earlier version of IE then you will find the "MSIE" token is no longer present. For the earlier version of IE, "MSIE" token was present. Take a look at IE10 user agent string. 
Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0)
So the code to find index of "MSIE" in navigator.userAgent will not work for IE11.
var sAgent = window.navigator.userAgent;
var Idx= sAgent.indexOf("MSIE");
So to detect IE11, all you need is to look for "Trident/7.0" in user agent string. Here is updated code to detect all versions of IE including IE 11. 
function GetIEVersion() {
  var sAgent = window.navigator.userAgent;
  var Idx = sAgent.indexOf("MSIE");

  // If IE, return version number.
  if (Idx > 0) 
    return parseInt(sAgent.substring(Idx+ 5, sAgent.indexOf(".", Idx)));

  // If IE 11 then look for Updated user agent string.
  else if (!!navigator.userAgent.match(/Trident\/7\./)) 
    return 11;

  else
    return 0; //It is not IE
}

if (GetIEVersion() > 0) 
   alert("This is IE " + GetIEVersion());
else 
   alert("This is not IE.");
Feel free to contact me for any help related to jQuery, I will gladly help you.
↧

How to validate all countries phone numbers using jQuery

June 15, 2014, 8:30 pm
$
0
0
Earlier I had posted about "Validate phone numbers using jQuery" but that code just validates for valid input, it doesn't check for format of phone number. But recently a jQuery plugin named "International Telephone Input"is released which validates all the international phone numbers along with country code.

International Telephone Input jQuery plugin for entering international telephone numbers. It adds a flag dropdown to any input, which lists all the countries and their international dial codes next to their flags.


You may also like:

Features


  • In the country dropdown you can navigate by typing, or using the up/down keys
  • Selecting a country from the dropdown will update the dial code in the input
  • Typing a different dial code automatically updates the displayed flag
  • Country names in the dropdown also include localised versions in brackets
  • Lots of initialisation options for customisation, as well as public methods for interaction

How to use it?


To use this plugin, all you need to do is to download the latest version and then link the required stylesheet and reference to plugin library.
<link rel="stylesheet" href="build/css/intlTelInput.css">
Add the plugin script and initialise it on your input element 
<input type="tel" id="mobile-number">

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="build/js/intlTelInput.min.js"></script>
<script>
  $("#mobile-number").intlTelInput();
</script>

Examples


  • Validation:
    Use Google's libphonenumber for validation
  • Lookup user's country:
    Use IP address lookup to set the default country to the user's country
  • Country sync:
    Access the country data to create a separate country dropdown for an address form, and then listen for change events to keep the two dropdowns in sync
  • European countries:
    Only show European country codes
  • Styling:
    Displays the two different styling settings
  • Modify country data:
    Modify the data to only show localised country names

This jQuery plugins also provides options for customization like for setting default country, dial code delimiter and many more. You can visit the official website for more information.

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

FancyText - Textbox Effects Plugin

June 16, 2014, 3:30 am
$
0
0
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.
↧
↧

Make Your Credit Card Input Form Better

June 18, 2014, 9:00 pm
$
0
0
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.
↧

Latest jQuery Plugins released in June 2014

June 23, 2014, 8:30 pm
$
0
0
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.
↧

Don’t Use jquery-latest.js

July 3, 2014, 10:08 pm
$
0
0
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.
↧

Different ways of handling errors in jQuery.ajax

July 7, 2014, 8:30 pm
$
0
0
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.
↧
↧

5+ jQuery plugins to create Youtube like loading bar

July 10, 2014, 8:30 pm
$
0
0
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.
↧

10 jQuery plugins for creating floating elements

July 14, 2014, 10:58 pm
$
0
0
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.
↧
Search

10 jQuery plugins for textarea element

July 29, 2014, 8:30 pm
$
0
0
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.
↧

10 Free jQuery Social Sharing Plugins

July 30, 2014, 8:30 pm
$
0
0
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.
↧
↧

How to Limit Number of Characters in Textarea using jQuery

August 6, 2014, 8:30 pm
$
0
0
Find jQuery code to limit characters inside textarea control. Below code also handles copy + paste and on drop event.
$(function () {
    var nMaxLength = 150;
    $("#txtDesc").keydown(function (event) {
        LimitCharacters($(this));
    });
    $("#txtDesc").keyup(function (event) {
        LimitCharacters($(this));
    });

    function LimitCharacters(txtDesc) {
        if (txtDesc.val().length > nMaxLength) {
            txtDesc.val(txtDesc.val().substring(0, nMaxLength));
        } else {
            var nRemaining = nMaxLength - txtDesc.val().length;
            $('.remaining').text(nRemaining);
        }
    }
});
To stop drag and drop in textarea, simply set onDrop="return false;". 
<textarea name="txtDesc" rows="4" cols="50" id="txtDesc" onDrop="return false;" style="width:70%;"></textarea>
You may also like:Feel free to contact me for any help related to jQuery, I will gladly help you.
↧

How to copy text from one input textbox to multiple textboxes using jQuery

August 13, 2014, 9:42 pm
$
0
0
In this post, find jQuery code to copy text from one input textbox to multiple textboxes while typing or in real time or on paste. To achieve this, give a same class name to all the textboxes in which text needs to be copied.

For example, in the below code all the textboxes are having same class named "copyText".
<input type='text' id='txtFirst' class='copyText' /><br/>
<input type='text' id='txtSecond' class='copyText' /><br/>
<input type='text' id='txtThird' class='copyText' /><br/>
Now, attach "keyup", "change" and "paste" event on "copyText" class and then assign the current input value to all other textboxes.
$(document).ready(function(){
    $('.copyText').on('keyup change paste', function(e){
        $('.copyText').val($(this).val())
    });
});
You may also like:
Above code will keep all the textboxes in sync. But if you want to copy text from first input to all others not vice-versa then attach "keyup", "change" and "paste" event on first input text only.
$('#txtFirst').on('keyup change paste', function(e){
     $('.copyText').val($(this).val())
 });
See Complete Code
Feel free to contact me for any help related to jQuery, I will gladly help you.
↧

5 Chrome Extensions for jQuery

August 17, 2014, 9:30 pm
$
0
0
Find a complied list of 5 Chrome extension in relation with jQuery. These extension helps in speedy development, testing and debugging your jQuery code right in your browser.

You may also like:

jQuery Audit


jQuery Audit creates a sidebar in the Elements panel containing jQuery delegated events, internal data, and more, as live DOM nodes, functions, and objects.



jQuerify


Inject jQuery latest stable release version into any page you want or indicate presence of jQuery if it is included on page already.



jQuery Maxify


This extension maxifies all minified jQuery references on a page can be toggled on and off by clicking the extensions icon.



jQuery Reference


jQuery Reference Search Extension allows you to search about any jQuery reference without moving to new tab or window.



All Cheat Sheets


jQuery cheat sheet right in your browser for quick help!!!!



Feel free to contact me for any help related to jQuery, I will gladly help you.
↧
Viewing all 248 articles
Browse latest View live
Search