Clay’s Blog

If you’re looking for some good videos to learn javascript I suggest Douglas Crockford’s videos on YUI Theatre. Doug Crockford is the guy who ‘discovered’ JSON(whatever that means) and is the technical lead for YUI. I’ve mentioned him before…

I ran into a problem the other day when trying to resize the ‘infoWindow’ on a Google Map. The infoWindow is the bubble that appears on the map, usually above a pin-marker when you click on it. Google’s own map has this behavior.

As usual, my solution requires some YUI components. I think you’ll just need the selector module and the core.

The problem I was running into, was that Google provides no way for the infoWindow to be resized. The easiest thing would have been for google to add CSS classes onto all the divs that make up the infoWindow but for some reason, they haven’t provided this and you need to jump through hoops if you really want to resize it. Typically, it seems that people would like to shrink the height because, for some reason, google will not resize it any lower than about 60px, even if the content is much small. In my case, I had only two lines in the infoWindow and a bunch of ugly whitespace below.

You can use the infoWindow.reset method, but the first three parameters are actually required despite what the API seems to imply.

“Resets the state of the info window. Each argument may be null and then
its value will not be changed from the current value.”

This is WRONG. Only the last two arguments are options, which you can tell by the ‘?’ in the method signature on the left.

“reset(latlng:GLatLng, tabs:GInfoWindowTab[], size:GSize, offset?:GSize, selectedTab?:Number)”

If you got this far, then perhaps you might have tried showing the infoWindow and then resetting it to the size you wanted, however, this will only work if you put your call to the reset method into the onOpenFn of the infoWindowOptions. It seems that when the info window is shown it is animated and then resized itself, so if you call the reset method directly after calling openInfoWindow it will animate and then resize AFTER your reset has already done your resizing… However, even this will not let you make the infoWindow’s height any smaller than about 60 px as I mentioned above, don’t worry though, we’ll get there!

Code to resize the infoWindow TALLER than 60px:

If you want ot make the infoWindow SMALLER, then the reset method will not work! Why? No one knows… There’s probably a hard-coded minimum height somewhere in google’s code but their documentation doesn’t seem to mention it anywhere.

The infoWindow is made from a handful of divs that are absolutely positioned in the appropriate places. These divs are for the 4 corners and the top, bottom and middle, sorta like a tic-tac-toe board but with one div for the middle row. By manipulating all these div’s style.top appropriately and the height of the middle div, we can actually shrink the infoWindow despite Google API’s best effort to get in our way!

Code to resize infoWindow with a small height:

Be sure to change the css selector to the appropriate id of the div that contains your map! mine was area-map-tool!

I have not tested this EXACT code but will hopefully get a demo working here soon. Please let me know if you find any problems!
Cheers!

This was an error i got with intellisense/autocompletion in Eclipse. The project needs to be a “Java Project” and not a “Project”, this can be done by doing a new checkout of the code from the “SVN Repositories” view and selecting the project “Wizard” when prompted. I could not find any other way from within Eclipse to create a Java Project and also retrieve the code from SVN/CVS. I suppose you could create a new project and then copy over the appropriate files, but I don’t know if eclipse-svn is smart enough to handle this.

I’m starting to dig into YUI and I think this is a good time to clear up some of the early confusions people might have since I’m experiencing them myself now.  I typically try to have very little raw javascript in my code, i figure that that only invites the possibility that it won’t work in some browser.  Therefore, rather than using ‘document.createElement’, I went searching for a way to create an element with YUI.  I ran into a function with seems like  it should do the trick, YAHOO.util.Element, which, in their demo code, can be called as a constructor like so:

However, despite that this code seems to imply that a new element will be constructed for you, it is actually just a wrapper for YAHOO.util.Dom.get which simply finds elements already in the DOM for you, like document.getElementById or prototype’s dollar function.

So, contrary to my intuition, YUI does not not provide a wrapper for document.createElement and this is actually what you are supposed to use.  However, you’re probably also going to want to be able to treat your element like a YAHOO.util.Element, so you’ll need to assign your element an id and then retrieve it using YUI:

Ugly!  Now you can use the nice method’s that YUI provides:

I don’t like this design decision at all from YUI.  I think that their reasoning is that they don’t want to clutter up the native objects that the browser provides.  If that’s the case, then they shouldn’t even have an Element module, it should all just be left in the Dom module.  I hope they decide to scrap this before they release it from beta.  It simply doesn’t make sense to have two different object types which both refer to elements but which don’t directly inherit from one another.

Cheers!

link

So, I use Wordpress.  I don’t like Wordpress at all, but I used it at my last job so I got some experience with it and that means that it was easier to just use it and deal with the consequences later.  I wouldn’t recommend it to another developer though, the codebase is truly hideous.

I recently wanted to add comments to my homepage.  I only like to make changes to my template and not to change any Wordpress “core code”, since then I’ll have to make all those changes everytime I update Wordpress.  I didn’t think this policy would be a problem for me this time since all I was trying to do was add the ‘comments template’ to the homepage and I thought that I should be able to just copy the appropriate line from my ’single.php’ into my ‘homepage.php’…  Wrong!   How any ‘non-technical’ person manages to use wordpress is beyond me…

