5 best jQuery radio button and checkbox styling plugins

Sometimes its good to utilize great work done by different authors working in different fields rather than reinventing the wheel again and again. There are awesome Git projects that people are working collaboratively to produce something really good and then there are independent authors too. In this post I will highlight some exceptional jQuery plugins that will transform your old styled checkboxes and radio buttons to something that looks cool, at least if you see from my eyes :) Anyway lets get started iCheck I am a huge fan of this plugin and flexibility it offers. It also comes with a few themes that you are able to choose from. You can get iCheck from https://github.com/fronteed/iCheck Demo can be viewed from http://damirfoy.com/iCheck/ At the time of writing there are 8 contributors to this project. uniform very flexible, and CSS so simple that you can style yourself to suit your website theme. And it actually works with pretty much all form elements and is available under MIT license You can get uniform from https://github.com/pixelmatrix/uniform and demo is included within the zip file that you will download. At the time of writing there 23 contributors to this project. prettyCheckable As the name states, it will transform your radio buttons and checkboxes to look, let me say very pretty. I like this plugin, good thing is that it is compatible with IE7+ yay! You can checkout demo for this plugin here  Project is hosted at https://github.com/arthurgouveia/prettyCheckable   jQuery Radiobutton This is also a good option if you like something that is simple but stable. CSS styling is just way too simple. Also if you are looking to transform your radio buttons to  iPhone styled switches Project is hosted on https://github.com/tomekwojcik/jQuery-Custom-Radiobuttons And demo can be reached here   ezMark This was the first one I have ever tried for prettifying my radios and checkboxes. … [Read more...]

ExtJS Grid Multi-line rows

Yes, I heard you saying why there is no option or setting to force cell to wrap. Good news is that its very easy to achieve this. Without me wasting much of you valuable time lets jump straight to the point. Lets form a grid first. ExtJS Grid code [crayon-5477309c2aaef605612727/] Now when you look at the grid you will get something like this The Markup [crayon-5477309c2ab0e227594607/] Above element is necessary because we are rendering our grid to #playcontainer. Outer #myGrid is there for a reason. I will tell you in a bit why. What we get because of above is something like this   Now lets add a very basic CSS rule as shown below [crayon-5477309c2ab1a760152311/] When we add above CSS rules on our page lets see what difference it will make That made a a huge difference. And we get what we expected. Anyway this solution will lead to affect all grids but making a very basic change to our CSS rule we can overcome this [ltu] As you see that in our markup we have a parent container with ID: myGrid so lets utilize that [crayon-5477309c2ab26307792638/] [/ltu] And that is it. Grid inside our marked id myGrid will be the only one that will get affected by our CSS change. Demo Demo is available for you to have a look from this link If you know something better in terms of solutoin then do leave your solution in your comments so that other readers can benefit from it. I hope this helps. Cheers, … [Read more...]

How to detect Facebook Unlike

Hi Guys, Let me show you how to detect the Facebook Unlike. Without wasting much time lets jump straight to the point. First up is to get our markup set up The Markup [crayon-5477309c2c30d366074662/] Above is just basic markup that is required for your Like button as picked from the Facebook docs. Next up will be converting our above container to a Facebook like button, here is how its done The JavaScript FB.init is the main thing that we should be concentrating on and for us the most important properties will be appId, xfbml This code should be placed directly after the opening  tag. [crayon-5477309c2c31d721235841/]  FB.event.subscribe("edge.remove",function) is the magic bit. What we are telling FB API is to tell us if user have removed his/her Like for the current URL in href attribute The Demo Demo uses my jQuery plugin to generate Facebook Like buttons  DEMO   Most notable part as stated above is to use fbxml so that we can make use of event subscription. Normal iFrame code doesn't seem to work with events and stuff. Important: We can only detect user action on you FB Like button if that happens on your website. If user use their Facebook page to administer their likes and unlikes, there is no way we can tell then. Resources https://developers.facebook.com/docs/reference/javascript/FB.Event.subscribe/ I hope that this post was useful. As always if you have anything to add, comments are open and stage is all yours Cheers … [Read more...]

jQuery plugin to create Facebook like button with callabacks (Like and Unlike)

