Using $ instead of jQuery in WordPress Admin

Well this is not a new issue and neither the solution is but I wanted to repeat it so that newbies don’t waste time hunting for this problem.

jQuery core is added by default in WordPress Admin Pages BUT in noConflict() mode. So if you are writing a plugin and want to use jQuery you will get an error for using because this dollar namespace is not exported in noConflict mode. As a result, your habit of writing


will result an error saying $ is undefined. 

To counter this problem, there are a number of ways. First and the most suggested obvious way is to use like


BUT, we want to do something more useful. We are going to use a combination of Closure / anonymous function + Global Import.

JavaScript has some very good features. If you have read the design patterns, you will find it very familiar, and if you haven’t it won’t be much difficult. The closures can be self executing functions. Like


Now there’s another thing called Global Import using this closure. Let’s have a look at how they look like.


Almost all the well written libraries expose a global namespace. For jQuery it’s jQuery, for Yahoo it’s YAHOO and so on. Notice that we have supplied this jQuery nameapce in parameter of closure and using $ in the callback function parameter. Now that $ can be anything. If you write $YO , you will be able to write $YO(document).ready(….) . Why to follow this ? Because you can use any of your legacy script within this anonymous closure without any modification – not even $(document).ready.

So, next time you write some jQuery code in your plugin admin pages for WordPress, consider using the second method mentioned here.

Make your Family Tree with Google Visualization API

Ever wanted to build your family tree ? Hell I did, cuz I have records of last 10 generations (Yes, I’m not kidding). The list was maintained by my Grandfather who handed to my father some 15 years ago. Sounds filmy, huh ? Anyways, as we had that in pen and paper, i wanted to make program that generates it. I started JavaScript in late 1998 and in 2002 I wrote a script [only for IE :( at that time ] which shows a family tree and the DB is easily updated from the source. You can run the script downloading from here. I just checked it in IE and it seems to be working still after 8 years.

Yesterday, I was just browsing Google charts and visualization libraries to see if there’s any new thing since I saw them last time. And I saw this organization chart which can be used to build the family tree. So i just wanted to see how our 10 generations’ family looks like when putting them in Google’s visualization library. And it came out a really big horizontal one as you can see below.
Mahbub - Family Tree

Now, you can simply make your family tree using this API. It’s dead simple. Just see the couple of lines of code which is pretty self explanatory. I’m putting a little light here for easy understanding. So go and have fun creating your family tree and show it to your elderly persons, they might be happy seeing it.

To get started, just start with the sample code Google is providing here .

And if you look at how the database is being constructed, it’s very simple. For my BIG table i had the staring point like this

[‘Kalu Khan’,”,’1570′],
[‘Ahsan Khan’, ‘Kalu Khan’, ”],
[‘Jharu Khan’, ‘Kalu Khan’, ”],
[‘Ajmat’, ‘Ahsan Khan’, ”],


It means Kalu Khan is the root. The second Parameter is left blank which means it doesn’t have parent. Next you have to add Children node to it. The first parameter is the Children Name and second one is the Parent Name.

[‘Ahsan Khan’, ‘Kalu Khan’, ”]        ——–    Here Ahsan Khan is the Children and ‘Kalu Khan’ is the parent. So just make the list for your family and save for next generations :)

Oh, there’re some other options there as well like collapse / un-collapse and styling those nodes. Keep discovering..

And you can also see my 10 generations family db — mahbub-family-tree.

16 jQuery Plugins i used the most

It’s been over 2 years for me using jQuery in different web applications. In the beginning, there were not much alternatives to a plugin. In the modal box area, Thickbox was the uncrowned King. ‘s validation was the only good validation plugin earlier. But now, millions have embraced jQuery and developed quite a lot of plugins. Most of them has alternatives. I requested to allow people post similar plugins on plugins pages so that people know in a nutshell about the available alternatives.  But it’s still not there. Anyways, I’m going to list out the plugins i used practically more frequently. Let’s see them by category.

Table Drag And Drop
Tooltip Related
Masked Input
Modals & Overlays
Ui Tabs

Guitar Chord Finder : Yet another old day script

Yet another one of my old days of Javascript – Guitar Chord finder. I can play Spanish Guitar a little. So in the beginning (2000-01) i needed the chord chart often visually. All of the guitar tab site write their tabs in similar fashion. Like if you talk about A major it will be like 002220 which means 6th and 5th strings are open,  your fingers are at 4th,3rd and 2nd fret and sting 1 is open again. If you play guitar, u know that A major has other combinations in the other octaves. So this XXXXXX notation helps us read the tabs correctly for which chord at which fret has to be used. Like , in the song Hotel California, the last E Minor at the end of first solo is actually the 335450 rather than 022000.  Anyways, as i was kind of beginner in 2000-2001, i built it for first octave chords only. Here’s how it looks.


