Expanding and Collapsing Divs

INTRO

Daniel Stocks has a really great example of a number of collapsing jQuery menus on his website and also on GitHub.

I took his examples and eliminated all of the ones that weren't what I wanted for my website. The one I chose was the "Custom Show and Hide" example. I pulled out of the HTML all of the other examples and restyled it to my liking. You can see a demo of it here. 

SET UP

To enable the JavaScript needed to animate the collapsing divs you will need to link to the following JavaScript files: 

The code goes in the head of the page and looks like this:

MARK UP

To enable the collapsing function on a div the following id needs to be given to it:

The div with the "custom-show-hide-example" id needs to contain all of the collapsable divs.

The code for the collapsing divs is fairly straight-forward. There are h3 tags on the text that appears over the collapsed div and the content is contained within a standard div.

The collapsing divs can contain whatever content a normal div can, links, images, lists, etc.

SOURCE FILES

You can download all of the files needed for this page here. The files included are an HTML and CSS file, an image folder and a source folder that includes the JavaScript files needed to add the collapse functionality to the divs.

Two Sites or My Love Letter to Feedly

I was really sad to hear that iGoogle was being discontinued later this year because it's been my start page for years now and I wasn't really sure how I'd live without it. As it turns out, I don't have to. After Googling "iGoogle replacement" and looking into a few alternatives that I wasn't happy with, I found Feedly.

Feedly is everything I liked about iGoogle and more. As a disclaimer: I need to mention that I didn't really use iGoogle for much more than a feed reader but for some reason (which escapes me at the moment) Google Reader didn't do everything I needed either. Back to Feedly. It's an easy to use, attractive, customizable start page. It imported all my Google Reader feeds automatically and I was able to adjust the settings and layout of the page to my preferences. It actually seamlessly integrates with Google Reader, so changes I make in Feedly are implemented in Google Reader and vice versa. It also imports my Twitter and Facebook feeds, so I can get a quick look at all of my daily sites in one compact, tidy place.

And the visual design of Feedly works nicely. The site is as minimal as possible which is perfect because it handles diverse kinds of content, and a lot of it. It has a few different options for colors and the typographic hierarchy of the articles makes the content inviting and easily scannable. I also like how Feedly presents an article (at random, it seems) as a featured item, with a larger picture and text. It makes it feel like a personalized online magazine (which it basically is).

A couple of really nice treats that Feedly has designed into their interface are a self-collapsing left-hand navigation when your browser window is small and a some nice, minimal (but intuitive) icons for the various utilities and features available. They also provide a bookmarklet for your browser to instantly subscribe to new feeds.

A couple of things that I don't like about Feedly are more in the functionality than the design. It seems a little glitchy at times, especially when I mark certain content as "Read" but then it magically returns to my feed again later. It also tends to refresh the page at inopportune times, sometimes merely losing my place on the page, but sometimes interrupting the article I'm reading or video I'm watching. These are certainly annoying but not enough (for me, at least) to ruin the experience entirely. Hopefully these are problems that they are aware of and are working to fix.

The other site that I have open automatically when I launch my browser is Designspiration, which is a great site for design inspiration (just in case the name wasn't enough of a hint). It's simple and uncluttered and filled with great work from around the world, which is exactly what I want to see when I go online.

In Repose

In Repose is my entry in a game design competition called Two Games One Name. It's a very short story game intended to be played by parents and children as an alternative to regular bedtime stories.

The competition assigns names to the participants and we try to turn them into games. Each name is assigned to two people so that we can see how different they turn out. Each name is also given a pair of constraints which the designers can use to make sure that their game designs go in different directions. My constraint was to create a game where no writing was required.

You can download the game here.

Other Worlds Cover Design Comps

These were all rejected by the client, but I think they turned out pretty nicely, so I'm posting them. On to round two of comps.

Pride T-shirt

I designed this shirt with my friend and ex-coworker Nick in mind.

This is pretty much a typical chat exchange with him:

4:44:43 Nick: yo
4:45:03 Nick: what size is your epson printer?
4:45:14 Nick: sorry what is the widest it will print?
4:46:49 Nick: are you guys playing games?
4:46:57 Nick: is that why you don't answer my chats?
4:47:05 Nick: or is it because I'm brown?
Changed status to Offline (5:08:13 PM)

BMX Charts

I posted these on BMXboard (Click to Enlarge).

Wood - Skate & Create 09

Skateboarders continue to put BMXers to shame in the creativity department. I really enjoyed this (despite the slap in the face).

Stolen from: booooooom (Thanks Pete for the heads up).

Game Day: July 12 2009

Henri and I played some Marvel Spiderman & Friends Memory and also Slamwich. There are far too many cards in the Memory game, I'm going to try to use them to make a game that Henri will like. Maybe with a city map and moving Superheroes around or something like that.

Pirates Game Name

Not sure what to name the Pirate board game I've been working on. Here's a few options:

Treasure Island
Danger Cove
Perilous Seas
Treasure Hunters
Brigands on the High Sea

(these are all terrible)

Geeko Builder

A digital paper-doll for your enjoyment, from Axis41/Novell. Nothing ground-breaking, just a fun project.