After reading my previous One code fits all on cross browser code, you might think that making a good-looking site, which also runs on (almost) all browsers, is a well-nigh impossible task. Well, with an existing example I will prove to you how wrong that conclusion would be. I must point out in passing that the example that I'm going to show you is rather special. I'm going to show you Flyakite OSX. Flyakite will turn your Windows in to a complete Mac OSX-like interface. This web log won't discuss this though. The more interesting bit for me is the Flyakite site: http://osx.portraitofakite.com/. When you acknowledge that the site has nothing to do with Apple, your browser turns into a Mac.
It boots:
You can login:
Then you end up with this main screen.
Don't let the boot and the login screen dazzle you. There is no ingenuity behind it. It can be done easily with some (animated) gifs and JavaScript. Flash lovers don't even want to dirty their hands with it. The most interesting part is the main screen, which has all the properties of an ordinary Mac interface:
- An “Apple” (in this case Flyakite) and other system menu's
- A time and user indication at the right upper corner
- A search “widget”
- Double clickable and draggable icons
- Windows than can be dragged, minimized, maximised, closed and resized
- Dock style system menu
It looks very impressive doesn't it? Would you believe me if I told you that code wise, it isn't rocket science at all, and that in fact they've used some code that is at least 2-3 years old. That seems like an eternity in internet history. That might be a sore disillusionment for some of you. That means, in fact, that making things cross browser isn't something new and scary, and that somebody else has already paved the road - the Romans, by Toutatis!
Car audio and computers
They weren't exactly Romans, but there was a guy amongst them called Brian Gosselin, who hailed from Iowa. He's into car audio and computers in his spare time. This self-educated man started making cross browser scripts and collecting them on Scryptasylum a long while ago now. Unfortunately he stopped doing this at the end of 2004. That doesn't mean that these things are outdated and that the scripts are corny and nearly mouldy. To the contrary, the Flyakite site is a perfect example of code that is still very much up to date. The eye catcher on that site is the Dock style menu .
This type of menu was inspired by the Macintosh OSX dock with the common tasks/menus at the bottom of the screen. Brian's version shows a couple of icons which magnify gradually when you do a mouseover. A clarifying text is shown beneath the dock in case the icon itself is unclear. As with all the other tools, Brian did all this using only JavaScript. It's rather compact code, only consisting of 204 lines, blank and comment lines included.
One only needs to modify a couple of configuration lines and include the js file in order to make it run. Let's have a look at the specifics.
Most of you know how to do browser detection by determining the browser name and version. In JavaScript this van be done via
var browserName=navigator.appName; var browserVer=parseInt(navigator.appVersion);This is far from accurate since every browser can fake their identity and it's very hard to cover every browser (version) in existence. Check e.g. Zytrax Browser ID Strings or Psychedelix to have an overview. A far better method is the one Brian uses, namely using object detection. Each type of browser supports (sadly enough for cross browser reasons) different types of objects. Brian does this via the following code:
var w3c=(document.getElementById)?true:false;var ie4=(document.all && !w3c)?true:false;var ie5=(document.all && w3c)?true:false;var ns4=(document.layers)?true:false;I would add Opera though.
The complete testing table looks like this
document.layers NS4 document.all MIE 4+ window.opera Opera document.getElementById MIE5+ or NS6+, thus also Mozilla, Firefox, etc. Brian names it W3C document.getElementById && !document.all NS6+, thus also Mozilla, Firefox, etc.
It might surprise you to know that the rest of the code does nothing more than detect where the mouse pointer is.
document.onmousemove=getMxy;where
function getMxy(v){mx=(ie5||ie4)?event.clientX:v.pageX;}Based on that information and the configuration lines, it knows how to resize the image and eventually which text to put beneath the dock. Yes, indeed. All it does is resize the image. No rocket science at all.
In drag (and drop)
The next noticeable feature is the drag and drop icons and windows. The people from the Flyakite site use a 2-line code library. The only problem is that it's not readable, due to the fact that as much code as possible has been squeezed on to each line, resulting in lines of nearly 4000 characters. I much prefer Brian's drag and snap code of only 77 lines. This code will enable you to make every item on an HTML page draggable and let it eventual snap to each other or to a virtual grid.
The nec plus ultra is the DHTML API for dragging and dropping images and layers by Walter Zorn, who is into homebuilt recumbent lowracers btw. The API has some remarkable features such as elements resizing, drag & drops (within a predefined range), multiple drag & drop items, interfacing with forms, cloning, changing the cursor, sliders, etc. It has an extensive command list to enable this.
Besides being draggable, the icons are also double clickable. Guess what. It's standard W3C intrinsic event. Everybody knows onmouseover, onmousedown, onclick, etc. This lesser known feature can be useful, certainly if you know that your target public doesn't make any distinction between double clicking for starting a Windows application and the single click for hyper links.
The last bit is the drop down and context menus, but I won't elaborate on that too much though. There are plenty of APIs available, both for free (via e.g. the in the web log previous mentioned Dynamic Drive and Scryptasylum) as commercial (e.g. DHTML-menu)
Conclusion
Some of you might find this simply playing around and are only interested in the serious stuff. I think that this example proves that making things cross browser isn't that difficult and in fact, one doesn't have to code oneself if one knows where to look. It's just a matter of finding the right code for the right purpose.
2 Comments
