Theo Stråhlén » thexv

jQuery OSX Looking Dock

theo — Tue, 15 Jun 2010 10:55:18 +0000

I am very interested of what jQuery can do and the plugins there is keeps impressing me. I saw the world cup site Twitter did and at the top they were using some kind of dock with the flags of the teams. When I and Henrik Porseland were coding whatisxv.com we wanted a dock with students but the time ran out and we forgot about it.

But now I found jqDock! It’s very easy to use and i will show a very simple example here. You can do both horizontal and vertical dock menus and custom the looks of it very very easy. As I said before I wanted a dock menu with all the students in my class.

Take a look a the Demo I did

This is how I did it:
First of all to use this wonderful plugin you need jQuery v1.2.3 or later. And then you can download the plugin here.

Start with link the files in your tag. Link in the jqDock source (full or compressed) after jQuery itself as in the example below:

Create a div and put an ID or Class on it. Then fill it with images that you want in your dock menu. In my example:


...



...

To convert your HTML into a Dock, simply call the jqDock function.

This code will make the menu expand from the bottom and up and every picture will have a label on it. You can see it in my example.

It’s very easy to style your dock menu as well. Here is the CSS for my menu:

div.jqDockWrap{margin:0 auto;}

div.jqDockLabel {color:#fff;background:#000; font-family:Myriad Pro; padding:4px;
font-size:11px;font-weight:normal;margin-top:-25px!important;white-space:nowrap;}

div.jqDockLabel a, a:hover, a:visited{color:#FFF; text-decoration:none;}

#dockmenu{clear:both;display:block;width:100%;position:absolute;text-align:center;
left:0; bottom:0px;}

#dockmenu img{padding:1px;float:left;display:block;}

Good Luck creating your own dock menu with jqDock!

Invite site for XV

theo — Tue, 08 Jun 2010 09:51:37 +0000

Visit site: http://invite.whatisxv.com

For our class website we wanted to create a hype around it. We did secret sendouts to people in the digital industry with actual letters. It was a big secret and we wanted people to start talk about it. I wouldn’t say it was a huge success but people started talking.

In the third letter it was a link to our website and a password. When the user logged in with their personal password the logo of their company lighted up. You could also see other agencies that visited our site since their logo was lighted up.

My role
This was a part of the Marketing and promotion module so the whole class was idea developing. Me and a small group finalized then the idea. I was then one of the two developers of the site. Me and Henrik Porseland did all the Flash and I did all the back-end for it. John Karlsson and Alexander Gårdenberg was the designers for this site as well. This site was online for a month and the 15th of May we released our student directory with a great party at Sid Lee in Amsterdam.

Check out the invite site here

What is XV

theo — Tue, 08 Jun 2010 09:00:44 +0000

Visit Site: http://whatisxv.com

This is our student directory from my class at Hyper Island, Karlskrona. We did this site during the Marketing and promotion module and the purpose of it is to promote us as students and learn how to work with the whole group of 36 students.

What is XV?
XV means 15 in roman letters.

Three years ago Hyper Island went from the numbered crew concept to labeling classes with abbreviations, ordered by completion year and location. This ended a fine tradition. A tradition in which we would have been the 15th crew, instead of our current label DM11KNA, Digital Media 11 Karlskrona.
We felt that the crew tradition carried a great brand value and we wanted to rebrand the crew concept and salvage some of the value, so we created the secret Hyper Island Order and the 15th Chapter.

Process
This project was a huge one with 36 guys involved, many ideas and thoughts at the same time, do’s and dont’s & pros and cons.
The whole class become later divided in to different groups.

- Documentation
- Invite letters
- Invite video
- Finance
- Photo
- Web production

My role
My role in the XV project was developer.
I was involved in the whole idea development phase as well. Me and a small group of people finalized the idea of the website.
In production we were only four guys working on the website. The designers; Alexander Gårdenberg and John Karlsson and the developers, me and Henrik Porseland. We did it all in Flash first, but since all the hype around the iPad I decided to create a HTML/Javascript version of it as well. I was also responsible for the back-end of the site. I did a small CMS for the site and connected it to the flash and html version.

I’m happy with the final result and I learnt a lot during this module. A lot of AS3, Javascript and of course group dynamics.

Hope you enjoy the site!

Link to HTML version

Link to Flash version