There are times when you want to know if user Facebook Liked or Unliked your page. Facebook provide an API for that, also there are times when you want to generate Like button on the fly rather including the code upfront in your HTML file. This requirement can be result of N ideas. My first attempt for generate Facebook Like buttons on the Fly where user/developer is able to detect if User Liked or Unliked your page is below Without wasting more of your precious time lets jump straight into our code Plugin Name jcFacebookLike.js The Markup Here is an example markup required to use this plugin. [crayon-5477309c2ce14165076104/] The Plugin Code You should always get the latest version from GIT. The below source can be dated in many ways, Link to GIT hosted files is provided at the end of this post [crayon-5477309c2ce2b528301860/] Usage Here is one example usage [crayon-5477309c2ce48817462290/] Donate Yes! It take time and effort so please consider donations You can choose your own amount. Developing this plugin like these toke a lot of effort and time; days and weeks of continuous voluntary unpaid work. If you like this plugin or if you are using it for commercial websites, please consider a donation to the author to help support future updates and development.         Main uses of Donations Web Hosting Fees Cable Internet Fees Time/Value Reimbursement Motivation for Continuous Improvements Demo If there isn't any demo, it doesn't work. So here is a link to demo to make sure it works http://jaspreetchahal.org/examples/jquery-examples/likes/jcFacebookLike.html   Get Facebook API key https://developers.facebook.com/apps License MIT/GPL Fork it on Git https://github.com/jaschahal/jcFacebookLike I hope that this plugin will help you. Just in case if you find a bug or you can improve the above code please leave your comments. First attempt does always have room for … [Read more...]

How to Lighten or Darken HEX or RGB color in PHP and JavaScript

Hi Guys, Just a thought and following up on my previous post is a function that you can use in your PHP code to brighten or darken a HEX or a RGB color, For color manipulation in JavaScript you can look at this cool library https://github.com/jfsiii/chromath PHP Function Below is the function you can use to make on the fly adjustment to colors [crayon-5477309c2db01957068298/] For sure above function can have less lines but for simplicity and readability I think putting it as above makes sense. Usage - Lightning Colors [crayon-5477309c2db14371028893/] Usage - Darkening Colors [crayon-5477309c2db20026362832/]   Now lets check the JavaScript implementation of this function. JavaScript Equivalent Function For Lightening and Darkening HEX or RGB Colors You can definitely do better job with shift operators but I always think of readability of code first. The code below can be shrunk but at least you get the Idea what's happening in a typical way [crayon-5477309c2db2c509643641/] Usage 1 - Lighten [crayon-5477309c2db3d565349948/] Now lets check how we can use the same function to Darken our Hex or RBG colors Usage 2 - Darken [crayon-5477309c2db4b468408776/] I hope this helps. Got a better implementation of these function. I would love to know and this will help my readers too. Share it, leave your comments Cheers   … [Read more...]

jQuery Plugin to Generate Google plus one +1 buttons

Hi Guys, For a new project of mine there were couple of requirements which gave birth to a couple of useful jQuery code snippets or in other words plugins. One of them is called jcPlusBtn.js This is a little jQuery code that you can use as a plugin that will page Google Plus button on any HTML element, callbacks are supported. Lets get started The jQuery Code [crayon-5477309c2e8fe516076162/]   The Markup What we need is pretty much a DIV or any other container element to place our Google Plus button. [crayon-5477309c2e912703367419/]   Options [crayon-5477309c2e91d778259784/]   Usage This plugins is  rather easy to use and an example of this is shown below [crayon-5477309c2e929024768174/]   Its that simple actually. Demo Nothing is complete without a demo. See this plugin in action here http://jaspreetchahal.org/examples/jquery-examples/likes/googleplusone.html Donate If you like this Plugin, please consider donating You can choose your own amount. Developing this plugin like these toke a lot of effort and time; days and weeks of continuous voluntary unpaid work. If you like this plugin or if you are using it for commercial websites, please consider a donation to the author to help support future updates and development.         Main uses of Donations Web Hosting Fees Cable Internet Fees Time/Value Reimbursement Motivation for Continuous Improvements   License This plugin is available under MIT license You can read it here http://opensource.org/licenses/mit-license.php Download Code is hosted on Google Code and you can find it here https://code.google.com/p/jcplusbtn/ There were couple of more things that I would have liked to do with the callbacks, but I have left it to you to handle the callback properly. I hope that this helps, Don't forget to donate if it does :) Cheers,   … [Read more...]

Image blur using canvas html5

G'day, While I was looking around for something with my not so relevant queries, I found StackBlur which does pretty good Job to blur an Image by introducing a Canvas layer on top of the Image. I guess it make sense to do it that way. The results is something that took me by surprise. They are pretty close to what we are used to in Photoshop filter called Gaussian blur. Let me take you through this and we will also build a jQuery plugin to generalize few things in the end. A simple functional Image blur example can be reached from the link provided below Demo You can view the demo here http://jaspreetchahal.org/examples/jquery-examples/jblur/image_blur_example.html Now that you've seen the demo lets cover it in detail. First get hold of latest StackBlur from here Scripts and Styles Below are the scripts and stylesheet that you will need to recreate the example [crayon-5477309c2f3e0855287691/] [crayon-5477309c2f3ef191056581/] The HTML [crayon-5477309c2f3f9245392747/] [crayon-5477309c2f403864318519/] The above stuff can be reduced to just couple of lines of code, but I just copy pasted from my code when I was trying to do a few bits and pieces but you'll get the Idea. The CSS Beautify it a little bit, but thats just me, for others I am spoiling the look and feel :) The JavaScript Below is the Javascript that we need to introduce a slider and stuff [crayon-5477309c2f40e904918603/] What above code does is, it is introducing a slider and binding the stackBlurImage()  function to the slide event so that our slider value become the blur radius. Above works but what if we have something similar to this [crayon-5477309c2f41d499977622/] Well thats exactly what we will be looking at next, New revised Markup [crayon-5477309c2f428013391980/] Our Little jQuery Plugin Code Please note that this plugin does not auto generate the slider control, slider control that is used in the example above, it from jQuery … [Read more...]

