When:

Tuesday, September 18, 2007, 6:00 PM 2007

Where:

Gallery Bar
120 Orchard Street between Delancey & Rivington
New York , NY 10002

• Info/Map

Description:

Networking party for post-internet media, advertising and business. See Web2NewYork for details.6.00 pm: doors open
7.00 – 8.00 pm: presentations
8.00 – … : informal networkingConfirmed presentations:

- John Horsley, Marzar
- Lucas Hrabovsky, Amie Street
- Aaron Bollinger, writer MySpace Social Guide and sales director KickApps

Follow us.

As an interesting experiment on top of an experiment, we’re also taking part of Michiel Berger‘s Twitterstat project.

Everything worked perfectly for serving up clean accordions with static content. But, as i started applying the component to more and more applications, I realized that it would really be helpful if I could just load in the static content on demand with XHR (AJAX is a terrible acronym).

The result is a pretty simple modification to get this done. The one requirement however is that the toggle handle must be an a if you want to use XHR. Just specify the url you want to load from, for example:


<div id="container">
<a href="/list/details" class="accordion_toggle" id="1">View Details</a>
<div class="accordion_content">Content Goes Here</div>
</div>
<script type="text/javascript">

var Accordion = new accordion(‘#container’, {xhr: true});
</script>
Pretty simple, but pretty handy for when you need it.


// accordion.js v1.0
//
// Copyright (c) 2007 stickmanlabs
// Author: Kevin P Miller | http://www.stickmanlabs.com
//
// ListScroller is freely distributable under the terms of an MIT-style license.
//
// I don't care what you think about the file size...
// Be a pro:
// http://www.thinkvitamin.com/features/webapps/serving-javascript-fast
// http://rakaz.nl/item/make_your_pages_load_faster_by_combining_and_compressing_javascript_and_css_files
//

/*———————————————————————————————–*/
/*
if (typeof Effect == ‘undefined’)
throw(“accordion.js requires including script.aculo.us’ effects.js library!”);
*/
var accordion = Class.create();
accordion.prototype = {
//
// Setup the Variables
//
showAccordion : null,
currentAccordion : null,
currentParent: null,
duration : null,
effects : [],
animating : false,
ajaxUrl: null,
loaded: $H(),
//
// Initialize the accordions
//
initialize: function(container, options) {
this.options = Object.extend({
resizeSpeed : 8,
classNames : {
toggle : ‘accordion_toggle’,
toggleActive : ‘accordion_toggle_active’,
content : ‘accordion_content’
},
defaultSize : {
height : null,
width : null
},
direction : ‘vertical’,
onEvent : ‘click’,
xhr : false
}, options || {});

this.duration = ((11-this.options.resizeSpeed)*0.15);

var accordions = $$(container+’ .’+this.options.classNames.toggle);

accordions.each(function(accordion) {

Event.observe(accordion, this.options.onEvent, this.run.bind(this, accordion), false);
accordion.onclick = function() {return false;};

if (this.options.direction == ‘horizontal’) {
var options = $H({width: ’0px’});
} else {
var options = $H({height: ’0px’});
}

this.currentAccordion = $(accordion.next(0)).setStyle(options);
this.currentParent = $(accordion);

}.bind(this));
},
//
// Activate an accordion
//
activate : function(accordion) {
if (this.animating) {
return false;
}

this.effects = [];
this.currentAccordion = $(accordion.next(0));
if (this.currentAccordion == this.showAccordion) {
return false;
}
this.currentAccordion.previous(0).removeClassName(this.options.classNames.toggle);
this.currentAccordion.previous(0).addClassName(this.options.classNames.toggleActive);

if (this.options.direction == ‘horizontal’) {
var adjustments = $H({
scaleX: true,
scaleY: false
});
} else {
var adjustments = $H({
scaleX: false,
scaleY: true
});
}

var options = $H({
sync: true,
scaleFrom: 0,
scaleContent: false,
transition: Effect.Transitions.sinoidal,
scaleMode: {
originalHeight: this.options.defaultSize.height ? this.options.defaultSize.height : this.currentAccordion.scrollHeight,
originalWidth: this.options.defaultSize.width ? this.options.defaultSize.width : this.currentAccordion.scrollWidth
}
});
options.merge(adjustments);

this.effects.push(
new Effect.Scale(this.currentAccordion, 100, options)
);

if (this.showAccordion) {
this.showAccordion.previous(0).removeClassName(this.options.classNames.toggleActive);
this.showAccordion.previous(0).addClassName(this.options.classNames.toggle);
options = $H({
sync: true,
scaleContent: false,
transition: Effect.Transitions.sinoidal
});
options.merge(adjustments);

this.effects.push(
new Effect.Scale(this.showAccordion, 0, options)
);
}

new Effect.Parallel(this.effects, {
duration: this.duration,
queue: {
position: ‘end’,
scope: ‘accordionAnimation’
},
beforeStart: function() {
this.animating = true;
}.bind(this),
afterFinish: function() {
this.showAccordion = this.currentAccordion;
this.animating = false;
}.bind(this)
});
},

loadData: function(accordion){
this.currentParent = accordion;

new Ajax.Request(
accordion.href,
{
onComplete: this.processData.bindAsEventListener(this),
}
);
},
processData: function(t,json){
$(this.currentParent.next(0)).innerHTML = t.responseText;
this.loaded[this.currentParent.id] = true;
this.activate(this.currentParent);
},

run: function(accordion){
if(this.options.xhr===true){
if( (typeof accordion.id != ‘undefined’) && (!this.loaded[accordion.id]) ){ // Search through the hash and see if we’ve loaded this in already
this.loadData(accordion);
}
else {
this.activate(accordion);
}
}
else {
this.activate(accordion);
}
}
}