Let’s say you have these two boxes…

…and you want to overlap one on top of the other. To do so you must set two properties: z-index and position. If you want to use the z-index property, you are required to change the element’s position property.

For the sake of this nuts-n-bolts demonstration I’m going to set both Orange and Purple’s position to relative. First I’ll move Purple up, so I’m going to set its position to relative, and its top property to -10px. I’m also going to move it over 10px horizontally (left: 10px) so that you can see where it is in relation to Orange.

See how Purple’s box is on top of Orange? That behavior is, by default, a matter of their linear order in the HTML (purple comes after orange, so it’s on top). Note that you don’t have to set Purple’s z-index to achieve this effect, but to emphasize the behavior it is recommended that you put “z-index: 1″ in Purple’s styling (IF this is your desired outcome). If, however, you want Orange on top then you must set Orange’s z-index to 1. This is reflected in the demo and code below:

The Code

< style type = "text/css" >
     #demo_box_orange { z-index: 1; position: relative; width: 40px; height: 40px; border: 1px solid blue; background-color: orange; }
     #demo_box_purple { position: relative; top: -10px; left: 10px; width: 40px; height: 40px; border: 1px solid green; background-color: purple; }
< /style >
< div id="demo_box_orange" >< /div >
< div id="demo_box_purple" >< /div >

• Home
• Products
• Support
• Contact
• About

To accomplish this, you can use a combination of a PNG image with alpha-transparency and CSS, using the z-index and position properties.

Please note: because the code uses a PNG with alpha-transparency and background-image positioning rules, this demo does not work for IE versions 6.0 and below. However, the demonstration of the CSS rules used to layer tabs is valuable information, and you will find it useful in your quest to create a layered navigation.

1. Setting up our horizontal navigation

This navigation follows three basic rules:

1. The list items float left
2. The anchor tag inside each list item fills the entire tab
3. The anchor’s background images are PNGs with transparency

To fulfill rule #3, here’s a nice sprite for our background-imaged tabs; from top to bottom, they are the active tab, hover tab, and default tab:

Remember: The images, or combination of images like I’ve used above, must have transparent “edges” – in this case, the “whitespace” beyond the curved areas of the tabs.

The HTML:

<ul id="demo_navigation">
     <li><a href="/">Home</a></li>
     <li class="active"><a href="/products.php">Products</a></li>
     <li><a href="/support.php">Support</a></li>
     <li><a href="/contact.php">Contact</a></li>
     <li><a href="/about.php">About</a></li>
</ul>

And CSS:

#demo_navigation { list-style-type: none; }
#demo_navigation li { float: left; }
#demo_navigation li a {
     display: block;
     width: 132px;
     line-height: 31px;
     text-align: center;
     color: #000;
     background: transparent url('/wp-content/uploads/2009/03/product_nav_li_bgs.png')
          bottom left no-repeat;
}
#demo_navigation li a:hover {
     text-decoration: none;
     background: transparent url('/wp-content/uploads/2009/03/product_nav_li_bgs.png')
          0px -31px no-repeat;
}
#demo_navigation li.active a {
     color: #fff;
     background: transparent url('/wp-content/uploads/2009/03/product_nav_li_bgs.png')
          0 0 no-repeat;
}

Result:

• Home
• Products
• Support
• Contact
• About

2. Shift your tabs over with position: relative

When you set an element to have the property “position: relative;” you are setting up the element to be moved relative to where it is originally positioned. Moving an element from where it is originally implies the use of the top, right, bottom and left properties. So for example, you have this box:

[]

To move it +15 pixels from its original left position you set the position and left properties as such:

#box {
     position: relative;
     left: 15px;
}

And where is that box now?

   []

So perhaps you can begin to see, if we want layered tabs, we simply have to shift tab 2, 3, 4 and 5 negatively left from their original positions. Remember though, for each tab you shift over, that means you have to accommodate for that shift in the next tab you move over.

• If the first tab shifts 8 pixels left…
• The second tab will shift 16 pixels left
• Third tab shifts 24 pixels
• etc etc

These distinct rules for each tab require us to create IDs for each list item. The updated HTML (updates in bold):

<ul id="demo_navigation">
     <li id="demo_nav_home"><a href="/">Home</a></li>
     <li id="demo_nav_prod" class="active"><a href="/products.php">Products</a></li>
     <li id="demo_nav_support"><a href="/support.php">Support</a></li>
     <li id="demo_nav_contact"><a href="/contact.php">Contact</a></li>
     <li id="demo_nav_about"><a href="/about.php">About</a></li>
</ul>

And the CSS, now with relative positioning:

