"
Team:Queens-Canada/js/application
From 2010.igem.org
// Place your application-specific JavaScript functions and classes here // This file is automatically included by javascript_include_tag :defaults /*var cahnge_content = new Fx.Slide('demo2', { wait: false });
$$('.section').each{
function()
}
$('demo2run1').addEvent('click', function(){
demo2effect.toggle('vertical');
});
$('demo2run2').addEvent('click', function(){
demo2effect.toggle('horizontal');
});*/
// Effect.Chain and Effect.Delayed Chain? // // Simply fires the Effect for multiple elements sequently (or delayed in the case of Delayed Chain?). // // Sample usage: // // // new Effect.Chain( // 'Fade', // The effect name // $$('div.test'), // an array of elements // { duration: 0.5 } // options for the effect itself // ); // // // new Effect.DelayedChain('Appear', $$('ul#test li'), { duration: 0.5 }, 100); // Fires an Effect.Appear for each element with a delay of 100 m
Effect.DelayedAppear = Class.create();
Object.extend(Effect.DelayedAppear.prototype, {
initialize: function(elements, options, timeout){
this.elements = elements;
this.elements.each(function(element){ element.hide();});
this.effect = 'Appear';
this.timeout = timeout || 100;
this.options = Object.extend({}, options || {});
this.afterFinish = this.options.afterFinish || Prototype.emptyFunction;
this.options.afterFinish = Prototype.emptyFunction;
setTimeout(this.action.bind(this),1);
},
action: function() {
if(this.elements.length){
new Effect[this.effect](this.elements.shift(), this.options);
setTimeout(this.action.bind(this), this.timeout);
} else {
if(this.afterFinish) this.afterFinish();
}
}
});
Effect.DelayedChain = Class.create();
Object.extend(Effect.DelayedChain.prototype, {
initialize: function(effect, elements, options, timeout){
this.elements = elements;
this.effect = effect;
this.timeout = timeout || 100;
this.options = Object.extend({}, options || {});
this.afterFinish = this.options.afterFinish || Prototype.emptyFunction;
this.options.afterFinish = Prototype.emptyFunction;
setTimeout(this.action.bind(this),1);
},
action: function() {
if(this.elements.length){
new Effect[this.effect](this.elements.shift(), this.options);
setTimeout(this.action.bind(this), this.timeout);
} else {
if(this.afterFinish) this.afterFinish();
}
}
});
Effect.Chain = Class.create(); Object.extend(Effect.Chain.prototype, {
initialize: function(effect, elements, options){
this.elements = elements || [];
this.effect = effect;
this.options = options || {};
this.afterFinish = this.options.afterFinish || Prototype.emptyFunction;
this.options.afterFinish = this.nextEffect.bind(this);
setTimeout(this.nextEffect.bind(this), 1);
},
nextEffect: function(){
if(this.elements.length)
new Effect[this.effect](this.elements.shift(), this.options);
else
this.afterFinish();
}
});
// raplaces PNGs for internet explorer boring bug function replacePng(){
// html attribute helper
function htmlAttribute(attributeName, value){return ' '+attributeName+'="'+value+'" ';}
version = parseFloat(navigator.appVersion.split("MSIE")[1]);
if (version >= 5.5 && document.body.filters) {
$$('img').each(function(image){
name = image.src.split('?')[0];
if ( name.substring(name.length-3, name.length).toLowerCase() == "png" ) {
new_style = "display:inline-block;"
+ image.style.cssText+";"
//+ (image.align.length)?";float:"+image.align+";":""
+ (image.parentElement.href ? "cursor:hand;":"" )
+ "width:"+image.width+"px; height:"+image.height+"px;"
+ "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
+ "(src=\'" + image.src + "\', sizingMethod='scale');";
new_style = htmlAttribute('style', new_style);
new_class = htmlAttribute('class',image.className);//singular, but gets all the classes
new_id = htmlAttribute('id',image.id);
new_title = htmlAttribute('title', image.title);
new_alt = htmlAttribute('alt', image.alt);
new_html = '';
// alert(new_html);
Element.replace(image, new_html);
}
});
}
}
function switchBackground() {
ie = /MSIE/.test(navigator.userAgent);
element = $('body');
element.addClassName('white');
if (ie) {
new Effect.Fade("logo", {duration:0.2});
setTimeout(function(){element.setStyle( {backgroundColor:'#ffffff'} );}, 600);
setTimeout(function(){element.setStyle( {backgroundColor:'#cc6699'} );}, 500);
setTimeout(function(){element.setStyle( {backgroundColor:'#99ccff'} );}, 400);
setTimeout(function(){element.setStyle( {backgroundColor:'#006699'} );}, 300);
setTimeout(function(){element.setStyle( {backgroundColor:'#003366'} );}, 200);
setTimeout(function(){element.setStyle( {backgroundColor:'#000033'} );}, 100);
} else {
element.setStyle( {backgroundColor:'#000000'} );
new Effect.Morph('body', {style:'background:#ffffff;'} );
}
// return false; }
/* Add a new smooth transition with Effect. Transitions.slowstop. This transition starts very quickly, but comes to a gradual stop. Great for scrolling somewhere on a page with a duration of 2. sunsean
- /
Effect.Transitions.slowstop = function(pos) {
return 1-Math.pow(0.5,20*pos);
} /* Here is a custom effect that I made. It allows you to scroll inside an element that’s overflow is set to auto or scroll. Usage: new Effetc.Scroll(‘element-id’, {x: 10, y: 100});
- /
Effect.Scroll = Class.create(); Object.extend(Object.extend(Effect.Scroll.prototype, Effect.Base.prototype), {
initialize: function(element) {
this.element = $(element);
var options = Object.extend({
x: 0,
y: 0,
mode: 'absolute'
} , arguments[1] || {} );
this.start(options);
},
setup: function() {
if (this.options.continuous && !this.element._ext ) {
this.element.cleanWhitespace();
this.element._ext=true;
this.element.appendChild(this.element.firstChild);
}
this.originalLeft=this.element.scrollLeft;
this.originalTop=this.element.scrollTop;
if(this.options.mode == 'absolute') {
this.options.x -= this.originalLeft;
this.options.y -= this.originalTop;
} else {
}
},
update: function(position) {
this.element.scrollLeft = this.options.x * position + this.originalLeft;
this.element.scrollTop = this.options.y * position + this.originalTop;
}
}); /* Effect.ScrollMod = Class.create(); Object.extend(Object.extend(Effect.Scroll.prototype, Effect.Base.prototype), {
initialize: function(element) {
this.element = $(element);
var options = Object.extend({
x: 0,
y: 0,
mode: 'absolute',
targetElement: null
} , arguments[1] || {} );
this.start(options);
},
setup: function() {
this.targetElement = $(this.options.targetElement);
Position.prepare();
alert(Position.cumulativeOffset(this.targetElement));
alert(Position.cumulativeOffset(this.element));
//if (this.options.targetId != null){
alert('true');
Position.prepare();
var offsets = Position.cumulativeOffset(this.targetElement)-Position.cumulativeOffset(this.element);
this.options.x += offsets[0];
this.options.y += offsets[1];
//}
if (this.options.continuous && !this.element._ext ) {
this.element.cleanWhitespace();
this.element._ext=true;
this.element.appendChild(this.element.firstChild);
}
this.originalLeft=this.element.scrollLeft;
this.originalTop=this.element.scrollTop;
if(this.options.mode == 'absolute') {
this.options.x -= this.originalLeft;
this.options.y -= this.originalTop;
} else {
}
},
update: function(position) {
this.element.scrollLeft = this.options.x * position + this.originalLeft;
this.element.scrollTop = this.options.y * position + this.originalTop;
}
});
Element.prototype = Object.extend(Element.prototype, {
insideScrollTo: function(element, x, y) {
element = $(element);
var originalLeft = parseFloat(element.scrollLeft || '0');
var originalTop = parseFloat(element.scrollTop || '0');
element.scrollTop = y + this.originalTop;
element.scrollLeft = x + this.originalLeft;
return element;
}
});
Effect.InsideScrollTo = Class.create(); Object.extend(Object.extend(Effect.ScrollTo.prototype, Effect.Base.prototype), {
initialize: function(element) {
this.element = $(element);
this.start(arguments[1] || {});
},
setup: function() {
Position.prepare();
var offsets = Position.cumulativeOffset(this.element);
if(this.options.offset) offsets[1] += this.options.offset;
var max = window.innerHeight ?
window.height - window.innerHeight :
document.body.scrollHeight -
(document.documentElement.clientHeight ?
document.documentElement.clientHeight : document.body.clientHeight);
this.scrollStart = Position.deltaY;
this.delta = (offsets[1] > max ? max : offsets[1]) - this.scrollStart;
},
update: function(position) {
Position.prepare();
window.scrollTo(Position.deltaX,
this.scrollStart + (position*this.delta));
}
});*/