Anyhow, I did some digging and found the problem.  The function comments_template in comment-template.php has these lines:

I’m not going to go into the reason why these lines are harmful but I’ll just say that my argument might be summed up as “hard coded configuration”.  Anyway, these lines in homepage.php will get you what you want:

Or, if you want to be a smartass like myself, this will work too:

Cheers!

In the 2004 presidential election I actually voted for the green party. Their candidate, David Cobb, received a whopping .096% of the popular vote! That’s less than 1 person in every 10000! Ouch.

This time around I’m going to be even bolder and boycott the vote entirely. I think I’ll probably get a lot of flack for not doing my ‘civic duty’, but I just don’t think that I have any real choice. There is NO chance that anyone outside of the two parties will win and I refuse to cast a vote for the lesser of two evils, I’m stubborn like that and I refuse to waste my time. (Obama-supporters, he’s still a politician. Until I see him actually stand by his campaign rhetoric I remain skeptical.)

Now, I’m not against the democratic process in general, I just think that the American process is broken, which is actualy why I voted for David Cobb in the first place. One thing he talked about a lot back in 2004 was something called ‘Instant Runoff Voting’ or IRV. Apparently it’s been working in Australia since 1919.

Rather than voting for a single candidate, voters rank all candidates in order of preference. All voters first choices are tallied and the last place candidate is then removed from the pool and then the process is repeated. Any voter that chose the eliminated candidate then gets their second vote counted. The process is then reiterated until one candidate has a majority. That’s it!

There’s a handful of obvious advantages of IRV. First, it’s simple. Even the dullest citizen can understand it, anyone can simply rank the candidates. Second, you don’t have to vote AGAINST a candidate, you can actually vote for whomever you truly prefer and put your safety vote down as a later choice. I think that this style of voting would strengthen third party candidates and would decrease negative campaigning. I would love to hear politicians discuss their own merits instead of slandering one another.

Does IRV sound like a good idea to you? Then spread the word and help encourage this system at the local level, maybe in the somewhat distant future we could see this system all over the country.

I often like to add background images to my text input elements, it’s a great way to stylize them and adds a nice little pop to small forms. The search box in the upper right corner of this blog is an example of this. I recently wrote this nice little javascript function to help me get this done quickly and easily.

Feel free to use this code wherever you please, it requires the prototype javascript library.  There’s an example of the usage at the bottom.

Sample usage:

If any of the code looks odd(like maybe the parentheses before and after the function) then you need to watch more Douglas Crockford!
Cheers!

Well, since it took me all day to figure this out again, I figured I might as well write it down somewhere so that at least I’ll be able to remember it the next time I want to create a new repo with Git.

The one thing that irks me is that I always try to create a bare repo on the server and then clone it to my client.  For some reason git doesn’t want to work this way even though that’s what my intuition tells me.

Anyway, the way to do it is to first create your working copy.  I’m making a little website so I have some code in /www/my-working-copy.  After you have some code that you want in the repo, you need to initialize a git repository and add your code to it like so:

After that’s done, you want to go your git-daemon’s base path and clone this repo there with a bare copy:

You should get a message like “Initialized empty Git repository in /my-git-daemon-base-path/my-remote-repo/” after which you may need to run update-server-info and you’ll also want to add a ‘git-daemon-export-ok’ file to the repo so that the daemon knows that it is okay to export it:

At this point you also will most likely want to add a ‘tracked repository’ named ‘origin’ to your working copy so that git will know where you want to push and pull from:

That’s it!  To test it out simply try a commit:

You should receive a message “nothing to commit (working directory clean)”.

At this point you probably want to push your changes to the repo.  Although the repo is created, it won’t be very useful until there’s something in it:

Cheers!

I remember getting lost a few times back when I first started using Prototype. I was trying to implement some form validation, which is pretty easy with prototype, but ‘old habits’ were getting in my way. Coming from ‘plain old javascript’, I was accustomed to using ‘return false;’ to cancel a form submission, but when you’re trying to separate form from function(and thats really the whole point of events), you don’t necessarily want to put javascript into your html. e.g.:

First of all, it’s ugly. More importantly though, it mixes your javascript and your html, if you want to rename your validator function you now have to dip into the HTML code(which should probably live in a different file)… ew, divs. Since you’re using prototype you should be using prototype’s event management. Here’s a sample:

And, in order to stop the form from submitting you would use Prototype’s Event library again:

This stops the submission event from ‘bubbling up(or down)’ to the Document Object and being submitted. This is our ‘return false;’

Putting it all together we get something like this:

..and there was much rejoicing. Our HTML and and javascript are separate, our lives are easier. Our new code also makes it clear that form submissions are actually events and that our validation function is a handler for that event.
Cheers!

Apparenly Ryan Campbell wrote on the same subject back in 2006, he claimed that Event.stop() didn’t work in Safari but as far as I know that’s no longer true.
Prototype’s api entry for event.stop.