Javascript + Blogger != DHTML Bliss

I'm writing you today to tell you about my recent foray into Blogger template coding. I was at work today tasked with the demeaning chore of QA testing. You see, today I found out that one of my company's web application products, which I had been working on, was going live for a big client on Monday. We hadn't even finished all of our bug fixes when I was told at lunch that we needed to smoke test the application. I was new to the term 'smoke testing' as it applied to software. Back in my avionics technician days, we used the term 'smoke checked' to describe what we did to a piece of avionics gear which we fried. I didn't like where this was going.

Things got a lot better when I was then told 'smoke testing' this application normally takes 2 full days for 2 testers to complete. Well, it was noon on Friday and I was planning on actually doing something this weekend. So much for that idea.

Back at my cubicle, I opened the document containing all of the 'smoke testing' procedures I needed to perform. After losing all interest in testing 15 minutes later, I began thinking about my blog and the cool little floating DIV which I was excited to add to it. You see, I had spent most of my time yesterday afternoon to creating this floating DIV as a side project for the company app I had been working on. It worked great in that app, so I was sure it would work fine on Blogger.

I've never prided myself on being always right. After spending a few minutes adding the javascript and html to the blog site, I tested it. In 'preview' mode it worked beautifully! I was full of joy! The little box which represented the DIV centered itself in the middle of the window. When I scrolled down, it floated down and centered itself. When I scrolled to the side, it recentered itself again. What a fun little gadget!

The published version, however, was far from adequate. Instead of centering itself in the window, it centered itself in the entire body of the page and stayed there. How could this be? How could some simple javascript which worked fine in another application, which worked fine in the blogger 'preview' mode after editing the template, fail once published?

I got on my IM and messaged Dan. I told him the world was coming to an end because Blogger was being evil. He told me he had similar problems with his page layout and said it was the blogger banner on the top of the page which was to blame. Indeed, Blogger does something to the page when publishing it. It adds the top banner and seems to do other things which interfere with the element hierarchy of the page. I figured I would save this problem for when I got home since I had so much retard work ahead of me.

Later in the evening, after getting home and porkin' out on some steak, I researched the issue. The problem was simple! The hierarchy of the page DID get modified by Blogger. Let me show you what was goin' on. Here's a portion of my javascript which wasn't working after being published:

var lockMsg = document.getElementById("FloatingDiv");
var viewHeight = document.body.clientHeight;
var viewOffset = document.body.scrollTop;
var viewWidth = document.body.clientWidth;
var viewOffsetLeft = document.body.scrollLeft;

Here is the version of code which worked:

var lockMsg = document.getElementById("FloatingDiv");
var viewHeight = document.documentElement.clientHeight;
var viewOffset = document.documentElement.scrollTop;
var viewWidth = document.documentElement.clientWidth;
var viewOffsetLeft = document.documentElement.scrollLeft

As you can see, the document object which I had referred to in my initial code was nested one level deeper which caused the document.body.scrollTop attribute from not being available.

After making this fix, I was able to get the floating DIV to work properly. If you haven't noticed, I have placed the floating DIV on this page, floating near the middle of the window. If anyone wants to complain about how plain it is, go for it. I'll need the motivation if I'm going to be changing it. (If any readers have any questions about any of the code or topics in this article, feel free to ask! You can email me at jayndan.blogger@gmail.com).

For now, however, I am off. Stay tuned for more!

~Jay~