Steve Cochrane

I was thinking, what better way to scare away any new readers coming to see the recent redesign than an incredibly long and technical entry on CSS/Javascript techniques? Any non-web nerds out there may want to hit the (shiny new) ‘Next Entry’ link to your right. But this is kind of the main focus of my site anyway.

My pride and joy for this redesign is what I guess I will refer to as the “scrolling speech bubbles”. Achieving this was an incredibly long and complicated process, but I maintained hope and believed throughout that it would eventually work, and, eventually, it did. Which is great, because if I wasn’t able to pull off this effect, I probably would have had to scrap everything and start over with a different design. Here are the finer details on how it works:

1. There is a pointer image always in front of the owl’s beak which is position:fixed along with the owl, so that it is always there while you scroll around the page. This image overlaps the dialogue bubbles by a pixel so that it appears to be connected to the bubbles. It does this with z-index (speech bubbles have a z-index of 2 while the pointer has a z-index of 3).

2. That’s all well and good when not scrolling, but when the pointer goes over a gap between bubbles, it still appears and is connected to empty space (see Fig.1). This simply won’t do, so my solution was to create a “pointer-blocker” image, which is a transparent png that has a fade in and out of the page’s background color, made to overlap the pointer and give the illusion that the pointer is fading into the background.

Fig.1: The pointer image caught between speech bubbles.

3. Of course there are a variable number of speech bubbles on the page, so I then created a DOM script that inserts a div for the pointer-blocker at the bottom of each bubble’s div. The pointer-blocker uses negative positioning to pop out of the bubble div’s bottom left corner and position over the gap between the bubbles (position highlighted in Fig.2). This also keeps these empty pointer-blocker divs from ugly-ing up my beautiful, mostly semantic markup.

Fig.2: The area of the pointer blocker represented by neon green.

4. However, this wasn’t quite working yet. I gave the pointer-blocker a z-index of 4 to go over the pointer, but it still wasn’t displaying on top of it. This is because the pointer-blocker is contained within the speech bubble, which has a z-index of 2, and apparently, you can’t give a child a higher z-index than its parent.

5. This is where the fun really begins. I determined that these pointer-blocker divs needed to be inserted at the end of the body element so they’re outside the bubbles and they can have whatever z-index value they want. However, they still need to derive their x/y position dynamically based on each bubble’s bottom corner. So, my script inserts a pointer-blocker into each bubble div as before. The script detects the x/y positions of each pointer-blocker and stores them in an array. Then the script removes these pointer-blockers from the document and makes new ones at the end of the body element, absolutely positioning them back where they were originally via inline styles! Thus, they retain their position relative to each bubble’s bottom corner but can have a higher z-index. Phew.

6. The last hurdle was that these pointer-blockers, having a z-index of 4, were going over the body’s background image (the smokey text at the top of the screen, see Fig.3). The smoke had to be able to go on top of the pointer-blockers (z-index of 4) but under the speech bubbles (z-index of 2). Which is impossible. The solution was to cut the smoke image into three pieces. The left piece is just the piece from the left edge of the page to where the pointer-blocker goes over and doesn’t really matter. The middle piece is the same width as the pointer-blocker, and is a transparent png with a z-index of 5. The right piece is a non-transparent png meant to go under the bubbles, with a z-index of 1. These are all positioned one right next to the other to appear as one large image.

Fig.3: The pointer blocker visible over the smokey text.

So, in case anyone was wondering why this redesign took roughly eight months off and on, this is mostly why. That and my incredible procrastination abilities. But I’ve done some things here with position:fixed and z-index in combination with DOM scripting that I haven’t seen before, and I feel it was time well spent.