Posts

How to create syntax highlighter using jQuery

Image
Today I am going to show you how to create a basic code highlighter for website. This UI is actually inspired by sixrevisions.com . I have added functionality of showing line numbers. Following things will be covered How to add line numbers How to highlight single line comments i.e. those lines which starts with // How to highlight comment blocks i.e. those lines which are enclosed within /* */ Live Demo       Download Code To use this code highlighter you have to wrap your code inside <pre> tags. Really there is nothing new in it. It is the same traditional old method. <code> tag is another way of adding code into your post. However there is a difference between <pre> and <code> tag. To give analogy of their working I would give example of <div> and <span> respectively. This means <pre> is a block tag and <code> tag can be used inline. One important thing we need to consider is, in WordPress ...

KineticJS – draw lines using mouse tutorial

Image
In this post we will see how to draw lines using mouse with KineticJS canvas library. First we will go through a basic logic for drawing line. Also we will see how this logic can be implemented for KineticJS. live Demo  |  Download Code Logic for drawing line on canvas using mouse Listen for mousedown, mousemove, mouseup events on canvas on mousedown store x1, y1 relative to canvas element set started = true on mousemove if started = false then exit get current x, y element = line(x1, y1, x, y) on mouseup if started = false then exit get current x, y element = line(x1, y1, x, y) Explanation is as below Add following div into body <div id="canvasArea"> </div> Initialize a stage and layers var stage = new Kinetic.Stage({ container: 'canvasArea', width: 500, height: 500, draggable: false }), layer = new Kinetic.Layer({ name: 'layer' }), tmpLayer = new Kinetic.Layer({ ...

How to get local time from UTC using Moment.JS

Image
  Moment.JS is a beautiful javascript library for parsing, validating, manipulating, and formatting dates. This is a must have utility library when it comes to manipulating timestamps and dates in javascript. Here I will show how to get local time if you have a utc date time string. Lets say you have a UTC date-time string as  2014-02-19 05:24:32 AM and you want to determine time in your timezone then use following code: moment.utc('2014-02-19 05:24:32 AM').toDate(); toDate() method gives javascript Date() object. Below I have shared an example of how to use it. You can click on JavaScript link below to see the code.

Measure the height of keyboard on PhoneGap app using jQuery

Image
 I have been working on a PhoneGap project where I wanted  to scroll the content up and down whenever keyboard  appears and disappears.  After a bit of searching here and there, I found out that  whenever keyboard appears window's resize event if fired.  So to determine height of keyboard do the following steps  1. Inside device ready event store original window height  inside a window variable   window.height = $(window).height(); 2. Now on window resize event execute a callback function   $(window).resize(function(){     window.currentHeight = $(this).height();     window.heightDiff = window.height - window.currentHeight;  }); So whenever there is focus on an input element, window's resize event will be triggered which will execute above function and we will have the height of keyboard inside window.heightDiff variable. Putting it all together function onD...

iPhone 4s wifi grayed out temporary fix

Image
I am facing issues of WiFi button grayed out and battery draining very fast after upgrading from iOS 7.0 to iOS 7.0.3. I have been searching through internet right after this issue happened with my iDevice. My three colleagues don't have problems after upgrading to iOS 7.0.3 except for one saying battery draining is fast. Many people tried putting their iPhone's into freezer and I am one of them and it got fixed temporarily for at least 5 minutes. I kept it in freezer for 20 minutes and WiFi button reappeared. Interesting information, when in freezer it contracts hardware parts and WiFi reappears and again after sometime due to heat WiFi button gets grayed out again. You can see device logs by downloading iPhone configuration utility. Also I can see kernel panic logs related to WiFi inside iPhone diagnostic which you can see (if you have any) by going in Settings -> General -> About -> Diagnostic & Usage -> Diagnostic & Usage Data. Now question is,...

Real-Time collaborative coding in Eclipse using Saros

If you guys work as a team or most preferably pair programming then you are going to enjoy this post. Usually if you and your teammate want to write different functions into same file then either of you write first or later. However Saros lets two of you do this in real-time collaborative way. You can follow someone and whatever files open on his/her machines you can see on your machine instantly with the live changes being done. So how to install it and what are prerequisite software needed for that 1. If you have existing XMPP account you can use it or you can setup your own XMPP server. My and their preferable way is to install your own XMPP server and create accounts in it. You can use jabber servers too. Go to talk.google.com . I use Openfire server. 2. It is recommended that all accounts must be on same server and create all user accounts on Openfire server. 3. Install Saros eclipse plugin and configure it with your account. 4. Now create any project in your eclipse and...

Share text right away with your colleagues using Mailinator

Image
Some weeks ago in office there was a training program. Trainer wanted to share a link to his jsfiddle demo. As everyone in the room was from different project groups no one had a single point of sharing information. One of the guy in the room shouted send this link to synerzip@mailinator.com and everyone go on mailinator.com  and type synerzip and click on Check Inbox button. So this is how we shared information. 1. Now, What is Mailinator? A. They state that, it is "Free. Disposable. Email.". Basically, It is a public domain email. 2. How long shared information lasts? A. It will be deleted in several hours. 3. Can I share pictures, attachements and/or binary files? A. Simply, No. Only plain text. 4. Do they have any rejection criteria? A. Apart from question 3, other rejection criteria includes email size and too many recipients. After watching below steps of how to use it, it doesn't take much time to understand the notion. Step 1 Ste...