Hey guys!
I'm currently working on project, in which I need to animate a menu. It seems to work all right in Safari and Firefox, but Internet Explorer 7.0 makes the animation run slower, and I can't figure out why!?
So far I have only tested it in version 7.0 of Internet Explorer.
First of all I'll show you the Javascript code, which runs in a seperate document: - function startSliders(){
-
-
-
document.getElementById("menuPunktEt").onclick = function(){
-
if (mayI == true) {
-
if (rightSide == 4) {
-
}
-
else
-
if (rightSide == 3) {
-
rightSide = 4;
-
leftSide = 0;
-
animate('contentEt', 'contentTo');
-
}
-
if (rightSide == 2) {
-
rightSide = 4;
-
leftSide = 0;
-
animate('contentEt', 'contentTre');
-
}
-
if (rightSide == 1) {
-
rightSide = 4;
-
leftSide = 0;
-
animate('contentEt', 'contentFire');
-
}
-
if (rightSide == 0) {
-
rightSide = 4;
-
leftSide = 0;
-
animate('contentEt', 'forside');
-
}
-
}
-
}
-
document.getElementById("menuPunktTo").onclick = function(){
-
if (mayI == true) {
-
if (rightSide == 4) {
-
rightSide = 3;
-
leftSide = 1;
-
animate('contentTo', 'contentEt');
-
}
-
else
-
if (rightSide == 3) {
-
}
-
else
-
if (rightSide == 2) {
-
rightSide = 3;
-
leftSide = 1;
-
animate('contentTo', 'contentTre');
-
}
-
else
-
if (rightSide == 1) {
-
rightSide = 3;
-
leftSide = 1;
-
animate('contentTo', 'contentFire');
-
}
-
else
-
if (rightSide == 0) {
-
rightSide = 3;
-
leftSide = 1;
-
animate('contentTo', 'forside');
-
}
-
}
-
}
-
document.getElementById("menuPunktTre").onclick = function(){
-
if (mayI == true) {
-
if (rightSide == 4) {
-
rightSide = 2;
-
leftSide = 2;
-
animate('contentTre', 'contentEt');
-
}
-
else
-
if (rightSide == 3) {
-
rightSide = 2;
-
leftSide = 2;
-
animate('contentTre', 'contentTo');
-
}
-
else
-
if (rightSide == 2) {
-
}
-
else
-
if (rightSide == 1) {
-
rightSide = 2;
-
leftSide = 2;
-
animate('contentTre', 'contentFire');
-
}
-
else
-
if (rightSide == 0) {
-
rightSide = 2;
-
leftSide = 2;
-
animate('contentTre', 'forside');
-
}
-
}
-
}
-
document.getElementById("menuPunktFire").onclick = function(){
-
if (mayI == true) {
-
if (rightSide == 4) {
-
rightSide = 1;
-
leftSide = 3;
-
animate('contentFire', 'contentEt');
-
}
-
else
-
if (rightSide == 3) {
-
rightSide = 1;
-
leftSide = 3;
-
animate('contentFire', 'contentTo');
-
}
-
else
-
if (rightSide == 2) {
-
rightSide = 1;
-
leftSide = 3;
-
animate('contentFire', 'contentTre');
-
}
-
else
-
if (rightSide == 1) {
-
}
-
else
-
if (rightSide == 0) {
-
rightSide = 1;
-
leftSide = 3;
-
animate('contentFire', 'forside');
-
}
-
}
-
}
-
}
-
-
function animate(expander, smaller){
-
mayI = false;
-
bigWindow = expander;
-
var slider = document.getElementById(expander);
-
var collapse = document.getElementById(smaller);
-
-
collapse.style.width = xMinus + "px";
-
-
slider.style.width = x + "px";
-
-
x += speed;
-
xMinus -= speed;
-
percent = (lenght - x) / howFar;
-
speed = speed * percent;
-
-
if (speed > 0.01) {
-
var callFunc = "animate('" + expander + "','" + smaller + "')";
-
setTimeout(callFunc, 1);
-
}
-
else {
-
mayI = true;
-
x = 0;
-
xMinus = 694;
-
speed = 30;
-
lenght = 8260;
-
howFar = lenght - x;
-
percent = 0;
-
-
}
-
}
-
And here comes the html-code:
[HTML]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Hummel - You've got game</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="jscript.js"></script>
<script type="text/javascript">
var x = 0,xMinus = 695,speed = 30,lenght = 8260,howFar = lenght-x,percent,small,rightSide = 0,leftSide = 4,mayI = true;
window.onload = function() {
startSliders();}
</script>
</head>
<body>
<div id="wrapper">
<div id="shadowTop"></div>
<div id="shadowLeft"></div>
<div id="content">
<div id="contentEt"></div>
<div id="menuPunktEt"></div>
<div id="contentTo"></div>
<div id="menuPunktTo"></div>
<div id="contentTre"></div>
<div id="menuPunktTre"></div>
<div id="contentFire"></div>
<div id="menuPunktFire"></div>
<div id="forside"></div>
</div>
<div id="shadowRight"></div>
<div id="footer"><p class="whiteText">Copyright by J I, M N & N B</p></div>
</div>
</body>
</html>[/HTML]
