PDA

View Full Version : IE hates me. (Problems with script in IE)



rlemon
01-20-2006, 07:51 PM
http://rlemon.com/assassins/test

does not work in IE. and has limitations in other browsers.



/* Slide Position Menu by robert lemon (rob.lemon@gmail.com) */

/*----- CONFIG -----*/

var T = new Array('a'); // Tag name
var TC = new Array('slide'); // Class Name

/*------------------*/

var O; var TA = new Array(); var checkLast=0;
function startSlide(){
O=getElementsByClassName(T,TC);
for(i=0;i<O.length;i++){
for(j=0;j<O[i].innerHTML.length;j++){
checkLast++;
}
}
for(i=0;i<O.length;i++){
TA[i] = new Array(); O[i].style.visibility = 'hidden';
for(j=0;j<O[i].innerHTML.length;j++){
TA[i][j] = document.createElement('span');
TA[i][j].appendChild(document.createTextNode(O[i].innerHTML.charAt(j)));
document.body.appendChild(TA[i][j]);
posRand(TA[i][j]);
TA[i][j].id = 'M' + i + '_' + j;
var endX = O[i].offsetLeft;
for(h=0;h<TA[i].length;h++){
if(h!=0){
endX = endX + TA[i][h-1].offsetWidth;
}
}
var endY = O[i].offsetTop;
slide(TA[i][j].id, endX, endY, 0, 0, 0, 0, 0, 0);
}
}
}

function posRand(obj){
var nX = Math.round(Math.random()*getW());
var nY = Math.round(Math.random()*getH());
obj.style.position = "absolute";
obj.style.left = nX;
obj.style.top = nY;
}

function slide(id, endX, endY, deltaX, deltaY, currentX, currentY, accel, dis) {
// access the layer to move, via the DOM
var myLayer = document.getElementById(id);

// the amount of milli-seconds to pass before calling the function again, i.e. a loop!
var timeOffset = 10;

// on the first call of the function where the currentX value will be 0, we will take the
// current x/y position of the layer as the starting coordinates
if (currentX == 0) {
currentX = myLayer.offsetLeft;
}
if (currentY == 0) {
currentY = myLayer.offsetTop;
}

// on the first pass, we need to determine the total distance that the layer needs
// to travel
if (dis == 0) {
dis = distance(currentX, currentY, endX, endY);
}

// again on the first pass, we need to determine the amount of movement for the
// layer, and the direction (+/-) along each axis
if (deltaX == 0) {
// the distance that the layer must travel on the x-axis
var xDistance = parseInt(endX) - currentX;
// the distance that the layer must travel on the y-axis
var yDistance = parseInt(endY) - currentY;
// the angle that the layer will travel in
var angle = Math.atan((endY-currentY)/(endX-currentX));
// the amount of movement along the x-axis that the layer will move
// in per iteration
var deltaX = Math.cos(angle);
// the amount of movement along the y-axis that the layer will move
// in per iteration
var deltaY = Math.sin(angle);

// the following conditions will ensure that the deltaX and deltaY values
// will be minus values when they need to be
if (xDistance < 0 && deltaX > 0)
deltaX = -1*deltaX;
if (xDistance > 0 && deltaX < 0)
deltaX = -1*deltaX;

if (yDistance < 0 && deltaY > 0)
deltaY = -1*deltaY;
if (yDistance > 0 && deltaY < 0)
deltaY = -1*deltaY;
}

// increment the acceleration value
accel += accel;

// if we are using an accelerator, we will factor this into the equation for the
// calculation of the current x/y coordinates, otherwise we will just use the deltaX/Y
// values by themselves.
if (accel > 0) {
currentX = accel*(currentX + deltaX);
currentY = accel*(currentY + deltaY);
}else{
currentX = currentX + deltaX;
currentY = currentY + deltaY;
}

// the current distance left to travel for the layer movment
var currentDis = distance(currentX, currentY, endX, endY);


// the current distance should never be greater than the total distance to travel!
if (currentDis > dis)
currentDis = 0;

// if we have not traveled to required distance yet, move the layer and recall
// the slide() function, i.e. loop, otherwise move the layer to its final destination
// and stop.
if (currentDis > 1) {
myLayer.style.left = Math.round(currentX);
myLayer.style.top = Math.round(currentY);
setTimeout('slide("'+id+'",'+endX+','+endY+','+deltaX+','+deltaY+','+currentX+','+currentY+','+accel+','+dis+')',timeOffset);
}else{
currentX = endX;
currentY = endY;
myLayer.style.left = currentX;
myLayer.style.top = currentY;
checkLast--;
if(checkLast == 0){
cleanup();
}
}
return;
}
function cleanup(){
for(i=0;i<O.length;i++){
O[i].style.visibility = 'visible';
for(j=0;j<O[i].innerHTML.length;j++){
TA[i][j].style.display = 'none';
delete TA[i][j];
}
}
}
// using Pythagoras, returns the distance (hypotenuse) between the two supplied points
function distance(x1, y1, x2, y2) {
var x = x2 - x1;
var y = y2 - y1;
var dis = Math.sqrt(x*x * y*y);
return dis;
}

/*----- Global Function List -----*/
function isArray(a) {
return (a && typeof a == 'object' && a.constructor == Array);
}
function createArray( a ) {
var tArray = new Array();
tArray[tArray.length] = a;
return tArray;
}

function getElementsByClassName(T,TC){
if ( typeof T == 'string' ) T = createArray( T );
if ( typeof TC == 'string' ) TC = createArray( TC );
var c=0; var rs = new Array();
if (isArray(T) && isArray(TC)) {
for(var i=0;i<T.length;i++){
for(var j=0;j<TC.length;j++){
var tOBJ = document.getElementsByTagName(T[i]);
for(var h=0;h<tOBJ.length;h++){
if(tOBJ[h].getAttribute('class') == TC[j]){
rs[c++]=tOBJ[h];
}
}
}
}
}
return rs;
}

function getW(){
var w;
if(document.innerWidth){ w=document.innerWidth;
} else if(document.documentElement.clientWidth){ w=document.documentElement.clientWidth;
} else if(document.body){ w=document.body.clientWidth; }
return w;
}
function getH(){
var h;
if(document.innerHeight){ h=document.innerHeight;
} else if(document.documentElement.clientHeight){ h=document.documentElement.clientHeight;
} else if(document.body){ h=document.body.clientHeight; }
return h;
}


there is the code in the js file.

If i include the links in a table with padding they 'jump' when i call cleanup.

also, sometimes the random 'positioning' of the letters limits itself to the upper region of the page (FF 1.5 and Opera)