You are currently only viewing posts within the category: Site news
You are here: Home → Archive → Site news → 2004 → March → 28th → this post
28th March 2004, evening time | Comments (22)
| Status | |
|---|---|
| Code usage | No longer in use on this blog |
| Updates | None |
| Demo | Available |
| Downloads | Available |
Good God, man! Not another revision!?
Yes, another revision. Shudupa ya face.
Version 1 naively attacked the problem at the thin end of the wedge, by looping through all the <dl>s on the page and pixel-sizing their widths.
Version 2 took a step forwards from that and used CSS style-switching to alter the width attributes of the individual <dl>s. However, the loop still remained.
This version (and I hope it’s the last, but I doubt it), takes a big leap forwards, and re-focuses the Javascript and CSS. No longer am I looping through and targeting the <dl>s directly, now I’m simply altering the class of their containing <div> (div#left), and letting the browser’s CSS engine do all the work.
Let’s take a look at the revised Javascript…
The first thing to note is that I’m using Javascript to block Opera and Mozilla 1.4. Why? Well, those are the two browsers which don’t like my floated, ‘rows and columns’ layout. So until they learn to behave, they only get the simple styles.
The second thing to note is that all that pixel-sizing and looping has gone, to be replaced with a single conditional rule. Depending on the outcome of this rule a class (.wide for wide browser windows, and .narrow for narrow browser windows) is applied to div#left, allowing the relevant visual changes occur.
// Event Listener// from http://scottandrew.com/function addEvent(obj, evType, fn){if (obj.addEventListener){obj.addEventListener(evType, fn, false); return true;}else if (obj.attachEvent){var r = obj.attachEvent('on'+evType, fn);return r;}else{return false;}}// from http://www.kryogenix.org/addEvent(window, "load", resizeBooks);addEvent(window, "resize", resizeBooks);function resizeBooks(e){// adapted from http://www.dithered.com/javascript/browser_detect///**************************************************************//// sniff user agentvar userAgent = navigator.userAgent.toLowerCase();// if Mozilla 1.4 then quitif ((userAgent.indexOf('gecko') != -1) && (userAgent.indexOf('gecko/') + 14 == userAgent.length) && (parseFloat(userAgent.substring(userAgent.indexOf('rv:') + 3)) == '1.4')) return;// if Opera then quitif (document.all && window.Event) return;//**************************************************************//// check this browser can cope with what we want to doif (!document.getElementById) return;var leftDiv = document.getElementById('left');if (!leftDiv) return;if (!leftDiv.offsetWidth) return;// check if div#left is wide enough to accept two or more floated <dl>sleftDiv.className = (leftDiv.offsetWidth >= 621) ? "wide" : "narrow";}BTW, if you’ve never seen this kind of statement before:
leftDiv.className = (leftDiv.offsetWidth >= 621) ? "wide" : "narrow";It’s called a Conditional Operator, and it’s a great space saver (in both PHP and Javascript).
The CSS rules have also been simplified. div#left’s default class (applied in the XHTML itself) is .narrow. This ensures all browsers start off with the same, easy to handle layout; where each book/author is laid out one to a line.
When the browser window widens, Javascript switches div#left’s class to .wide, and all the floaty styles are applied. When the window narrows again, the class is switched back to .narrow.
Nice and simple.
/* default style/style for narrow windows */body#reading div.narrow dl {border-bottom: 1px solid #ddd;display: block;float: none;height: 170px;margin: 0 0 20px 0;padding: 0 0 0 113px;position: relative;width: auto;}/* style for wide windows */body#reading div.wide dl {border-bottom: 1px solid #ddd;float: left;height: 170px;margin: 0 25px 20px 0;padding: 0 0 0 113px;position: relative;width: 150px;}/* style the div that contains the book image */body#reading dl dd div {background: url('/blog/commonpics/bg_image.gif') no-repeat bottom right;left: 5px;position: absolute;top: 5px;}Well, for starters the whole thing conforms to the ideals of working with Javascript: give people something perfectly acceptable and usable to start with, and then use Javascript to enhance that for the more advanced browsers. In this case the default layout (.narrow) is the one that every browser can render, but with the application of some Javascript, it swaps to the nicer looking, and more functional floaty style (.wide).
Secondly, by applying the CSS changes higher up the tree (to the containing <div> itself) I remove the need to find and then loop through all the <dl>s on the page.
And lastly, because it lets me directly block the floated-layout from those browsers which can’t handle it. I previously depended on CSS hacks to filter out Opera, but Mozilla 1.4 always slipped through the net. This way I catch both of them.
The only downside to this method is that the Javascript doesn’t kick in until the page has fully loaded. Why’s that bad? Well, imagine you’re on dial-up, and the page is going to take twenty seconds to fully load. After five seconds the text appears, and you start to read it. Fifteen seconds later, when you’re halfway down the page, the Javascript runs — it re-styles everything, and suddenly you’ve lost your place. You have to scroll up again to find it.
Not so good.
I guess I’ll have to wait and see what the response is like on this, before I decide if it’s a problem.
I’m always happy to get feedback and suggestions for improvement on this (and anything else I post), so please let me know if sommit’s wrong.
Many thanks to Mark Wubben and Dean Edwards for suggesting I look at this thing in a slightly different way. Also thanks also to Ethan, Drew, and Reid, who kindly checked the pages on their browsers. Again and again, and again.
Jump up to the start of the post ↑
A collection of miscellaneous links that don't merit a main blog posting, but which are interesting none-the-less.
Our enemies are innovative and resourceful, and so are we. They never stop thinking about new ways to harm our country and our people, and neither do we.— George W Bush (9)
Stuff from the intersection of design, culture and technology.(3)
A selection of blogs I read on a regular basis.