Monday, August 18, 2014

5 Chrome Extensions for jQuery

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

Thursday, August 14, 2014

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

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

Thursday, August 7, 2014

How to Limit Number of Characters in Textarea using jQuery

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

Thursday, July 31, 2014

10 Free jQuery Social Sharing Plugins

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

Wednesday, July 30, 2014

10 jQuery plugins for textarea element

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

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