#demo_navigation { list-style-type: none; }
#demo_navigation li {
     float: left;
     position: relative;
}
#demo_navigation li a {
     display: block;
     width: 132px;
     line-height: 31px;
     text-align: center;
     color: #000;
     background: transparent url('/wp-content/uploads/2009/03/product_nav_li_bgs.png')
          bottom left no-repeat;
}
#demo_navigation li a:hover {
     text-decoration: none;
     background: transparent url('/wp-content/uploads/2009/03/product_nav_li_bgs.png')
          0px -31px no-repeat;
}
#demo_navigation li.active a {
     color: #fff;
     background: transparent url('/wp-content/uploads/2009/03/product_nav_li_bgs.png')
          0 0 no-repeat;
}

#demo_nav_prod { left: -12px; }
#demo_nav_support { left: -24px; }
#demo_nav_contact { left: -36px; }
#demo_nav_about { left: -48px; }

Result:

• Home
• Products
• Support
• Contact
• About

3. Polishing with z-index

Now we have this great layered navigation, but the tabs perhaps aren’t layered in the most intuitive fashion. For instance, we’ll probably want the active tab to be on top of them all, and we may want the default layering scheme to be descending left-to-right, so Home is atop all the rest, and About is on the bottom.

Here’s where z-indexing comes into play.

The z-index property “sets the stack order of an element. An element with greater stack order is always in front of another element with lower stack order.” So, if we want the Contact link to be above About, then we set Contact’s z-index to 1 (z-index: 1). Then, if we want Support above Contact, we set Support’s z-index to 2. So on and so forth… until we decide that we want the active tab, no matter which it is, to be above the rest. So we count the number of tabs, and set the active tab (as referenced by “.active”) to have a z-index: tab_count;

In this case, we have 5 navigation elements, so we would set the z-index of the .active element to 5. Now, our updated and final CSS:

#demo_navigation { list-style-type: none; }
#demo_navigation li {
     float: left;
     position: relative;
}
#demo_navigation li a {
     display: block;
     width: 132px;
     line-height: 31px;
     text-align: center;
     color: #000;
     background: transparent url('/wp-content/uploads/2009/03/product_nav_li_bgs.png')
            bottom left no-repeat;
}
#demo_navigation li a:hover {
     text-decoration: none;
     background: transparent url('/wp-content/uploads/2009/03/product_nav_li_bgs.png')
            0px -31px no-repeat;
}
#demo_navigation li.active a {
     color: #fff;
     background: transparent url('/wp-content/uploads/2009/03/product_nav_li_bgs.png')
            0 0 no-repeat;
}

#demo_navigation li.active { z-index: 5; }

#demo_nav_home { z-index: 4; }
#demo_nav_prod { left: -12px; z-index: 3; }
#demo_nav_support { left: -24px; z-index: 2; }
#demo_nav_contact { left: -36px; z-index: 1; }
#demo_nav_about { left: -48px; z-index: 0; }

And here is the final product, in all its layered glory:

• Home
• Products
• Support
• Contact
• About

Download (fadtastic_theme_widgetized.zip)

Update 12-20-08: The myspace class has been updated to reflect changes in the way MySpace outputs the HTML for friend listing pages. Download link is the same.

Presenting two MySpace classes:

• MySpace Mobile
• MySpace.com

programmed in PHP and released under the GPL. Download both classes here (myspace_classes.zip).

These classes provide basic profile and friend scraping functionality. My intention in programming them was to free personal & relationship data from MySpace for use in other applications. They were not created for spamming or other nefarious kinds of activities.

Each has their strengths and weaknesses. Used together, they can be very powerful. Here’s a brief breakdown:

MySpace Mobile

MySpace Mobile (located at m.myspace.com) is extremely useful for easily extracting user-entered profile information. Profile info is broken up into 6 categories:

• Interests and Personality
• Basic Info
• Background and Lifestyle
• Schools
• Companies
• Networking

“Basic Info” for instance, contains Gender, Occupation, City, Ethnicity, etc. It’s easy to extract this info from MySpace Mobile because it lays it out in easy-to-match HTML. Look at this DOM view of MySpace Mobile’s “Basic Info” section:

Talk about a breeze with preg_match…

For my purposes I found Interests & Personality, Basic Info and Background & Lifestyle to be the most interesting, and thus only included them as part of the profile parsing functionality. It wouldn’t be difficult to extend this to Schools, Companies and Networking.

Unfortunately MySpace Mobile is excrutiatingly slow compared to MySpace.com. In my tests, it takes about 0.5 seconds to grab a friend’s Basic Info. This might seem fast but that means grabbing 300 friends’ info would take ~150 seconds or 2 1/2 minutes. In fact it would normally take longer but I set up cURL to TIMEOUT after 2 seconds; in the event that a page takes longer than 2 seconds to load, the request will drop, and the class will try one more time to grab the page. This will sometimes result in pages dropped completely. The TIMEOUT value can be easily adjusted to your liking.

MySpace

