shading the background of a document
I’m working on a new newsletter project, and will be using a huge amount of Ajax in it. One of the features I want to implement will be creating and editing entries in address-books, etc, with “popup” forms.
In order to make those forms really stand out from the rest of the page, I thought it was important to shade the rest of the page. A few seconds thought came up with the perfect solution.
What happens is that the form for editing/etc is created with a z-index 2 above the rest of the page, then a half-transparent black layer is placed between it and the rest of the page.
A few hacks were needed for most of the main browsers:
- for Internet Explorer, I had to use
filter:alpha(opacity=num)to do the opacity. - Opera does not support
opacity, so I used a semi-opaque PNG image. - Konqueror supports neither
opacitynor semi-opaque PNGs, so I used a cross-hatched GIF image.
I was originally brought to your site in look of ways to implement Ajax without using ActiveX in IE. For this reason, my IE settings were set to disable loading of ActiveX-objects. Interestingly, this caused the unexpected side-effect that the opacity filter doesn’t work; when I click the link with IE, the whole background turns to solid black 🙂 It’s interesting how Microsoft coders have decided to implement certain things in their browser. I’m just hoping IE7 brings something good to the scene for a change though I’m afraid they’ll end up messing up most of the things people have been working very hard to build during the last few years.
On another note; for some reason, the code examples on your site appear very strangely in Firefox… it seems as if the font is actully 3px high but stretched to 10px height (I can’t describe the effect better, sorry). This might of course be caused by fonts installed on my machine, but I thought I’d say this since they are truly illegible on my screen. No problems on other browsers, though.
Markku – nice catch on the ActiveX thing! I’ll take a look at that later today. Regarding the fonts; I usually do not do anything to the fonts in my examples, so if Firefox is acting up on your computer, I can only guess that it has to do with your default settings (in other words, it works for me 😉 ).
Further comment on the font issue (extreme apologies for sidetracking responses like this) – I think I’ve found out why Firefox messes them up on my system; it appears you’ve set the font to “terminal” that ain’t a truetype font, but only has default sizes of 5, 6, 9, 12 and 14 pixels, whereas stylesheet (possibly coupled with my settings) sets the size to 13 pixels and Firefox barfs and displays them all funny.
Anyway, the problem is fixed by me setting a clientside CSS for your site, so no problems here anymore 🙂