DigiToffee

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

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

  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.

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