The MySpace class is primarily useful for quickly grabbing all of a user’s friends’ rudimentary info: Profile ID, Main Image, and Name. In my tests, grabbing between 300 and 400 friends took about 2 seconds. Grabbing 70 friends took 1.5 seconds.

“Grabbing” friends means the class will return a 2D array of your friends’ info. In this example:

$test = new myspace();
$test->login("username", "password");
$my_friends = $test->grabFriendBasics($test->myID);

$my_friends will be an array with the following indices: ['name'], ['img_url'] and ['id']. They each will contain the same number of values, e.g. if you have 70 friends then name, img_url and id will all have 70 values each, in the order in which your friends are displayed on your friend listing pages.

Together

I have found the most interesting utility in using the MySpace class to grab all rudimentary friend info, and then using those friend IDs to grab all demographic info with MySpace Mobile. Here’s an example:

$rud = new myspace();
$rud->login("username", "password");
$my_friends = $rud->grabFriendBasics($rud->myID);

$msm = new myspace_m();
$msm->login("username", "password");
for($i = 0; $i < count($my_friends['id']); $i++) {
     $details = $msm->getFriendDetails($my_friends['id'][$i], array("basic"));
     // If first iteration, output the structure of the Basic info listing
     if($i == 0) {
          print_r($details['basic_def']);
     }
     print_r($details['basic']);
}

Of course, I don’t expect these classes to necessarily be used for what I’ve set them up for. If you have any feature requests, leave a comment below.

For a live demonstration of simple functionality, along with more code examples, check out the Demo.

On another note, the theme of today’s gathering is “Open Government.” I remember hearing a call recently for developers to work on more beneficial, perhaps humanitarian applications. Applications that will make everyday tasks easier to accomplish, and the important things easier to find. Doctor’s appointments, accurate medical information, transparency of gov’t, etc…. talks are starting. Will update soon.

Post-Hackday Update

Instead of going into detail on the different sessions I attended, I should just get straight to the point: Freebase, I like the idea of your mission. I appreciate the open-ended nature of your system and the ease of using the MQL. But I can’t help but feel like you’re in a blind race to beat everyone to the structured-data punch. Where are the killer apps? Your GIX framework for mashing, say, points of architectural interest onto a map of Marin County, is not very new or interesting. I know examples like that are watered-down versions of more complex applications for the sake of demonstration, but really – I have yet to see anything out of Freebase or the use of Freebase that has really blown my mind.

This is by no means a final judgment. I hold out for the day I see a killer application based on Freebase technologies. But I think the Semantic Web revolution will depend on information that contains meaning and utility for our vocational and personal lives. That includes social networks, e-mails, text messages, data on our hard drives…

So I leave with a few questions for the Freebase community: will Freebase’s “bases” technology enable this kind of user-centric information warehousing? Will there be a point (or does it exist already) where I can submit to Freebase a FOAF file of all my friends on MySpace and query it with the MQL? Obviously there are privacy concerns, so is Freebase going to give the average user leverage for maintaining their own data?

All-in-all I had a good time at Freebase. I met some cool people who helped me gain a better understanding of the structure of MQL queries, and technologies available to do work on my own projects (thanks James Levy!). And, who doesn’t love a t-shirt with a rhino holding a flag? Thank you to everyone at Freebase for making the day light-hearted and fun.

1. The WP community is large, and many people could benefit from this kind of tool.
2. WP has a limited number of design-influencing template functions. This makes my job easier.

Implementation

There are a few different aspects to developing the back-end functionality for this kind of tool. Note that I’m writing off the top of my head, so this list is sure to change.

• Understand the structure of the selected WP theme: header, footer, the loop, content (page, post, comments, etc), sidebar. This would be accomplished by parsing the theme’s main files (index.php, page.php, theloop.php, etc), and determining where each template function resides in relation to surrounding HTML elements.
• Use the information gathered from parsing to create a “map”: a link between template functionality and the Document Object Model. This will allow us to determine which elements of the WP suite are actually implemented on the page, where they are, and the limitations of their placement on the page.
• Functionality to modify the theme’s template files based on front-end design changes. This includes activating and placing widgets, HTML arrangement, CSS mods (+ other things I’m not thinking of?)

The front-end component is a little more obvious I think. I’m not too certain of the best layout, but SquareSpace has the right idea. Semi-transparent overlaid windows with all the design-related functionality needed: “drag-and-drop the sidebar here”, “give the footer this background color”, “put a calendar right here”, etc. At this point I’m more concerned about interfacing and modifying template files.

In terms of actually programming this plugin, I’ve had a lot of success with the Yahoo User Interface JavaScript library, so I’d want to use that for the front-end. And of course an AJAX interface to the PHP back-end to make modifications to the template files.

Clearly still mulling this over. Comments welcome!