Since I don’t “know” Javascript, jQuery is a godsend. It allows you to take advantage of Javascript’s DOM abilities without having to write tons of code. I’m learning Java in school, so jQuery functions are well within my level of understanding.

The Problem

One quibble I have with jQuery is that pages using it often aren’t as accessible as they could be. For example, if you go to Web Designer Wall’s demo page and turn off Javascript, the demos break. In some cases you only lose the flashy animation, but in examples where jQuery allows you to slide previously-hidden content divs into view, the demos become unusable.

This is because the sliding effect is implemented by styling the elements to be hidden with display: none, effectively removing them from the page. When the jQuery function is triggered (generally by a user’s click), the element is toggled to an active state and slid into view.

So when you turn Javascript off, you’re left with the CSS display: none hiding your content.

And so I set out to find a way to implement jQuery’s content-hiding animations while retaining accessibility. In particular, I attempted to create an accessible accordion-style menu, meaning that the menu defaults to showing all content sections when Javascript is disabled.

The Solution

Since the root of the problem is that the display: none in the stylesheet hides the content, all we’d have to do is remove this line of CSS, right?

Wrong! If you do this, then the accordion loads with every section open by default, with Javascript enabled. This isn’t ideal since we’re using the jQuery effect to only show one chunk of content at a time. So, ideally we want a way to only render the display: none when Javascript is enabled.

After a bit of research and a single line of code, I’ve got a fully functional, accessible sliding accordion menu. Within the jQuery API, there’s a set of functions for manipulating a page’s CSS. Using the css() function, I was able to add the display: none to the accordion’s content paragraphs using jQuery instead of CSS:

$(".accordion p").css("display", "none");

Here’s the result:

Click to view demo

Since the paragraphs are styled to be hidden by jQuery, it defaults to display all content when Javascript is disabled. We now have the best of both worlds: the classy sliding jQuery animations and a fully accessible menu. Success!

For more information on jQuery and examples of it in action, check out this article on SitePoint and the second article in Cameron Moll’s 4-part series, The Highly Extensible CSS Interface.

I’ve had my Sager NP2090 laptop for about 2 months now, so I’ve had plenty of time to wrestle with it and set everything up.

The 2090 is a serious workhorse and very affordable. I bought mine OS-less for $1500. VoodooPC’s sells 2090’s under the model “M:152” for about $3300. Painting it red isn’t worth more than doubling the price of the laptop, in my opinion.

First off, here are the laptop’s specs:

• 15.4” WSXGA Matte Screen (1680x1050)
• Intel Centrino Duo T7500 @ 2.2GHz
• 2GB of RAM
• Nvidia GeForce 8600M GT w/ 512 MB
• Full specs here

and what I set out to achieve with it:

• Dual-boot Windows XP and Ubuntu
• Use WinXP strictly for gaming
• Use Ubuntu for everything else
• Thus, get Ubuntu to function as a usable, practical OS

Windows Setup

I began the setup process by turning the machine on and inserting my XP Home CD. The blue windows prompt screen appeared and began readying drivers and such for the install. Subsequently, it returned an error message complaining about “PCI.SYS.”

After finding and reading through documentation of the issue, I’m assuming that XP SP1 is incompatible with the 2090’s hardware. Maybe the processor or graphics card? Whatever. Following the guide, I then compiled and burned a Slipstreamed SP2 CD. Basically what this does is inject the updated SP2 files into the XP install I already had, allowing me to install a fresh copy of SP2 straightup.

I rebooted, put in my custom SP2 install, rebooted again and breathed a sigh of relief as Windows prompted to install. After about an hour and a half of formatting and installing, I was welcomed by the XP login screen.

However, after trying three different graphics drivers (the one on the provided CD, nvidia.com, and a third-party one from laptopvideo2go.com, I started to think the laptop’s screen was broken. It constantly flickered, white portions of the screen were a pinkish/red color, and parts of the screen appeared distorted and fuzzy. I don’t have any pictures, because when i took screenshots, they appeared fine and I couldn’t get a photo that showed the distortion right.

I was just about to pack it up and send it back to Sager when the screen seemed to magically fix itself. The flickering and distortion stopped literally as I was calling Sager tech support to get the address to send it back to. I couldn’t breath a sigh of relief just yet though, because at that point, when I applied pressure to a certain spot on the back of the screen, it would get all distorted again until I let go. This kept me worried, but I ignored it for the time being.

Since then, the problem has seemed to have completely alleviated itself. I’m guessing that the driver from nvidia.com decided that it actually works after the screen was on for a day or so.

I then spent the next few days downloading and installing all the games I own. I bought and started playing Bioshock, which ran like a dream. It runs decently well at max settings, however I toned them down just a bit to get a boost in FPS. Half-Life 2 runs perfectly at max settings as well, with FPS ranging from ~70 to 200.

Ubuntu Setup

For the installation of Ubuntu, I followed this guide on installing it on a Compal IFL90. The IFL90 and the Sager 2090 are identical laptops, just rebranded.

It appears that the guide has been updated, as of October 6th, to install Ubuntu 7.10 Gusty Gibbon, as opposed 7.04 Feisty Fawn, which is what I currently have. The installation process I went through left me with Feisty running Gutsy’s 2.6.22-11 kernel. I highly recommend following this guide if you want to get Ubuntu running on a Sager 2090.

In a nutshell what you have to do is install Ubuntu with an alternate desktop CD (the traditional LiveCD’s don’t work for some reason) and then fiddle with virtually ever driver to get everything to work properly. Admittedly a tad tiresome and laborious process, but it’s what you have to pay for open source software with such high-end hardware.

Instead of regale you with the arbitrary minutia of my software setup, here’s an overview of the apps I’m currently using:

• Firefox
• Rhymthbox for music
• VLC and Gnome’s stock Movie Player for videos
• GAIM for instant messaging (I miss Trillian…)
• XChat for IRC
• Skype for VOIP
• Deluge for torrents
• Filezilla for FTP
• Bluefish and Photoshop for web design work
• Gedit for programming (compile with terminal)
• OpenOffice for writing/schoolwork
• Compiz Fusion for sweet eye candy
• Avant Window Navigator for OSX-like dock

As a quick sidenote, I strongly recommend Avant Window Navigator (AWN) to anyone using Linux. This program rocks. Admittedly, it stole the dock idea from OSX, but hey… it has the stacks feature before they do.

If you want more info on Linux apps, or anything else, feel free to leave a comment.

Final Thoughts

This is the first time that I’ve used Linux as my primary OS and the switch wasn’t really that hard. Once I got past of all the bugs and got stuff working properly, the only problem has been getting accustomed to using Linux applications.

My main concern at the moment is developing a good design workflow. With Photoshop, HTML-Kit, and SmartFTP in XP, I feel that I had one down. I tried learning GIMP, but it’s confused user interface and lack of tools/options left me with cold feet. I’m currently running Photoshop through Wine, which is still less than ideal. However, I’m hopeful that future versions of Wine and/or GIMP will fix this problem.

Overall, I’m happy with my setup. Having to restart and boot into Windows if I want to play a game doesn’t bother me. It’s been nice to have a distinct separation between my gaming and the rest of my information-based activities. My Linux desktop isn’t littered with shortcuts to all the various games I own and my Windows desktop looks very clean with a single line of launchers at the bottom. Simplicity is bliss.