Vorsprung durch technik

1 August 2004

5 comments

A Blue Perspective: Vorsprung durch technik

With a nice rest after the launch of my new portfolio, I thought I'd share a few of the techniques I used to create it. (These are just the ones I found mildly interesting)

Collapsing/expanding panels

The site strictly adheres to the practice of unobtrusive JavaScript. This means that if you don't have JavaScript turned on then you won't notice any functionality missing, but if you do you'll receive all sorts of bonus functionality that adds to the browsing experience. One of these is the ability to expand and collapse the various panels. Each of the panel states is an alternate stylesheet – eight in total – that is switched on or off. Because the logo and menu are collapsible but depend on each other to affect the overall layout, their style changes are made using classes on the body tag. This also keeps the number of stylesheets down, as each additional panel doubles the number of possible combinations.

To facilitate the collapsing and expanding, I dynamically add specific anchor tags to each of the areas by modifying the Document Object Model after the page has loaded. These anchors call the collapsing function and set variables on themselves that track the status of their associated panel.

Screenshot pop-ups

Without JavaScript, clicking on a thumbnail takes you directly to the image file, but otherwise you get a pop-up that greys out the main site and displays the larger image. In the case of a project with multiple thumbnails the larger image also contains navigation to move between each of them.

The greying out effect is achieved using a PNG. This is natively supported in Firefox, Opera, Safari et al, but a hack is used in order for Internet Explorer 6 to render the transparency properly. This hack only works because the PNG being used is simply a 1 x 1 black pixel with 75% opacity, so IE can effectively "stretch" this pixel over the entire page.

Again, the images and navigation are dynamically added to the DOM using the appendChild() method. The "grey out" div itself is hard-coded into the HTML because Firefox had issues dynamically inserting it after the page had loaded (it destroyed the layout of the rest of the page).

In order to set the size of the image, and associated styles to the code, I also include the width and the height of the larger images in the href of their parent anchor tag. How? In the style of CGI parameters:

<a class="thumbnail" href="example1.jpg?400,300">link<a>

This doesn't affect non-JavaScript browsers, but is able to be parsed by JavaScript onclick handlers to extract the image name and dimensions.

CSS Hacks

Previously, I had only used hacks on rare occasions, but this site required pixel precise layout in combination with complex float interaction.

Pixel precision immediately rules out clean CSS between the two factions of {IE 6, Firefox, Opera & Safari} versus {IE 5.5 & IE 5.0}, because of the differences in the way they calculate the dimensions of objects. Float interaction immediately rules out clean CSS between IE and everything else, because of several bugs associated with IE's rendering of floats. The most useful CSS hack page I found was the one at www.dithered.com, which has an amazing number of hacks classified by browser version.

In respect of float bugs, I found that some of them could not be resolved using the varying solutions available on www.positioniseverything.net, and so was reduced to using the IE-only selector hack:

* html object
{
margin-right: -3px;
}

in order to remove "mystery whitespace".

To supply different widths to the various versions of IE, I used the backslash hack:

object
{
width: 166px;
w\idth: 162px;
}

to provide a rule which all browsers would apply, then provide a rule which excludes Win IE 5.x.

Win IE 5.0 had problems unto itself, most notably the weirdness that border-lines produced between menu options, so I supplied borders to everything except Win IE 5.0 using:

object
{
border-top/**/: 1px solid #60A3E5;
border-bottom/**/: 1px solid #074A8C;
}

Vertical centering

Although the site has a fixed height of 561 pixels, in Firefox and Opera it produces vertical scrollbars. This is because Firefox chokes on the normal method of vertical centering, using negative margins:

#canvas
{
position: absolute;
top: 50%;
margin: -281px 0 0 0;
}

Firefox loses control of the floats when there's a negative margin (don't ask me why), so I needed to use relative positioning – thus affecting the height of the page. Internet Explorer receives the (preferred) negative margin CSS, while Opera and Firefox (and anything else that supports it) receives the relatively positioned CSS, via the :lang(en) selector:

#canvas:lang(en)
{
position: relative;
top: -281px;
}

One disadvantage of both of these methods is that when the browser window is less than the height of the content, it will disappear at the top of the browser window. So, these styles are only applied by JavaScript when it detects that the browser window is the required height. By default, the page is aligned to the top of the window and therefore visible at all times.

Browser versions

As the site was designed for a broader audience than a weblog, I placed much more focus on Windows IE stability than normal, due to its dominance in the general market. The site works perfectly in IE 5.0 up, as well as all the latest browsers – Firefox, Opera, Safari. After having looked at my site's browser stats and seen that Mac IE 5.x constituted less than 0.1% of traffic, I made the decision that support for it wasn't vital, and it therefore looks a bit screwed in that browser. But, time permitting, I hope to support it sometime in the future using Bowman/Tantek's independent Mac stylesheet.

Categories

, , ,

Comments

  1. 1/5

    Rob Mientjes commented on 1 August 2004 @ 04:23

    Ah, another person showing of his redesign tricks (you _know_ who I mean). I didn't realise the 8 stylesheets that were involved... Cool.

  2. 2/5

    Faruk Ates commented on 1 August 2004 @ 07:33

    Simply amazing. Very impressively done, my respect and applause are yours. :)

  3. 3/5

    kronn commented on 1 August 2004 @ 08:16

    Thank you for showing your tools around... :-)

    I think I will have closer look at the source now that I know that eight (8!) stylesheets were involved for the panels.

    A little note: If you have to use a certain german expression (from an ad... nevermind): be careful. Every noun begins with a capital in german. "Technik", as you will know, is a noun and is therefore spelled "Technik".

    Anyway, as I read the headline in my RSS-Reader, I was indeed curios what "The Man in Blue" has to do with a german expression. Moreover, it's a very well chosen headline.

  4. 4/5

    The Man in Blue commented on 1 August 2004 @ 14:47

    Apologies for mangling your language :o]

  5. 5/5

    Rich commented on 12 August 2004 @ 02:37

    I Really love your site - and thanks for telling us how you pull the rabbit out of the hat!

    I'm having a nightmare figuring out how you do that great 'fade around the main container layer' though. :o)

    Why can't all sites be XHTML + CSS???

  6. Leave your own comment

    Comments have been turned off on this entry to foil the demons from the lower pits of Spamzalot.

    If you've got some vitriol that just has to be spat, then contact me.

Follow me on Twitter

To hear smaller but more regular stuff from me, follow @themaninblue.

Monthly Archives

Popular Entries

My Book: Simply JavaScript

Simply JavaScript

Simply JavaScript is an enjoyable and easy-to-follow guide for beginners as they begin their journey into JavaScript. Separated into 9 logical chapters, it will take you all the way from the basics of the JavaScript language through to DOM manipulation and Ajax.

Step-by-step examples, rich illustrations and humourous commentary will teach you the right way to code JavaScript in both an unobtrusive and an accessible manner.

RSS feed