William’s Blog

I discovered a tricky problem with WinIE involving a containing div that uses the filter style property to render a transparent background, and a nested div with the overflow property set to auto. The problem is that if the nested div has a scrollbar, the scrollbar is unusable – clicks on the bar aren’t being registered. IF I put the filter property on the nested div the problem goes away, but because the nested div is several levels deep, the background for that layer doesn’t reach the outer edges. If it was a simplier design I cound probably put the background on the lower layer and use padding instead of margins to control the position while making sure the background looks right, but that isn’t an option in this case. The solution is to add the style declaration position: relative to the div with the overflow. Now I can have the transparent background on the top layer, and a working scrollbar on the lower layer.

I’m creating a dragable window that need to be resizable, and translucent. The problem is that the header has a curve in it, so stretching the graphic doesn’t really work. My solution was to create 2 floated divs with a width of 50% with each having a background of either the left half of the graphic or the right half. The idea is that as the window stretches, more of the background is revealed, and the curve remains more or less seamless.

Here is the header when the window is short:

And here is the header when it’s wider:

It’s all done in CSS instead of using JS tricks, so it seems like the perfect solution:

.window .header .left
{
float: left;
height: 27px;
background: url(../images/window_header_left.png) no-repeat;
width: 50%;
}

.window .header .right
{
float: right;
height: 27px;
background: url(../images/window_header_right.png) right no-repeat;
width: 50%;
}

The problem is that this only works if the width of the header div that contains the 2 floated dives is divisible by 2. Otherwise, it seems the width of the divs are rounded down which will cause a 1 pixel gap in the middle, which is visible here:

And in IE it seems to round up, which is even worse:

If I change the CSS so that the .left and .right divs are both floated left, then Firefox will make one of the 50% divs 1 pixel wider, so it fills up to 100% which is perfect, but IE and Safari will only move the gap to the right instead of in the middle, and the gap will still be visible because the header no longer lines up with the div below it.

So the only solution, reluctantly, is to use JS:

var totalWidth = document.getElementById(header).offsetWidth;
var leftWidth = Math.floor(totalWidth / 2);
var rightWidth = totalWidth – leftWidth;

document.getElementById(header_left).style.width = leftWidth + ‘px’;
document.getElementByID(header_right).style.width=rightWidth + ‘px’;

Now I have a dragable window that can be resized and remain translucent that works in IE, Firefox and Safari. It would be nicer to have an all CSS solution, but only in Firefox does 50% + 50% = 100%.

When I’m not in front of the computer, I’m spending time with my finacee Jennifer, and one of the things she loves to do more than anything else is go to the green market on Saturday mornings. So even though it has nothing to do with coding, I’m writing about what I observe while holding bags of fruits and vegetables so that next year I might better know what to look for as the seasons change.

I’m starting this at the end of May, so a lot has already come and gone. Ramps are mostly done with – Jennifer used the rest of our ramps to make a ramp puree and wasn’t happy with the color because the leaves had started to turn yellow. It still looked awfully green to me and I can’t imagine it being any greener being an improvement. I love ramps though, so I loved the ramp puree, even if it did look like the green ketchup Heinz used to make.

Morels are starting to show up and they’re damn expensive! After looking for them for weeks, one stall has started to sell them and they want $40 for a 1/4 pound! A week after they showed up in the green market they showed up in the Harlem Fairway, and they want $40 for a 1/2 pound. In the end Jennifer bought them from the restaurant where she works at $11 for 1/2 pound. I hate mushrooms, but I Morels are different, Morels actually taste good.

Strawberries are also starting to show up, and the flavor, or lack thereof, varies widely between vendors. It’s really important to taste the strawberries before buying them, but only one vendow went out of their way to give people samples – probably because theirs tastes the best. We’re still cautious – they were handing out small strawberries that tasted great, but selling large strawberreies that we were a little suspicious of. We wanted the small strawberries but one lady said they were for samples only. So we asked someone else and he sold them to us. What we didn’t eat on the spot Jennifer used to make icecream. Using the same strawberries, the same mixture, and the same ice cream machine (it makes 2 batches at once) we still ended up with one batch being more red than the other. The redder batch didn’t taste as good as the other batch, but we have no idea what caused the difference.

It was hard to find Peonies that weren’t already in full bloom this week. Jennifer was upset because the best Peonies were sold out by 9am and we didn’t get there until 10am because I didn’t want to get out of bed. Luckily one of the vendors refreshed their flowers with some news ones in the back of their truck, and even though there weren’t white like she wanted, Jennifer was still able to find some Peonies she liked. Next week she’ll have to find a new white flower because the vendow said this will be the last week they sell Peonies.

This is my first post chronically my trials and triumphs as I try to put together my own AJAX library, largly inspired by the Yahoo! library but also freely adapting from any good ideas I find on the web or in books.

So why not just reuse the Yahoo! library or any of the other excellent libraries out there? If I ever need to build a heavily trafficked site or work with a team of developers then yes, I’ll probably use one of the existing libraries. But for now, writing code for myself, I want to learn how to write object oriented javascript and the best way to learn is to try and do it myself.

A little bit of background – I started playing around with HTML in the mid-nineties and managed to find work where all I need to know was how to turn a Photoshop design into a web page. CSS back then wasn’t used, and if I need Javascript I copied and pasted it from one of the many Javascript sites that existed for jus that purpose.

Eventually I started migrating over to CSS, and went from creating web sites with lots of tables, to writing web sites with lots of tables with lots of cells with their own classes, to writing tableless layouts with a minimum number of classes. I also took a Cold Fusion class, which was my first introduction to programming. Beside learning the Cold Fusion syntax, I also learned the concepts of programming, which I never knew up to then. Once I learned those concepts I was also able to learn ASP and then PHP.

And then the web became object orientated.

For the longest time I thought writing object-orientated code on the web was a waste of time, and then I build an e-commerce site in PHP using my own checkout system and had to edit it later and that’s when I realized how fragile a system built on a bunch of inter-dependent functions can be, especially when the functions are also producing HTML.

So I’m starting to use object-orientated programming in PHP and learning ASP.NET and now it’s time to use these same techniques in JavaScript. I’m developing a proof of concept site for my job and I recently threw out all the work I had done up to this point and am starting over, this time buidling it as a AJAX-heavy site with customer AJAX libraries to make it all work. There is no reason for the site to use AJAX or any of the gratutious effects I’m building into it, but it’s a learning excercise, so I’m allowed to create a horrible UI and learn from my mistakes.