Entry
How can I slide a positioned element along an a line?
Sep 30th, 2001 11:47
Martin Honnen,
Here is code that works with NN4, NN6, and IE4+. Opera also moves the
elements but has a bug with setInterval which doesn't yield so that
animations cannot interlap.
<html>
<head>
<style>
#message0 {
position: absolute;
visibility: hidden;
background-color: orange;
color: lightblue;
font-weight: bold;
}
#message1 {
position: absolute;
visibility: hidden;
background-color: orange;
color: lightblue;
font-weight: bold;
}
</style>
<script>
MoveableObject.prototype.delay = 50;
MoveableObject.prototype.stepX =
MoveableObject.prototype.stepY = 10;
function CanvasDimensions () {
if (window.innerWidth) {
this.width = window.innerWidth;
this.height = window.innerHeight;
}
else if (document.all) {
this.width = document.body.clientWidth;
this.height = document.body.clientHeight;
}
}
function MoveableObject (htmlId) {
this.htmlId = htmlId;
this.id = MoveableObject.elements.length;
MoveableObject.elements[this.id] = this;
if (document.layers) {
this.layer = document[this.htmlId];
this.width = this.layer.document.width;
this.height = this.layer.document.height;
}
else if (window.opera) {
this.layer = document.getElementById(this.htmlId);
this.width = this.layer.style.pixelWidth;
this.height = this.layer.style.pixelHeight;
}
else if (document.all) {
this.layer = document.all[this.htmlId];
this.width = this.layer.clientWidth;
this.height = this.layer.clientHeight;
}
else if (document.getElementById) {
this.layer = document.getElementById(this.htmlId);
this.width = this.layer.offsetWidth;
this.height = this.layer.offsetHeight;
}
}
function MoveableObject_setVisibility (visibility) {
if (document.layers)
this.layer.visibility =
visibility == 'visible' ? 'show' :
visibility == 'hidden' ? 'hide' : 'inherit';
else
this.layer.style.visibility = visibility;
}
MoveableObject.prototype.setVisibility = MoveableObject_setVisibility;
function MoveableObject_moveTo (x, y) {
if (document.layers) {
this.layer.left = x;
this.layer.top = y;
}
else if (document.all) {
this.layer.style.pixelLeft = x;
this.layer.style.pixelTop = y;
}
else if (document.getElementById) {
this.layer.style.left = x + 'px';
this.layer.style.top = y + 'px';
}
}
MoveableObject.prototype.moveTo = MoveableObject_moveTo;
function MoveableObject_slide (startX, startY, endX, endY) {
this.startX = this.x = startX;
this.startY = this.y = startY;
this.endX = endX;
this.endY = endY;
if (this.startX > this.endY)
this.stepX = -this.stepX;
if (this.startY > this.endY)
this.stepY = -this.stepY;
this.moveTo(this.x, this.y);
this.setVisibility ('visible');
this.tid = setInterval('MoveableObject.elements[' + this.id +
'].slideStep()', this.delay);
}
MoveableObject.prototype.slide = MoveableObject_slide;
function MoveableObject_slideStep () {
this.x += this.stepX;
if ((this.stepX > 0 && this.x > this.endX) ||
(this.stepX < 0 && this.x < this.endX))
this.x = this.endX;
this.y += this.stepY;
if ((this.stepY > 0 && this.y > this.endY) ||
(this.stepY < 0 && this.y < this.endY))
this.y = this.endY;
this.moveTo(this.x, this.y);
if (this.x == this.endX && this.y == this.endY)
clearInterval(this.tid);
}
MoveableObject.prototype.slideStep = MoveableObject_slideStep;
MoveableObject.elements = new Array();
</script>
<script>
var message0, message1;
var canvas;
function startAnimation () {
canvas = new CanvasDimensions();
message0 = new MoveableObject('message0');
var middle = Math.round ((canvas.height - message0.height) / 2);
message0.slide(-message0.width, middle, canvas.width, middle);
message1 = new MoveableObject('message1');
var center = Math.round((canvas.width - message1.width) / 2);
message1.slide(center, canvas.height, center, -message1.height);
}
</script>
</head>
<body onload="startAnimation();">
<div id="message0">
<nobr>Kibology for all.</nobr>
</div>
<div id="message1">
<nobr>All for Kibology.</nobr>
</div>
</body>
</html>
