I'm using something like an accordion, but the div containers have some
elements in them that use Effect.Highlight (i.e. InPlaceEditor and
Ajax.Checkbox, one of my SAU classes). If I click the element that
starts the Effect.SlideUp or some other similar effect, and then mouse
over an element starting an Effect.Highlight, the highlight cancels the
SlideUp. Or, if the Effect.Highlight is in the middle of its fade out
then clicking the button to trigger the SlideUp/Down has no effect.
Any idea how to fix this problem so that a click of the toggle button
will always trigger a non-interruptable SlideUp/Down?
Thanks,
Colin
Code:
$A($('container').getElementsByTagName('fieldset')).each(function(el){
new ToggleButton(el.getElementsByTagName('div')[0],{
handle:el.firstChild,
effect:'blind',
effectOptions: {duration: 0.25}
});
});
/* Usage:
new ToggleButton(element,{
showHTML/hideHTML: when using default, parent, or sibling, the
button created will use this as innerHTML
visible: start the element visible?
toggle: the event handler called when toggle button clicked
onShow: hook called after all default actions have taken place.
args: event, this: ToggleButton instance
onHide: hook called after all default actions have taken place.
args: event, this: ToggleButton instance
parent: button element will be appended to this element
sibling: button element will be inserted before this element
(default: sibling is element)
handle: this element will be the button (showHTML/hideHTML not used)
effect: 'blind','slide','appear' if desired
effectOptions: options to be passed to Effect.toggle
});
*/
ToggleButton = Class.create();
ToggleButton.prototype = {
initialize: function(element, options){
this.element = $(element);
this.options = Object.extend({
showHTML: '<b>(show)</b>',
hideHTML: '<b>(hide)</b>',
visible: false,
toggle: this.toggle,
onShow: null,
onHide: null
}, options || {});
if(this.options.parent){ this.options.parent =
$(this.options.parent); }
if(this.options.handle){ this.options.handle =
$(this.options.handle); }
if(this.options.sibling){ this.options.sibling =
$(this.options.sibling); }
if(!this.options.parent && !this.options.handle){
this.options.sibling = element; }
this.createButton();
if(this.options.visible || this.element.hasClassName('active')){
Element.show(this.element);
if(!this.options.handle){ this.span.innerHTML =
this.options.hideHTML; }
}else{
Element.hide(this.element);
if(!this.options.handle){ this.span.innerHTML =
this.options.showHTML; }
}
this.onclickListener =
this.options.toggle.bindAsEventListener(this);
Event.observe(this.button, 'click', this.onclickListener);
},
createButton: function(){
if(this.options.handle){
this.button = this.options.handle;
return;
}
this.span = Builder.node('span');
this.button = Builder.node('a',[this.span]);
if(this.options.parent){
this.options.parent.appendChild(this.button); }
else if(this.options.sibling){
this.options.sibling.parentNode.insertBefore(this.button,this.options.sibling);
}
},
toggle: function(event){
if(Element.visible(this.element)){ this.hide(event); }
else{ this.show(event); }
},
show: function(event){
if(this.options.effect && !Element.visible(this.element)){
new
Effect.toggle(this.element,this.options.effect,this.options.effectOptions
|| {});
}else{ Element.show(this.element); }
if(!this.options.handle){ this.span.innerHTML =
this.options.hideHTML; }
if(this.options.onShow){ this.options.onShow(event).bind(this); }
},
hide: function(event){
if(this.options.effect && Element.visible(this.element)){
new
Effect.toggle(this.element,this.options.effect,this.options.effectOptions
|| {});
}else{ Element.hide(this.element); }
if(!this.options.handle){ this.span.innerHTML =
this.options.showHTML; }
if(this.options.onHide){ this.options.onHide(event).bind(this); }
},
dispose: function() {
Event.stopObserving(this.button, 'click', this.onclickListener);
if(!this.options.handle)
this.element.parentNode.removeChild(this.button);
}
}
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "Ruby
on Rails: Spinoffs" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs
-~----------~----~----~----~------~----~------~--~---
