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-65766a680e10e958599848/] Now lets check on how we can make use of this plugin. Example Usage [crayon-65766a680e115052896143/] 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-65766a680e618380051524/] Usage You can use the above method to return uniq id as shown below [crayon-65766a680e61b864038896/] [crayon-65766a680e61c177319160/] Second method In second method we will use a counter as shown below [crayon-65766a680e61d845770114/] 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-65766a680e61e671929071/] [crayon-65766a680e61f283024850/] 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 [crayon-65766a680e854650225692/] Then in Jade template you can access above object as [crayon-65766a680e857815328379/] Example template [crayon-65766a680e858443178362/] On the other hand you can also use ExpressJS's settings object as shown below [crayon-65766a680e859516391701/] 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 [crayon-65766a680e85a027924025/] Make sure that you have above code before this line of code [crayon-65766a680e85d860555791/] If you set session property name as shown below [crayon-65766a680e85e362415292/] then session property can be accessed like this in Jade template [crayon-65766a680e85f475774610/]   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 … [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. 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 [crayon-65766a680e9df450490102/] 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 [crayon-65766a680e9e4160530068/] 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 working directory called public and views and also … [Read more...]

Basic Shell script to automatically start NodeJS if for some reason it stopped

Hi Guys, Well this one is a really basic example of a shell script that I used before in one of my production NodeJS website called http://icompressjs.com Here is the bash script that I wrote to monitor my local node install [crayon-65766a680ec29584045153/]     as you can see that I am running Node on port 8080 and I am using curl to send a request to my node server. If response is 200 that is good and it will print "All Working well" else it will try to start NodeJS server You can also plugin another line to send email to you when a server is launched again. Something like this [crayon-65766a680ec2c811841746/] put above line just under echo "Launching" Now the final step is to cron this our bash script. I named it as node_monitor.sh You will have to give your local user rights to execute this script, after doing that you are able to cron it as shown below [crayon-65766a680ec2d203273172/] Above lines says that every 5th minute run node_monitor.sh If the response is ok i.e. 200 then nothing will be done else there will be an attempt to start NodeJS server again You can improve this script with better error handling but for what I was trying to do this was sort of enough I hope this helps Cheers         … [Read more...]

Install node.js on Ubuntu 12+ and test with example server

Now that I've started to learn node.js to a project of mine thus there will be a few articles on node that you will see. And of course I am not an expert on this topic or any actually thus making any amendments will be welcome to improve this post Ok so I am using Ubuntu 12.04 LTS and I think ubuntu works for me atleast for stuff I wanted to do. So after reading many articles online, this is how I successfully installed node on my ubuntu. First we will need to install pre-requisites or dependencies before we can touch node so run the following commands to install Dependencies You will need to install these dependencies first [crayon-65766a680ed46862161157/] If something goes wrong while installing any of the above then try these steps before you repeat above [crayon-65766a680ed49561026390/] Installing for current user Change to the directory your want to install node in. For this example lets keep it simple and create a nodejs directory first as shown below [crayon-65766a680ed4a251859588/] If everything went smoothly then its time to get the source from GIT so here are the required steps for that [crayon-65766a680ed4b831860176/] # update the environment path variable echo 'PATH=$PATH:$HOME/nodejs/bin' >> $HOME/.bashrc source ~/.bashrc Please note that ./configure will do a check on dependencies and you will see problems in red if something went wrong. Congratulations! Node is now installed and you are ready to rock But just before that I would also recommend you to install node package manager (npm) [crayon-65766a680ed4c204079963/] npm is now installed. npm is a good way to install node modules. But Lets test our node install out Somewhere where you would like to create a new project, just create a new file called index.js (please note that this is just a test thus I am not emphasizing on where and how to do your project structure) I just use gedit to do … [Read more...]

jcedit: A jQuery Plugin for contenteditable containers

Hi Guys, Here is a skeleton jQuery plugin that you can use on various pages to get people to send you corrections on the web pages of yours. Let me explain a bit more. So this plugin was written to help me with my work with a WordPress plugin of mine that allows in article editing and correction suggestion to be sent to the author/administrator. The WordPress plugin is called WP Errata and will be available from Wordpress.org But lets talk about this little jQuery plugin and I will take you though some key things that this plugin does. Example markup [crayon-65766a680ef0e423572319/] So the above markup is something that we will need. It doesn't matter if you include contenteditable="true" or not, as long as you are including class="jcedit" or your own within the div element, see the usage section Usage This plugin allow hook functions when user resets or hit save button and these actions can be overridden by following functions [crayon-65766a680ef10208266739/] As you can see that by default the functions will have old and new content available through params. So a quick usage example will be   [crayon-65766a680ef11536560016/] .jcedit is the default class that we have applied jcedit to but you can have your own hook classes. It shouldn't matter. There is a good Stack print when you pass on debug: true some maybe useful info is printed out. Styling Here is the default stylesheet that you can edit if you are not happy with default styles. [crayon-65766a680ef12427462823/] Above is pretty much very simple styles definitions that can be edited with ease     Version Current version 1.0 Demo Ok here is a quick demo of this plugin http://jaspreetchahal.org/examples/jquery-examples/jcedit/jcedit.html If you have any question regarding this demo please let me know Compatibility This plugin should work if contenteditable is supported by your browser. This plugins has been tested on … [Read more...]

Check if contenteditable is supported in a Browser

Hello, So the plugin I am writing on contenteditable, I had to check if browser actually support this functionality or not. So I read a few articles and I came to this conclusion that there are a few ways that you check support for contenteditable Lets check out what those ways are First way First way is to use Modernizr framework and this is how you do it with Modernizr [crayon-65766a680f110676387444/] Please correct me if I am wrong in stating above. Second way This is just a pure JavaScript way and we have been using this for ages (overstated :)) now Here is how you can check it [crayon-65766a680f112349414200/] isContentEditableSupported will have value true or false depending on if its supported or not   Third way We can make use of jQuery in third way let me show you how this is done. We will just create a tag and check if contenteditable property value is inherit, inherit is the default value of contenteditable [crayon-65766a680f113405393329/] Once again isContentEditableSupported will have value true or false depending on if its supported or not So as you can see that there are a few ways to detect support for this property. There are some cases such as in Smartphone and Tablet browser that above test may return false positive so maybe its better to see what check reliably result in accurate output. I hope that this helps To make a correction to this post please leave your comments so that others can benefit. Cheers   … [Read more...]

jQuery Element exists function

Hello, So  a friend of mine asked me a question that if there is a function in jQuery that makes it simple to check if a element with an ID exist in DOM or not. So I think that function does not exist but its pretty simple to write one. Ok first things first, here is a simple way to check if an element exist or not. Markup Here is an example markup on which our jQuery code will be based on [crayon-65766a680f215564992026/]  A simple check (This is how you do it anyway) [crayon-65766a680f217023915432/] So above works pretty well and it will work pretty well with the CSS class selectors too. But just if you are after exists() function here is what you can do :) The only advantage is readability of your code. Now lets write a little plugin so that you can hook it in your code easily [crayon-65766a680f218709866531/]     So to be generic in nature here is a generic definition for our exists() function for jQuery [crayon-65766a680f219294891155/] [crayon-65766a680f21a653897354/] To make our function return boolean true or false we just need to change the condition in our plugin function as shown below [crayon-65766a680f21b907871986/] I hope that this helps. If you would like to add something or make a correction please leave your comments Cheers     … [Read more...]