google has all the answers

I think many people share the envy that i have for google. They seem to be getting everything right these days. The most perfect work environment, the most successful applications, still rising stock prices...

Google also has really cool ideas, and a lot of the stuff that they do is really not that hard. When i first saw the google suggest, i decided that i had to make my own implementation of it. I worked on it for a couple of days, off and on, and got a working copy of it (you can find that at http://www.whatmind.com/goog). Once i figured out how to simulate a basic drop down/autocomplete thing, i used it to simplify some other things i was working on. Its a really cool feature to have in something that has filter fields, or a form that will contain information that has been input into a db already.

When i implemented my google suggest, i used firefox to test everything. naturally IE did not work the same way. The basic funtionality worked just fine, but some of the cosmetic effects were not exactly as smooth as the firefox version. The way i created the drop down box was to simply make a div right below the text box, that i wanted it to to a drop down for. then i set position:absolute and the display:none properties. When i wanted it to show up in the code i just changed the display property to block. Ohh yea...you have to set the zindex higher than everything else on the page too. In firefox the effect was for the box to show up right under the text box, just as i wanted. Then i could fill it in with suggestions. In IE it would show up in strange places.

This did not become a problem until i actually wanted to use my widget for something where others would be using it, and would potentially be using IE to access the feature. Instead of thinking "hmm what would the simpliest solution to the problem be...", I decided to look into the google suggest code for help. If you have never looked at any of google's javascript, then you should take a peak before you continue to read (http://www.google.com/ac.js). Either the people who right this code want to torture themselves or they have some program they use to make the code very unreadable and hard to understand. I think they do this to cut down on network traffic, but i believe it is also a protective measure.

So i spent hours trying to figure out how it was that google suggest was able to make this thing work in IE. After i started looking at the code, I realized that this was probably not going to be the best idea for my morning activities, but then i got so involved that i just could not stop. After searching through this code for a few hours, copying functions and then spacing them the way i like, i finally found the function that made the whole thing possible. And it was so simple...

function kb(s,na){var wb=0;while(s){wb+=s[na];s=s.offsetParent}return wb}

s is the object you want to find the location of in the browser window. na is the array index of the property you want(offsetLeft or offsetTop). I was not familar with this use of text array indexes so, I changed the code around to use the objects properties like i always do.

so instead of: wb+=s[offsetTop]
i said: wb+=document.getElementById(s).offsetTop

so this function finds the offsetTop and offsetLeft for you, which you can use to move your suggestion box to your text box. Then, of course, adjust it, so it appears right under the text box. That you can do with the offsetHeight property of an element.

my code is a little bit of a mess, but i will clean it up and post it here later.

the above function could also be written to be recursive and that would be pretty cool.