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:
Expand|Select|Wrap|Line Numbers
- 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]