It’s a chord chart for the right handed people 😉

You can see it in action here and can download the files here.

Screen saver like Javascript

 This is one of my old creations of my early programming life, probably in 2000. It’s basically some rotation geometry. When you run it (changing the name parameters), the name will behave like rotating in 3D across the screens and bouncing from corners to corners. It was made for IE only that time. I’ve ported it with jQuery a bit so that it runs on current browser. 



See it in action here  and download the source here

jQuery removes backward compatibility in selector

[@attr] removed from jQuery

There were lot of scripts where I used jQuery selector with using [@attr]. Like if you want to select an input with a name="input_test" , you’d probably write  

$("input[@name=input_test]") to select that input. But it’s removed from releases of 1.3 and later. Now you have to write $("input[name=input_test]") and I have got no problem with removing the @ sign. It should have not been introduced at the first place. Now that there are lot of plugins are written using that and lot of custom scripts on site have used it, jQuery team should have kept a backward compatibility for the @ thing. I upgraded jQuery to latest version 1.3.2 and lately discovered that some features are simply not working. In firebug i was getting uncaught exception.  It took me a little while to understand why they were not working at all. Later i found at writing 

Note: In jQuery 1.3 [@attr] style selectors were removed (they were previously deprecated in jQuery 1.2). Simply remove the ‘@’ symbol from your selectors in order to make them work again.

Then I had to find and replace all the instances where i used the [@attr] thing in the whole site. I could not appreciate this move of jQuery Team. 

What if there were no firebug ?


Sometimes this comes to my mind that what if there were no firebug ? What would it mean to debug the DOM and Javascript, AJAX – everything ? The answer comes like a dark age. Seriously, we got so much used to Firebug that i can’t even think of making apps that involves DOM manipulation, AJAX. If you’re reading this blog, i’m sure you know what’s firebug and what it does. Wait let me just list’em down what would life mean without firebug.

  • I’d probably give up developing JS intensive pages
  • Would have stopped to enjoy playing with DOM and CSS 
  • I’d be a guy with less AJAX knowledge than what i’m now
  • My hundreds of Man Hours would have been wasted trying to run after stupid errors.
  • I would scold and curse Microsoft for IE every other day
  • May be some other browser would have been my default browser
  • Or may be i’d be truly dependent on DOM inspector and web developer toolbar of FF although they are not as good as firebug.

What else? Let me know what’s in your list.

And if you haven’t used firebug yet, to my language, you have committed a SIN. Let’s not bear the sin anymore GETFIREBUG

So, some people stole my script and i didn’t know !!

Thought I’d share some more snippets of javascript I wrote back in 2000-2001. It was fun playing with hex colors and at some point of time i could tell closer hex color code of thing I see around. Sounds geeky? No. I just enjoyed to do that. When I’m writing this, out of curiosity i googled for "inverse color generator". And I got bunch of results. 

Number 1 is

Number 3 is

And this is the one I think i submitted to a site

And surprise!! this is the original one i wrote in 2001. See, they copied my script and didn’t even notify me :(

Inverse Color Generator



Hmm, gotta look for more on the WWW.


My Old day’s JavaScript

It’s been more than 10 years I’ve been playing with Javascript. There were times when we had to fight hard for netscape and IE’s weird behavior on DOM. But still i enjoyed those days. Making hobby projects truly for my own was a different level of fun. No commercial thoughts behind efforts. I’d call those days "my innocent javascript days". So I had made a handful of utility scripts out of my own interest. In those days, it was easier to play with IE’s DOM than Netscape’s DOM. IE 4 was better than Netscape 3/4. One of the script I wrote in year 2000 (my second year of undergrad) is to find your birthday calendar for a specified period of time.

Birthday Calendar

Like if you were born on 24th July 1980, it was a Thursday. So using this script

You think you’re good at JavaScript ? Think AGAIN!!

I thought I’m very good at javascript. I had passed my lot of times of programming in early life playing with Javascript. Whatever problems came to me whether mathematical, effects, anything – I used to write JavaScript Codes. And I could debug most of the problems I faced or people faced in different forums. In 2001-2003, I used to give solutions to JS problems asked in And these days, In fact for the last two years, I keep playing with jQuery.

I keep stumbling while I work. It enriches my knowledge on topics i’m interested in. Recently i found a link and it just blew me and my confidence on JavaScript. It’s I don’t know what these guys are made of. They totally rock. Look at every single script. It won’t be harder to realize that they live javascript and very passionate about doing things. It just told me what’s the possibility. I couldn’t find my favorite from these hundreds of script cause I’m lost. I think all goes to my favorites. Good work guys! Hats off to you!!