subhailc
02-15-2004, 02:42 AM
seems that changing all the X's to Y's and vice versa would make this produce a vertical animation - it functions perfectly insofar as movement along the horizontal axis.
why won't this work vertically, and what can i do about it?
#glideDiv0, #glideDiv1, #glideDiv2, #glideDiv3, #glideDiv4, #glideDiv5, #glideDiv6, #glideDiv7, #glideDiv8
{position:absolute; visbility:visible; z-indey:200; left: 137; width:125px}
</style>
<script type="text/javascript">
if (document.getElementById) window.onload=initGlideLayers;
function initGlideLayers() {
var glideLyrs = new Array();
// Set up your layers here
// arguments: id, amount to be visible (left), top, width, height
// duration of glide onscroll, accel (-1 to 1, -1 decelerates)
glideLyrs[0] = new dynObj('glideDiv0', 137, 263, 125, 20);
glideLyrs[1] = new dynObj('glideDiv1', 137, 283, 125, 21);
glideLyrs[2] = new dynObj('glideDiv2', 137, 304, 125, 20);
glideLyrs[3] = new dynObj('glideDiv3', 137, 324, 125, 20);
glideLyrs[4] = new dynObj('glideDiv4', 137, 344, 125, 21);
glideLyrs[5] = new dynObj('glideDiv5', 137, 365, 125, 20);
glideLyrs[6] = new dynObj('glideDiv6', 137, 385, 125, 20);
glideLyrs[7] = new dynObj('glideDiv7', 137, 405, 125, 21);
glideLyrs[8] = new dynObj('glideDiv8', 137, 426, 125, 20);
for (var i=0; i<glideLyrs.length; i++) {
// hold amount to be left visible
glideLyrs[i].xOff = glideLyrs[i].x;
if ( !glideLyrs[i].y )
if ( glideLyrs[i-1] ) glideLyrs[i].y = glideLyrs[i-1].y + glideLyrs[i-1].h + 2;
glideLyrs[i].shiftTo( -(glideLyrs[i].w - glideLyrs[i].xOff), glideLyrs[i].y );
glideLyrs[i].show();
}
}
function slideIntoView(id) {
var glideLyr = dynObj.getInstance(id);
glideLyr.slideTo(80, null, 250, -.8);
}
function slideOutOfView(id,e) {
var glideLyr = dynObj.getInstance(id);
e = (e)? e: window.event;
var toEl = e.relatedTarget? e.relatedTarget: e.toElement;
if ( toEl != glideLyr.el && !contained(toEl, glideLyr.el) )
glideLyr.slideTo( -(glideLyr.w - glideLyr.xOff), null, 500, -.8);
}
function contained(oNode, oCont) {
if (!oNode) return;
while ( oNode.parentNode ) {
oNode = oNode.parentNode;
if ( oNode == oCont ) return true;
}
return false;
}
</script>
<script type="text/javascript">
dynObj.holder = {};
function dynObj(id,x,y,w,h) {
this.el = dynObj.getElemRef(id);
if (!this.el) return; this.id = id;
dynObj.holder[this.id] = this; this.animString = "dynObj.holder." + this.id;
var px = window.opera? 0: "px";
this.x = x || 0; if (x) this.el.style.left = this.x + px;
this.y = y || 0; if (y) this.el.style.top = this.y + px;
this.w = w || this.el.offsetWidth || 0; this.h = h || this.el.offsetHeight || 0;
if (w) this.el.style.width = w + px; if (h) this.el.style.height = h + px;
this.shiftTo = dw_shiftTo; this.shiftBy = dw_shiftBy;
this.show = dw_show; this.hide = dw_hide;
}
dynObj.getElemRef = function(id) {
var el = document.getElementById? document.getElementById(id): document.all? document.all[id]: null;
return el;
}
dynObj.getInstance = function(id) {
var obj = dynObj.holder[id];
if (!obj) obj = new dynObj(id);
else if (!obj.el) obj.el = dynObj.getElemRef(id);
return obj;
}
function dw_shiftTo(x,y) {
if (x != null) this.el.style.left = (this.x = x) + "px";
if (y != null) this.el.style.top = (this.y = y) + "px";
}
function dw_shiftBy(x,y) { this.shiftTo(this.x+x, this.y+y); }
function dw_show() { this.el.style.visibility = "visible"; }
function dw_hide() { this.el.style.visibility = "hidden"; }
var dw_Bezier = {
B1: function (t) { return t*t*t },
B2: function (t) { return 3*t*t*(1-t) },
B3: function (t) { return 3*t*(1-t)*(1-t) },
B4: function (t) { return (1-t)*(1-t)*(1-t) },
// returns current value based on percentage of time passed
getValue: function (percent,startVal,endVal,c1,c2) {
return endVal * this.B1(percent) + c2 * this.B2(percent) + c1 * this.B3(percent) + startVal * this.B4(percent);
}
}
dw_Animation = {
instances: [],
add: function(fp) {
this.instances[this.instances.length] = fp;
if (this.instances.length == 1) this.timerID = window.setInterval("dw_Animation.control()", 20);
},
remove: function(fp) {
for (var i = 0; i < this.instances.length; i++) {
if (fp == this.instances[i]) {
this.instances = this.instances.slice(0,i).concat( this.instances.slice(i+1) );
break;
}
}
if (this.instances.length == 0) {
window.clearInterval(this.timerID); this.timerID = null;
}
},
control: function() {
for (var i = 0; i < this.instances.length; i++) {
if (typeof this.instances[i] == "function" ) this.instances[i]();
else eval(this.instances[i]);
}
}
}
</script>
<script type="text/javascript">
dynObj.prototype.slideTo = function (destX,destY,slideDur,acc,endFn) {
this.slideDur = slideDur || .0001; var acc = -acc || 0;
if (endFn) this.onSlideEnd = endFn;
if (destX == null) this.destX = this.x; else this.destX = destX;
if (destY == null) this.destY = this.y; else this.destY = destY;
this.startX = this.x; this.startY = this.y;
this.st = new Date().getTime();
this.xc1 = this.x + ( (1+acc) * (this.destX-this.x)/3 );
this.xc2 = this.x + ( (2+acc) * (this.destX-this.x)/3 );
this.yc1 = this.y + ( (1+acc) * (this.destY-this.y)/3 );
this.yc2 = this.y + ( (2+acc) * (this.destY-this.y)/3 );
this.sliding = true;
this.onSlideStart();
dw_Animation.add(this.animString + ".doSlide()");
}
dynObj.prototype.doSlide = function() {
if (!this.sliding) return;
var elapsed = new Date().getTime() - this.st;
if (elapsed < this.slideDur) {
var x = dw_Bezier.getValue(elapsed/this.slideDur, this.startX, this.destX, this.xc1, this.xc2);
var y = dw_Bezier.getValue(elapsed/this.slideDur, this.startY, this.destY, this.yc1, this.yc2);
this.shiftTo(Math.round(x), Math.round(y));
this.onSlide();
} else { // if time's up
dw_Animation.remove(this.animString + ".doSlide()");
this.shiftTo(this.destX,this.destY);
this.onSlide();
this.sliding = false;
this.onSlideEnd();
}
}
dynObj.prototype.slideBy = function(dx,dy,slideDur,acc,endFn) {
var destX=this.x+dx; var destY=this.y+dy;
this.slideTo(destX,destY,slideDur,acc,endFn);
}
dynObj.prototype.onSlideStart = function () {}
dynObj.prototype.onSlide = function () {}
dynObj.prototype.onSlideEnd = function () {}
</script>
</head>
<body>
<div id="glideDiv0" onmouseover="slideIntoView('glideDiv0')" onmouseout="slideOutOfView('glideDiv0',event)">
<p style="margin-right: 75"><a href="main.html"><img border="0" src="nav_0303.gif" width="125" height="20"></a></div>
<div id="glideDiv1" onmouseover="slideIntoView('glideDiv1')" onmouseout="slideOutOfView('glideDiv1',event)">
<p style="margin-right: 75"><a href="events.html"><img border="0" src="nav_0404.gif" width="125" height="21"></a></div>
<div id="glideDiv2" onmouseover="slideIntoView('glideDiv2')" onmouseout="slideOutOfView('glideDiv2',event)">
<p style="margin-right: 75"><a href="faq.html"><img border="0" src="nav_0505.gif" width="125" height="20"></a></div>
<div id="glideDiv3" onmouseover="slideIntoView('glideDiv3')" onmouseout="slideOutOfView('glideDiv3',event)">
<p style="margin-right: 75"><a href="forum/indey.html"><img border="0" src="nav_0606.gif" width="125" height="20"></a></div>
<div id="glideDiv4" onmouseover="slideIntoView('glideDiv4')" onmouseout="slideOutOfView('glideDiv4',event)">
<p style="margin-right: 75"><a href="gallery.html"><img border="0" src="nav_0707.gif" width="125" height="21"></a></div>
<div id="glideDiv5" onmouseover="slideIntoView('glideDiv5')" onmouseout="slideOutOfView('glideDiv5',event)">
<p style="margin-right: 75"><a href="mission.html"><img border="0" src="nav_0808.gif" width="125" height="20"></a></div>
<div id="glideDiv6" onmouseover="slideIntoView('glideDiv6')" onmouseout="slideOutOfView('glideDiv6',event)">
<p style="margin-right: 75"><a href="register.html"><img border="0" src="nav_0909.gif" width="125" height="20"></a></div>
<div id="glideDiv7" onmouseover="slideIntoView('glideDiv7')" onmouseout="slideOutOfView('glideDiv7',event)">
<p style="margin-right: 75"><a href="rules.html"><img border="0" src="nav_1010.gif" width="125" height="21"></a></div>
<div id="glideDiv8" onmouseover="slideIntoView('glideDiv8')" onmouseout="slideOutOfView('glideDiv8',event)">
<p style="margin-right: 75"><a href="apmc.html"><img border="0" src="nav_1111.gif" width="125" height="20"></a></div>
</body>
why won't this work vertically, and what can i do about it?
#glideDiv0, #glideDiv1, #glideDiv2, #glideDiv3, #glideDiv4, #glideDiv5, #glideDiv6, #glideDiv7, #glideDiv8
{position:absolute; visbility:visible; z-indey:200; left: 137; width:125px}
</style>
<script type="text/javascript">
if (document.getElementById) window.onload=initGlideLayers;
function initGlideLayers() {
var glideLyrs = new Array();
// Set up your layers here
// arguments: id, amount to be visible (left), top, width, height
// duration of glide onscroll, accel (-1 to 1, -1 decelerates)
glideLyrs[0] = new dynObj('glideDiv0', 137, 263, 125, 20);
glideLyrs[1] = new dynObj('glideDiv1', 137, 283, 125, 21);
glideLyrs[2] = new dynObj('glideDiv2', 137, 304, 125, 20);
glideLyrs[3] = new dynObj('glideDiv3', 137, 324, 125, 20);
glideLyrs[4] = new dynObj('glideDiv4', 137, 344, 125, 21);
glideLyrs[5] = new dynObj('glideDiv5', 137, 365, 125, 20);
glideLyrs[6] = new dynObj('glideDiv6', 137, 385, 125, 20);
glideLyrs[7] = new dynObj('glideDiv7', 137, 405, 125, 21);
glideLyrs[8] = new dynObj('glideDiv8', 137, 426, 125, 20);
for (var i=0; i<glideLyrs.length; i++) {
// hold amount to be left visible
glideLyrs[i].xOff = glideLyrs[i].x;
if ( !glideLyrs[i].y )
if ( glideLyrs[i-1] ) glideLyrs[i].y = glideLyrs[i-1].y + glideLyrs[i-1].h + 2;
glideLyrs[i].shiftTo( -(glideLyrs[i].w - glideLyrs[i].xOff), glideLyrs[i].y );
glideLyrs[i].show();
}
}
function slideIntoView(id) {
var glideLyr = dynObj.getInstance(id);
glideLyr.slideTo(80, null, 250, -.8);
}
function slideOutOfView(id,e) {
var glideLyr = dynObj.getInstance(id);
e = (e)? e: window.event;
var toEl = e.relatedTarget? e.relatedTarget: e.toElement;
if ( toEl != glideLyr.el && !contained(toEl, glideLyr.el) )
glideLyr.slideTo( -(glideLyr.w - glideLyr.xOff), null, 500, -.8);
}
function contained(oNode, oCont) {
if (!oNode) return;
while ( oNode.parentNode ) {
oNode = oNode.parentNode;
if ( oNode == oCont ) return true;
}
return false;
}
</script>
<script type="text/javascript">
dynObj.holder = {};
function dynObj(id,x,y,w,h) {
this.el = dynObj.getElemRef(id);
if (!this.el) return; this.id = id;
dynObj.holder[this.id] = this; this.animString = "dynObj.holder." + this.id;
var px = window.opera? 0: "px";
this.x = x || 0; if (x) this.el.style.left = this.x + px;
this.y = y || 0; if (y) this.el.style.top = this.y + px;
this.w = w || this.el.offsetWidth || 0; this.h = h || this.el.offsetHeight || 0;
if (w) this.el.style.width = w + px; if (h) this.el.style.height = h + px;
this.shiftTo = dw_shiftTo; this.shiftBy = dw_shiftBy;
this.show = dw_show; this.hide = dw_hide;
}
dynObj.getElemRef = function(id) {
var el = document.getElementById? document.getElementById(id): document.all? document.all[id]: null;
return el;
}
dynObj.getInstance = function(id) {
var obj = dynObj.holder[id];
if (!obj) obj = new dynObj(id);
else if (!obj.el) obj.el = dynObj.getElemRef(id);
return obj;
}
function dw_shiftTo(x,y) {
if (x != null) this.el.style.left = (this.x = x) + "px";
if (y != null) this.el.style.top = (this.y = y) + "px";
}
function dw_shiftBy(x,y) { this.shiftTo(this.x+x, this.y+y); }
function dw_show() { this.el.style.visibility = "visible"; }
function dw_hide() { this.el.style.visibility = "hidden"; }
var dw_Bezier = {
B1: function (t) { return t*t*t },
B2: function (t) { return 3*t*t*(1-t) },
B3: function (t) { return 3*t*(1-t)*(1-t) },
B4: function (t) { return (1-t)*(1-t)*(1-t) },
// returns current value based on percentage of time passed
getValue: function (percent,startVal,endVal,c1,c2) {
return endVal * this.B1(percent) + c2 * this.B2(percent) + c1 * this.B3(percent) + startVal * this.B4(percent);
}
}
dw_Animation = {
instances: [],
add: function(fp) {
this.instances[this.instances.length] = fp;
if (this.instances.length == 1) this.timerID = window.setInterval("dw_Animation.control()", 20);
},
remove: function(fp) {
for (var i = 0; i < this.instances.length; i++) {
if (fp == this.instances[i]) {
this.instances = this.instances.slice(0,i).concat( this.instances.slice(i+1) );
break;
}
}
if (this.instances.length == 0) {
window.clearInterval(this.timerID); this.timerID = null;
}
},
control: function() {
for (var i = 0; i < this.instances.length; i++) {
if (typeof this.instances[i] == "function" ) this.instances[i]();
else eval(this.instances[i]);
}
}
}
</script>
<script type="text/javascript">
dynObj.prototype.slideTo = function (destX,destY,slideDur,acc,endFn) {
this.slideDur = slideDur || .0001; var acc = -acc || 0;
if (endFn) this.onSlideEnd = endFn;
if (destX == null) this.destX = this.x; else this.destX = destX;
if (destY == null) this.destY = this.y; else this.destY = destY;
this.startX = this.x; this.startY = this.y;
this.st = new Date().getTime();
this.xc1 = this.x + ( (1+acc) * (this.destX-this.x)/3 );
this.xc2 = this.x + ( (2+acc) * (this.destX-this.x)/3 );
this.yc1 = this.y + ( (1+acc) * (this.destY-this.y)/3 );
this.yc2 = this.y + ( (2+acc) * (this.destY-this.y)/3 );
this.sliding = true;
this.onSlideStart();
dw_Animation.add(this.animString + ".doSlide()");
}
dynObj.prototype.doSlide = function() {
if (!this.sliding) return;
var elapsed = new Date().getTime() - this.st;
if (elapsed < this.slideDur) {
var x = dw_Bezier.getValue(elapsed/this.slideDur, this.startX, this.destX, this.xc1, this.xc2);
var y = dw_Bezier.getValue(elapsed/this.slideDur, this.startY, this.destY, this.yc1, this.yc2);
this.shiftTo(Math.round(x), Math.round(y));
this.onSlide();
} else { // if time's up
dw_Animation.remove(this.animString + ".doSlide()");
this.shiftTo(this.destX,this.destY);
this.onSlide();
this.sliding = false;
this.onSlideEnd();
}
}
dynObj.prototype.slideBy = function(dx,dy,slideDur,acc,endFn) {
var destX=this.x+dx; var destY=this.y+dy;
this.slideTo(destX,destY,slideDur,acc,endFn);
}
dynObj.prototype.onSlideStart = function () {}
dynObj.prototype.onSlide = function () {}
dynObj.prototype.onSlideEnd = function () {}
</script>
</head>
<body>
<div id="glideDiv0" onmouseover="slideIntoView('glideDiv0')" onmouseout="slideOutOfView('glideDiv0',event)">
<p style="margin-right: 75"><a href="main.html"><img border="0" src="nav_0303.gif" width="125" height="20"></a></div>
<div id="glideDiv1" onmouseover="slideIntoView('glideDiv1')" onmouseout="slideOutOfView('glideDiv1',event)">
<p style="margin-right: 75"><a href="events.html"><img border="0" src="nav_0404.gif" width="125" height="21"></a></div>
<div id="glideDiv2" onmouseover="slideIntoView('glideDiv2')" onmouseout="slideOutOfView('glideDiv2',event)">
<p style="margin-right: 75"><a href="faq.html"><img border="0" src="nav_0505.gif" width="125" height="20"></a></div>
<div id="glideDiv3" onmouseover="slideIntoView('glideDiv3')" onmouseout="slideOutOfView('glideDiv3',event)">
<p style="margin-right: 75"><a href="forum/indey.html"><img border="0" src="nav_0606.gif" width="125" height="20"></a></div>
<div id="glideDiv4" onmouseover="slideIntoView('glideDiv4')" onmouseout="slideOutOfView('glideDiv4',event)">
<p style="margin-right: 75"><a href="gallery.html"><img border="0" src="nav_0707.gif" width="125" height="21"></a></div>
<div id="glideDiv5" onmouseover="slideIntoView('glideDiv5')" onmouseout="slideOutOfView('glideDiv5',event)">
<p style="margin-right: 75"><a href="mission.html"><img border="0" src="nav_0808.gif" width="125" height="20"></a></div>
<div id="glideDiv6" onmouseover="slideIntoView('glideDiv6')" onmouseout="slideOutOfView('glideDiv6',event)">
<p style="margin-right: 75"><a href="register.html"><img border="0" src="nav_0909.gif" width="125" height="20"></a></div>
<div id="glideDiv7" onmouseover="slideIntoView('glideDiv7')" onmouseout="slideOutOfView('glideDiv7',event)">
<p style="margin-right: 75"><a href="rules.html"><img border="0" src="nav_1010.gif" width="125" height="21"></a></div>
<div id="glideDiv8" onmouseover="slideIntoView('glideDiv8')" onmouseout="slideOutOfView('glideDiv8',event)">
<p style="margin-right: 75"><a href="apmc.html"><img border="0" src="nav_1111.gif" width="125" height="20"></a></div>
</body>