Mootools.net homepage features a very cool main sections navigation where the content slides to reveal more information. I wanted to accomplish something similar but do it in a way that doesn’t require me to use the mootools library (no offense, I just use jQuery more.) The information below is in no way optimized to be used but is currently a rough draft.

The setup
I created three div tags that will slide open to reveal more information, but at the same time shrink the inactive div tags. So below is the code I used for the HTML:

<div id="accordian">
<div id="blue"></div>
<div id="green"></div>
<div id="purple"></div>
</div>

‘accordian’ has a set width to hold all three Div elements. Each div inside of ‘accordian’ contains both onmouseover and onmouseout actions, onmouseout being just the same function whereas (currently) each onmouseover activates individual functions for each div.

Here’s an extract from the JavaScript used to manipulate each Div, in this example we are manipulating the div with an id of ‘blue’:

function selectBlue(){
stopAll();
$("#blue").animate({width: "194px"});
$("#green").animate({width: "132px"});
$("#purple").animate({width: "133px"});
}

As you can see, I’m using the standard .animate function in jQuery to change the width of all three div tags. Blue, being the one we hovered over, gets extended to 194 pixels in width and the other two to 132 and 133 respectively. You would want to calculate the sizes to match up with the outer div (in this case, accordian.) ’setopAll’ refers to a function that stops all animations on all three div tags that may be present.

You can view a live demo, or download the source. I will be trying to create a better formed script that will be a little easier to use.

Despite that fact that I almost missed the expo complete, both being pretty busy and not really knowing about it, I did make it today to see what’s going on. I did a quick browse through the exhibition hall and talked to a few good people from all the corners such as Yahoo Developers group, Nokia and a few other startups.

This afternoon, I’ll be attending two sessions: ‘Create a Social Network - It’s Easy!’ and ‘ADobe - RIA Applications and the Web.’ Both being roughly 50 minutes and should be extremely interesting. I might post about it during or after each sessions.

[ Web2.0 Expo ]

So I am working on incorporating a tagging system into Orange. The first of the few basic tags would be Home, Play and Work. Not sure if I want to add more of have users add their own. It’s definitely work a look. Below is a quick walkthrough of the preliminary tagging system.

Let’s have a look at the selection screen:








It uses a simple drop down selection menu where you can choose pre-made tags. When you add the task, the JavaScript will do the rest in adding the tag to the task in the list below it. Not much room in here for creating your own tag, but will see how to implement it.

Tags in the list:

The screenshot above, shows a left-aligned tag system. Which links each task to its own tag in a more straight forward way. The other layout, below:

In this screenshot, the tags are right-aligned. This layout creates a more cleaner look for each individual task, but the problem occurs with a person easily connected a task to its tag.

No I’m not talking about the fruit, although it’s always good to have a glass of fresh orange juice. Orange is a small task or to-do list editor. It’s the first of many applications to be released under the ’simple’ brand (more information coming soon).

Orange goes back to basics of creating a task list. No registration required because it doesn’t save the information into a database. Instead, the task list is powered by javascript and css (and obviously xhtml) to provide you with a fast and simple interface. You do have options to import a list (copy/pasting) and exporting a list to a .txt file.

So visit Orange and tell me what you think.

The long awaited WordPress 2.5 has finally been released and is available for download over at wordpress.org. So get it while it’s hot. With the release comes a new design for the site as well (wordpress.org that is) and I must say, it gives them a more “future web” look.

I’m not sure whether or not I’ll update this blog to 2.5 but I’ll definitely check it out (I’m busy uploading it as we speak!) and give a quick review of it. I’m mostly interested in seeing how the new admin panel works.

I’ve uploaded some screenshots of the Admin Panel to my Flickr Page.