Skip to main content

Posts

Showing posts from September, 2012

Addition of lightbox to my blogger template

Since i have started regularly blogging, i have felt the need for a small subpage or popup kind of feature where i can briefly explain things that do not need a dedicated blog post and where links to external pages would be 'a bit too much'.

I decided to use the lightbox effect for this. It would be the perfect solution to my problems. After a little googling, i came up with 2 amazing and simple implementations, one by Abhinay Rathore, this uses CSS and javascript, and the other is by Emanuele Feronato, which almost all css and even the minimal js is used to manipulate the css.

As I am extremely lazy and also was not entirely happy with both the implementations, i decided to mix the 2 and get my own lightbox. Abhinay's solution was something i found unnecessarily complex and Emanuele's solution was not elegant enough. My own solution is midway between these two and is satisfactory for personal reasons.( Yeah, click on the link. I already found a use for my new additio…

Line/Bar Graphs using Canvas in HTML5

<canvas id="tutorial1" width="350" height="200" style="border: 1px solid black;"> <script> var canvas = document.getElementById('tutorial1'); var ctx = canvas.getContext('2d'); ht = canvas.height; wt = canvas.width ; var data = {}; data.gtype = 'line'; data.title = 'hey! title goes here'; data.data = [['Q1',10],['Q2',20],['Q3',30],['Q4',40],['Q5',25]]; ctx.drawCross = function (x,y){ this.beginPath(); this.moveTo(x + 5, y + 5); this.lineTo(x - 5, y - 5); this.closePath(); this.stroke(); this.beginPath(); this.moveTo(x - 5, y + 5); this.lineTo(x + 5, y - 5); this.closePath(); this.stroke(); } ctx.fillStyle = "Red"; ctx.beginPath(); ctx.moveTo(40,10); ctx.lineTo(40,ht-40); ctx.lineTo(wt-10,ht-40); ctx.stroke(); ctx.closePath(); /* draw title*/ len = ctx.measureText (data.title); ctx.fillText(data.title, (wt -…