Design / Coding

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
2009 Gullwing-America 300 SL Panamericana

April 27th, 2009

More info/pics here via Design you Trust

Posted in: Design / Coding
0 Comments »
Share: Facebook | Twitter
Teenage Engineering OP-1

March 31st, 2009

Besides having an awesome name and a beautiful website — that makes the 90s look cool — Teenage Engineering is putting together the perfect synthesizer for me. The OP-1 can be used as a controller, or a portable synth complete with an internal rechargable battery. The beta run of these will be limited to 100 units, and it has an OLED display, so you can expect it to be pretty spendy.

Posted in: Design / Coding, Inspiration / Scrapbook
2 Comments »
Share: Facebook | Twitter
Future Update

March 19th, 2009

Another Microsoft concept video in the same vein as this one that I posted earlier. Via Swiss Miss

Then there’s this incredible article about carbon nanotube muscles that are being developed. The nanotube muscles are as strong as diamonds, as flexible as rubber, as light as air, 30 times stronger than natural muscle by volume, can contract 4000 times faster than natural muscle, and can operate at temperatures ranging from -320°F to 2800°F. Now make me a suit out of this stuff. Via Wired

Posted in: Design / Coding
0 Comments »
Share: Facebook | Twitter
Augmented Reality: the 6th Sense

March 10th, 2009

The amazing thing about this device is that it can be built with $350 of off the shelf components, a cell phone, and software. If this went into mass production even now, we could expect a smaller form factor, better components, and a lower price. If they can boost the processing power and switch to a laser projector, the whole setup would work better and be more flexible. It needs more processing power to eliminate the loading times, and a laser projector to keep the projected image always in focus (since lasers don’t get projected through a lense they are always in focus).

I would be ready to buy one right now if they weren’t so dorky. Maybe a shoulder mounted projector, or better yet, a display on my glasses that only I can see.

I really like the idea of using your hands as the interface (the part where he dials a number with his hand). The implementation in World Builder seems about right. We’re going to need a holographic projector for that.

Via TED

Posted in: Design / Coding
1 Comments »
Share: Facebook | Twitter
The Future According to Microsoft

March 2nd, 2009

If Microsoft starts putting out products this beautiful, then we might actually see a real competition between Apple and them. The future is going to a lot of fun.

By the way, this is the first step in the augmentation of reality that I was talking about in my essay The Authors of Reality

Via Gizmodo

Posted in: Design / Coding
1 Comments »
Share: Facebook | Twitter
Transparent iPhone Concept

February 26th, 2009

I really like this transparent iPhone concept, although it’s not too realistic for a 3rd-gen iPhone. If they pull off something like this, minds will be blown.

Via Toxel

Posted in: Design / Coding
0 Comments »
Share: Facebook | Twitter
Minority Report comes to life

November 15th, 2008

I want one. The most incredible part of this to me is that it only took 6 years to go from a sci-fi movie concept to an actual product. Development of “impossible” gadgets is becoming so fast, at some point the word impossible will just drop it’s prefix. Where will we be in 20 years? In 1988 I was two, the internet didn’t exist, TVs still had picture tubes, and a video watch was the “impossible” device. It turns out that a video watch isn’t very useful, but we’ve done even better: the iPhone or Android not only provide video (and the time), but music, internet, and a platform with limitless possibilities.

It’s hard to imagine the “impossible” gadgets from 2028. My best guess is that most of them will be robotics. Right now, our idea of an impossible robot is WALL-E. We may not be able to cram all of his features into a robot (it’s a cartoon after all), but I think we will have artificial intelligence that is convincing enough that we will have robotic friends, or pets. We will love them, and they will love us.

What impossible gadgets would you like to see in 2028?

Via Fubiz.net

Update: if you want more information about G-Speak visit Oblong

Posted in: Design / Coding, Science / Technology
1 Comments »
Share: Facebook | Twitter