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 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 <body> tag. 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. 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 Usage Here is one example usage 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 improvement. Cheers … [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 For sure above function can have less lines but for simplicity and readability I think putting it as above makes sense. Usage - Lightning Colors Usage - Darkening Colors 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 Usage 1 - Lighten Now lets check how we can use the same function to Darken our Hex or RBG colors Usage 2 - Darken 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 The Markup What we need is pretty much a DIV or any other container element to place our Google Plus button. Options Usage This plugins is rather easy to use and an example of this is shown below 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 The HTML 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 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 Well thats exactly what we will be looking at next, New revised Markup 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 UI library Usage Here is a bit of fun app where we increase or reduce blur to give a nice effect Demo http://jaspreetchahal.org/examples/jquery-examples/jblur/image_blur_example_on_off.html I hope this helps you one way or … [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 Now lets check on how we can make use of this plugin. Example Usage 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 Plugin, please consider donating You can choose your own amount. … [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 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-top Srolls 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 Usage You can use the above method to return uniq id as shown below Second method In second method we will use a counter as shown below 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 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...]
ExpressJS exposing variables and session to Jade templates
Hello, Sometimes or should I say most of the time or should I say Always you will need to access variables from your templates no matter whether its Jade templating engine or Smarty (in php) or other MVC framework. You cannot have a working dynamic application if you can't access variables from your controllers. In this post I will highlight a couple of points that may help you out when building NodeJS application using ExpressJS and Jade There are 2 things to consider here Will the variable be available to all templates Will the variable be available to one or two templates. How to deal with Variable availability to all templates First technique is to use app.locals So in your controller or boot js file if you have this object Then in Jade template you can access above object as Example template On the other hand you can also use ExpressJS's settings object as shown below Accessing Sessions I would prefer app.locals over the app.set (this is just me) With regards to sessions you use sessions by telling express using app.use(express.cookieSession()); This will populate req.session and will have all your session based data. You can use the technique below to pass on session variable to your jade views Make sure that you have above code before this line of code If you set session property name as shown below then session property can be accessed like this in Jade template Passing variables to single template Now on the other hand if you would like to expose your variable to a view you are rendering here is what you can do to pass on variable to your view As you can see that we are able to access two variable from our Jade view path pageTitle I hope that this helps. I am pretty sure that this post can be improved with input from you. As a learner I would want that to happen too so that others can benefit from your experience, so … [Read more...]
Build a JavaScript Compressor tool using NodeJS, ExpressJS, Jade, UglifyJS tutorial
Document version number: initial post As the title states its a beginners tutorial with a lot of stuff to learn. This tutorial exist to give you a little bit of understanding on how things like NodeJS, ExpressJS, bootstrap, jQuery and Jade template engine work together. Web Application In this tutorial we will be creating a full web application with 2 pages. Main page where people can compress their Javascript files About Page which explains a bit about our app The web application that we are gonna write address a problem about how to use UglifyJS to compress the JavaScript files. Advanced demo of the application we are going to write can be found here http://icompressjs.com I am going to add more feature to the above app but for this tutorial lets keep things simple. I hope that you have installed NodeJS on your box. If you haven't here are instructions to install it on Ubuntu 12 If you are using Windows you can just download the installer and node will be available from command line. After your installation npm and node commands will be available to your from command prompt. npm stands for Node Package Manager and it helps install Node Packages. First up create a folder somewhere on your file system called uglify All our App files will go under this folder. To start with lets create a package.json file under our parent folder (uglify) with the following contents in it Above package file is pretty easy to understand. Main part in above file is dependencies bit and we will see in a second how its really easy to install dependencies for you project in one hit Now we will just run the following command make sure that you you are in same directory as package.json and then run this command This will install node modules essential to run our code smoothly. So node modules that will get installed are Express framework, uglifyJS, Jade template engine Lets now create couple of more folders in your … [Read more...]
JC WordPress Coupon Revealer Plugin Pro License 
Australian Street Names with City, State and Display Names only, Single Server License
Recent Comments