Life Rocks

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

This post is about the browser window being a DOMtree . We the structure od the DOM ( D ocument O bject M odel) and then use DOMevents to create a todo list entirely in Javascript with strikeouts when clicked on. Demo

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