jcautosave – A simple jQuery plugin to autosave data on ContentEditable Containers or Form fields

Hi Guys, Well for a project sometime back I have to do a plugin which I never end up sharing. So I thought why not bring back the old stuff back to life. Here is that plugin which I named as jcautosave The code is available on GIT and is available for FREE under GPL license Lets check on some key details   Example Markup [crayon-5477309c3033d929088347/] Now lets check on how we can make use of this plugin. Example Usage [crayon-5477309c30353856478799/] Options You can pass any of these options to the .jcautosave() function: Option Type Default Description sendAutoSaveOn enum event event || intervalbased on this setting you must also supply a value for event || interval property, In case the value is set to interval A post if made every interval milliseconds else it is fired on an event. url string null Url use to post ajax data. You can also use data-url in the input/div tag itself to sepecify the target URL. event string change See jQuery.bind for options interval int 5000 This specify the interval just in case selected auto save mechanism is interval success function function(data,$jqueryEl){} Once Ajax call is successfully completed error function function(error,$jqueryEl){} Callback function in case there is an error before function function(data,$jqueryEl){} Callback function on "beforeSend" after function function(data,$jqueryEl){} Callback function to cleanup anything and is triggered after success/error sendUpdatesWhenDataChangeIsDetected bool true This settings tries to check if there is any data change only then send the ajax post else any of ajax related logic will not fire Demo A demo has been made available from here http://jaspreetchahal.org/examples/jquery-examples/jcautosave/example.html Dependencies jQuery 1.5+ Works with Tested on all major browsers' latest releases   Donations If you like this … [Read more...]

jQueryBar – A jQuery Notification bar plugin

Hi Guys, Working on a project I wanted to have a notification bar that is flexible enough to me to include my Youtube Video Any number of messages My social links Allow user to show hide it Auto adjust margins where applicable and many other requirements So I begun developing jQueryBar Here is a quick video on what could be achieved rather than writing it down I just created a video [ltu] Video httpvh://www.youtube.com/watch?v=GXJZJFSrIiU Demos and all are hosted on my jquerybar.com website so you can go check them out. I am pretty hopeful to add more in future. But here are some settings that are possible. jQuerybar settings Here are settings that you can make use of with jQueryBar. Setting Explanation notificationAreaHeight Height of your Notification Bar. Minimum 40 recommended. enforced 40 if below 40. This will auto adjust if you try to include a Youtube Video notificationAreaCollapsedHeight Minimum height of collapsed notification bar. notificationAreaCollapsedBarBackground Backgournd color of collapsed notification bar notificationAreaPadding Padding for notification bar element. Careful with super high values notificationAreaBackground Backgroud color for your notification bar notificationAreaBorderSize Border size of your notification bar, Left and Right border size will always be ZERO notificationAreaBorderColor Notification area border color notificationAreaBorderRadius:8, I am not sure if you will end up using this but this setting defined border radius and will only be applied to either top-right, top-left or bottom-left, bottom-right corners notificationAreaPosition default value is fixed-top Other values fixed-topkeep notification bar always visible at the top document-topSrolls out of view with user scroll fixed-bottomkeep notification bar always visible at the bottom notificationAreaShadow Displays a shadow under the … [Read more...]

jQuery Javascript create unique ID for an Element

Hi Guys, There are time when you want to create a unique ID on the Fly either from your JQuery plugin or your usual JavaScript Code Here are couple of ways I use without extending the Object class First method [crayon-5477309c30dbd793830356/] Usage You can use the above method to return uniq id as shown below [crayon-5477309c30dcd722487243/] [crayon-5477309c30dd8042999700/] Second method In second method we will use a counter as shown below [crayon-5477309c30de3933424302/] Above method use an object with has one property counter and a method get Usage Above can be utilized in your code as shown below [crayon-5477309c30dee299378823/] [crayon-5477309c30df8593637703/] I have typed above code directly in this post rather than copy pasting If you find any error in above method or want to suggest any other method please leave your comments. Cheers,           … [Read more...]