Simple animation with javascript - IE causes problems

Discussion in 'JavaScript' started by Bjorndal, Mar 29, 2008.

0
  1. #1
    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:

    <!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>
     
    Bjorndal, Mar 29, 2008 IP
  2. So1

    So1 Peon

    Messages:
    45
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Did u try to use jQuery or another libs? I have the same problems with IE... with apearing elements (the same structure of realization). I decided some of them (problems) via using jQuery.
     
    So1, Mar 30, 2008 IP