jQuery Timer Plugin
Time does not change us. It just unfolds us.
-Max Frisch
I m happy to post about my first ever jQuery plugin. This plugin will allow you to add a simple timer to a HTML element like DIV or SPAN or any other valid display element. You can style this element to show the timer in a nice way 
Currently this plugin has 3 self explainatory methods to interact with it:
- $(“#divId”).timer(“start”); -> this will initialize the timer inside the div with id = “divId”.
- $(“#divId”).timer(“pause”); -> this will pause a started timer
- $(“#divId”).timer(“resume”); -> and this will obviously resume a paused timer.
Make sure to include the latest jQuery file and this plugin file in your HEAD section. Click here for a demo of this plugin. Download the zipped folder (includes the plugin + demo HTML page) from GitHub. Here’s the script itself.
Nav Highlighter
We were suddenly faced with the necessity of training a lot of young men in the art of navigation.
-Clyde Tombaugh
Navigation items built out of li elements or a common class name assigned to multiple divs or a set of elements that act as a bunch of options to select one from… all of these need a selected or highlighted state visually for the option that was clicked on. Also these kinda items need to store the currently selected item. Instead of writing a few lines of code every time I needed to have an item highlighted or selected, I wrote this simple Javascript function to manage this task with the following goals
* Highlight one item from a set
* Unhighlight currently highlighted item (if any)
* Store the currently highlighted element
You can either use the .js file for this in your project or simply copy the class from here and paste it in your common helpers file if you use one.
function Highlighter(selClass)
{
this.sC = selClass;
this.currItem;
}
Highlighter.prototype.highlight = function(item)
{
if(item != this.currItem)
{
if(this.currItem != undefined)
{
this.currItem.removeClass(this.sC);
}
item.addClass(this.sC);
this.currItem = item;
}
}
How to use this?
In your HTML page, add a unordered list. For example,
<ul>
<li>Home</li>
<li>About</li>
<li>Bleh</li>
<li>Contact</li>
</ul>
In the head tag of the HTML page, make sure you are pulling jQuery along with the Highlighter JavaScript function as well as a CSS class for the highlighted state of the list element. I m calling it ‘sel’ for now. You can call it anything you like. Just make sure to pass that name to the JavaScript function.
Here s my simple CSS style for the unordered list and the sel class.
ul
{
padding: 0px;
}
li
{
list-style:none;
display: inline-block;
padding: 5px;
background-color: #f2f2f2;
color: #666;
cursor: pointer;
font-size: 12px;
}
Document Ready
$(document).ready(function(){
var navHighlighter = new Highlighter("sel");
$("li").click(function(){
navHighlighter.highlight($(this));
});
});
And that should enable the highlighter on the unordered list elements. Here’s a little demo of this function in action.
Enable 2 finger scrolling on the trackpad in Ubuntu
Just a reminder for me to enable 2 finger scrolling on the trackpad using Ubuntu. I had enabled this in the Mouse/Trackpad settings but it didnt work for me. Here goes,
Create a text file with the following text in it and name it something like 2finger-scroll.
#!/bin/sh
synclient VertTwoFingerScroll=1
synclient HorizTwoFingerScroll=1
synclient EmulateTwoFingerMinW=5
synclient EmulateTwoFingerMinZ=48
In the terminal go to the directory where this file resides and make it executable:
sudo chmod +x 2finger-scroll
Add this file to the Startup Applications list. Now it ll enable 2 finger scroll on the trackpad every time you boot into Ubuntu. For it to take effect right away, enter
./2finger-scroll
How to create sticky table headers using jQuery
Welcome those big, sticky, complicated problems. In them are your most powerful opportunities.
-Ralph Marston
Here s a nice way to use jQuery and make table headers sticky when a page is scrolled down and the table headers reach the top. This is a feature in the new look that Google is sporting, in Google documents, Gmail etc. Obviously Google is not using jQuery to accomplish this and they are probably using some fancy code to do it. This is just a quick way to get it working on table headers.. <th> elements. In this setup we calculate the distance of the table from the top, check if it reaches 0 while scrolling and apply the CSS property position:fixed to it. If it falls back under the distance it had, then we revert the position to normal.
Pass in the table’s id to the function that follows it. For example if you have a table that had an id = “my_table”, then pass this in the document.ready function:
$(document).ready(function(){
makeTableHeadersSticky("#my_table");
});
function makeTableHeadersSticky(tableId)
{
//collect widths of all the th elements
var thArr = $(tableId + " th");
//create an array to hold the auto calculated widths of each element
var thWidthsArr = [];
$(tableId + " th").each(function(){
thWidthsArr.push($(this).css("width"));
});
var pos = $(tableId).offset();
//set the distance of the table from the top,
//we ll need to make the headers sticky when this distance is 0
var thTop = pos.top + "px";
//set the widths of the first and last tr's ths/tds...
//this is done coz in some cases,
//the widths will get messed up if the data was generated dynamically
var count = 0;
$(tableId + " tr:first-child>th").each(function(){
$(this).css("width", thWidthsArr[count]);
count++;
});
count = 0;
$(tableId + " tr:last-child>td").each(function(){
$(this).css("width", thWidthsArr[count]);
count++;
});
$(window).scroll(function(){
if($(window).scrollTop() > pos.top)
{
$(tableId + " tr:first-child").css("position", "fixed");
$(tableId + " tr:first-child").css("top", "0px");
}
else
{
$(tableId + " tr:first-child").css("position", "relative");
$(tableId + " tr:first-child").css("top", thTop);
}
});
}
How to upgrade firefox in Ubuntu
A good fox does not eat his neighbor’s fowl!
-French proverb
This post is supposed to be just a reminder for me on how to upgrade the default Firefox on Ubuntu. 10.04 uses Firefox 3.6.23 when Firefox has released version 5, 6, 7 and very recently 8 in 2011 itself. Mozilla had announced this development plan.
To upgrade the Firefox version to the most recent one, you ll need to run the usual update and upgrade commands on apt-get and then add the following ppa to the Ubuntu repository list:
sudo add-apt-repository ppa:mozillateam/firefox-next
After that again
sudo apt-get update
sudo apt-get upgrade
And Firefox should be at its most recent offering which is 8 as of today.
Solution: How to get a svn log by author name
I am in the habit of maintaining a daily work log. I do this in a Google spreadsheet and maintain each month on an individual sheet. This not only lets me share with the team what I ve been up but it also gives me a good idea about how a particular week or month was and then based on that I can make some changes to my daily schedule to improve my productivity. The only issue is, sometimes I forget to maintain the work log and then if that happens for a number of days, then the spreadsheet has this unbearable ‘void’ suddenly. To deal with this, I want to naturally turn to my recent project’s git or svn log for filling up the missing days. But svn log will not give me a log by author. So here s a XML + XSL based solution that I m using currently.
I export the svn log to a xml file
svn log --xml -v > mylog.xml
And then I add a XSL stylesheet to the log file that got created on its second line (right after the XML version declaration)
<?xml-stylesheet type="text/xsl" href="myxsl.xsl"?>
And finally I use the following XSL to filter out other authors and only include my commits. If you are copying this from here, then make sure you substitute my name ‘walmik’ with your name.
<?xml version="1.0" encoding="ISO-8859-1"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:template match="/"> <html> <body> <h2>My SVN log</h2> <table border="1"> <xsl:for-each select="log/logentry"> <xsl:if test="author='walmik'"> <tr> <td><xsl:value-of select="@revision"/></td> <td><xsl:value-of select="author"/></td> <td><xsl:value-of select="substring(date,1,10)"/></td> <td><xsl:value-of select="msg"/></td> <td> <xsl:for-each select="paths/path"> <table> <tr> <td></td> <td><xsl:value-of select="@action"/></td> <td><xsl:value-of select="."/></td> </tr> </table> </xsl:for-each> </td> </tr> </xsl:if> </xsl:for-each> </table> </body> </html> </xsl:template> </xsl:stylesheet>
As you can notice I m using a substring to format the date to show just the year, month and day.
Now when I open the XML in a browser, I can copy the work log entries from missing dates and paste it inside the Google spreadsheet. Of course, this whole exercise would be pointless if you are not in the habit of adding a message to your commits!
Renaming multiple files in a folder to a numbered format from the terminal
This is just for my reference. I needed to rename a whole lot of png files in a folder from filename.png, some-other-filename.png to 0.png, 1.png etc. It took a little bit of experimenting and it lead me to:
count=0; for file in *; do mv $file $count.png; let count=$count+1; done;
Toggle TinyMCE rich text editor effectively
Using TinyMCE effectively can take a bit of practice and time. Especially if you have multiple TinyMCE instances on the same page pulling dynamic data. Two common problems are to display the data itself and the other is to toggle the rich text editor on a TinyMCE enabled textarea to display rich text or not on the click of a button.
The first case can be tackled by pulling data after a small delay so that TinyMCE assets are loaded. The second case can be handled as follows:
To remove rich text capability from a textarea with the id ‘tmce-id’:
tinymce.get("tmce-id").save();
tinymce.execCommand('mceRemoveControl', true, "tmce-id");
In the above code, we saved the contents before removing the control so that the most recent edited text is available in plain view. You may also want to strip the tags that the editor had added to the text. You can just use a regular expression to do so and put in a function so you can reuse it quickly:
function stripHtml(str){
return str.replace(/<\S[^><]*>/gi, "");
}
So now the code would look like:
tinymce.get("tmce-id").save();
tinymce.execCommand('mceRemoveControl', true, "tmce-id");
var str = $("#tmce-id").val();
$("#tmce-id").val(stripHtml(str));
To add rich text again,
tinymce.execCommand('mceAddControl', true, "tmce-id");
In case of multiple TinyMCE textarea instances on the same page, you can pass a custom HTML attribute to the buttons that toggle TinyMCE. So if you are looping from 0 to 10 while adding textareas then the buttons that you are drawing for toggling can have a custom html attribute such as
<a class='enable-rte-btn' ref='tmce-id-0'>Enable Rich Text</a> <a class='disable-rte-btn' ref='tmce-id-0'>Remove Rich Text</a> <textarea id='tmce-id-0' class='tinymce'></textarea>
You can draw out multiple textareas like this incrementing 0 to 10 or whatever the number and then enable TinyMCE on textareas with the class ‘tinymce’. If there are too many textareas then pull the data after a small delay (based on the number of textareas you have) and load it in the textareas. After that add a click function to enable or disable rich text on all tags with the class ‘enable-rte-btn’ and ‘disable-rte-btn’ respectively.
Goals4Me
Goals are the fuel in the furnace of achievement.
-Brian Tracy, Eat that Frog
I m happy to announce that I ve just launched the BETA version of my first independent app Goals4Me. There are still a lot of things to add to it though one can objectively identify what his or her primary goal in life is and get some ideas on getting started. It is based on whatever I ve read or heard from Brian Tracy, Zig Ziglar and Tony Robbins about setting goals, which boils down to identifying a bunch of goals, selecting one of them, setting a deadline on it, identifying the obstacles, listing the people/groups/organisations that can be of help, noting the skills required and listing down the benefits.
In my personal experience, I never found a tool that would let me do all that (in a free application). I d have to create document and put the headers etc to make such a sheet to get started with a goal. So I finally created the first basic version of such an application and put it online. Each time I use it, I realise that my overall inclination toward achieving a goal becomes refined and I am able to take things forward in a particular desired outcome. So much so that I use it for smaller goals and objectives as well. I hope it benefits others too. I will be adding more features along the way. The immediate one is to email the user’s current session. At the moment it only lets you download a PDF of the session.
So here’s the link again: Goals4Me!
CSS max-width to the rescue
You can’t do anything about the length of your life, but you can do something about its width and depth
-Henry Louis Mencken
Recently I discovered a wonderful CSS2 property: max-width. This property lets you fit your images inside the width of its container perfectly. It uniformly scales it as well. So if you have an image that is overflowing out of its container, just set its max-width property to 100%. Most people either set the div’s overflow property to hidden or they simply open up a graphics application and resize it. No need to do that if the image is just a little bigger than its parent.
#containerDiv
{
width: 200px;
height: 200px;
border: 3px solid #000;
}
#containerDiv img
{
max-width: 100%;
}