Encyclopedia Galactica H74

June 9th, 2009

Posted in: Work / Portfolio
5 Comments »
Share: Facebook | Twitter
Encyclopedia Galactica Q94

June 12th, 2009

Posted in: Work / Portfolio
0 Comments »
Share: Facebook | Twitter
jQuery Part One: Dynamic Collapsible Sidebar

June 13th, 2009

jQuery is a javascript framework that makes it easy to do programmatic animation, event handling, and AJAX style interactions. It vastly simplifies web programming and the manipulation of web pages. You don’t need to be a programmer to use jQuery. I’ll be posting ideas and examples of how to use jQuery over the coming months.

On Sidearm I use jQuery for several effects. For this post, I’m going to start with my favorite one. On the sidebar to the right each section is collapsable/expandable and can be toggled by activating the small plus/minus symbols. The sidebar keeps getting bigger and in a few years the archive alone will take up a large portion of the screen, so saving space is becoming increasingly necessary. At the same time, I don’t want to make navigating the site any more difficult than it needs to be, so I made “smart” default settings for which sections should load in the collapsed state. Also, to be true to the original design, I wanted the sidebar to always be shorter than the content area. To accomplish this I used jQuery to measure the height of the content area and the sidebar, compare them, and then collapse the appropriate amount of sections to keep the sidebar shorter.

One of the best features of jQuery is that you can select an HTML object by HTML tag, ID, or class the same way you would in CSS. In the following example, H5 elements with a class are selected, then the “.append” function is called which adds the element found within parenthesis, in this case ”<a></a>”.
```
// dynamically add sidebar toggle buttons
$('h5.categories').append('<a></a>');
$('h5.archives').append('<a></a>');
$('h5.audio').append('<a></a>');
$('h5.audio + div').hide();
$('h5.audio a').addClass('expand');
$('h5.links').append('<a></a>'); $('h5.connect').append('<a></a>');
```
By adding these in dynamically, we effectively hide the toggle buttons from anyone who doesn’t have javascript support, which we want to do because the collapse function wouldn’t work for them anyways.

In the following example, I’m assigning the value of #content_one’s height to the variable “c_one” and likewise for #content_two and “c_two”.
```
// get height of column one and column two
var c_one = $('#content_one').height();
var c_two = $('#content_two').height();
```
Next, these variables need to be compared. To do this, an “if” statement is used along with a some comparative math. Our statement is saying “if c_two is greater than or equal to c_one then execute the code within the brackets.”
```
// compare heights and collapse the appropriate amount of sections
// Note: This code could be improved and I welcome suggestions, but it works.
if(c_two >= c_one) {
	$('h5.connect + ul').hide();
	$('h5.connect a').addClass('expand');
	c_two = $('#content_two').height();
	if(c_two >= c_one) {
		$('h5.links + ul').hide();
		$('h5.links a').addClass('expand');
		c_two = $('#content_two').height();
		if(c_two >= c_one) {
			$('h5.archives + ul').hide();
			$('h5.archives a').addClass('expand');
			c_two = $('#content_two').height();
			if(c_two >= c_one) {
				$('h5.categories + ul').hide();
				$('h5.categories a').addClass('expand');
			}
		}
	} }
```
Lets go over the first three lines inside the brackets. Line one hides the Connect UL element, effectively loading it in the collapsed state. Line two changes the toggle button from it’s default “collapse” state to the “expand” state because we’ve already collapsed it. And, line three measures the sidebar’s updated height for further comparison. After that section is evaluated, each subsequent section is measured and collapsed until c_two is smaller than c_one.

For more information about jQuery head to the site and dig into the documentation. You won’t believe how easy it is to get started.

Posted in: Design / Coding
0 Comments »
Share: Facebook | Twitter
Teenheat Studio | Sean O’Connor

June 13th, 2009

This is a portfolio website I’ve been working on for my friend Sean O’Connor. It’s live now at mseanoconnor.com but we’re still filling in some content and doing some testing. I’m really happy with how this project turned out and I’m excited to see how Sean will use the site. This is my first experience using AJAX functionality and I’m very excited about looking into that more.

Posted in: Work / Portfolio
4 Comments »
Share: Facebook | Twitter
Geometries - Simulation

June 21st, 2009

Posted in: Work / Portfolio
1 Comments »
Share: Facebook | Twitter
Geometries - Drexia

June 23rd, 2009

Posted in: Work / Portfolio
1 Comments »
Share: Facebook | Twitter