Switch af 2 divs

Min css:

#left{   
    position:absolute;
    left:10px;
    top:20px;
}

#right{
    position:absolute;
    right:10px;
    top:20px;

}

  <div id="left">
    <img src="billede1">
  </div>

  <div id="right">
    <img src="billede2">
  </div>

<script language="Javascript">
<!--
var speed = 20000
function switchLayer() {
// Her skal jeg vel blot have noget der skifter de 2 positioner??
}
setTimeout("switchLayer()", speed);



//-->
</script>

Har prØvet med dette uden held:


var speed = 1000
function switchLayer()
{

    if(document.getElementById("left").style.left == '10px')
    {
        alert('this');
        document.getElementById("left").style.left  = '';   
        document.getElementById("left").style.right = '10px'
        setTimeout("switchLayer()", speed);
    }else{
        alert('else');
        document.getElementById("left").style.right = '';   
        document.getElementById("left").style.left = '10px'
        setTimeout("switchLayer()", speed);
    }
       
}

setTimeout("switchLayer()", speed);

Prøv dette - kun testet i IE 7.0

<html>
    <head>
        <style>
            .left{
                position: absolute;
                left: 10px;
                top: 20px;
            }
           
            .right{
                position: absolute;
                right: 10px;
                top: 20px;
            }
        </style>
        <script>
            var originalPos = true;
            var speed = 2000;
            var pic1;
            var pic2;
            function startup(){
                pic1 = document.getElementById('pic1');
                pic2 = document.getElementById('pic2');
                switchLayer();
            }
            function switchLayer(){
                if(originalPos){
                    pic1.className = 'left';
                    pic2.className = 'right';
                }else{
                    pic1.className = 'right';
                    pic2.className = 'left';
                }
                setTimeout("switchLayer()", speed);
                originalPos = !originalPos;
            }
        </script>
    </head>
    <body onload='startup();'>
        <div id='pic1'>
            <img src='billede1' alt='pic1'>
        </div>
        <div id='pic2'>
            <img src='billede2' alt='pic2'>
        </div>
    </body>
</html>

-- hvorfor dog skifte className og bruge en masse funktioner, når du kun har brug for at køre een gang:

-- at du sætter faste variable kan der til gengæld ikke indvendes det store imod, men umiddelbart ser det ud til at være overflødigt:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <style type="text/css">
      .left{
        float:left;
        top: 20px;
      }
      .right{
        float:right;
        top: 20px;
      }
    </style>
    <script type="text/javascript">
      function swPics(){
        if(typeof document.getElementById("pic1").style.styleFloat == "string"){
          document.getElementById("pic1").style.styleFloat = "right";
          document.getElementById("pic2").style.styleFloat = "left";
        }else{
          document.getElementById("pic1").style.cssFloat = "right";
          document.getElementById("pic2").style.cssFloat = "left";
        }
      }
      window.onload = function(){
        setTimeout("swPics()",2000);
      }
    </script>
  </head>
  <body>
    <div id='pic1' class="left">
      <img src='billede1' alt='pic1'>
    </div>
    <div id='pic2' class="right">
      <img src='billede2' alt='pic2'>
    </div>
  </body>
</html>

-- og den er ikke checket i IE7, men i IE6, FF 3.0.1 og Opera 9.52 !-)

-- det skulle ikke undre mig, om man skulle endnu længere omkring, hvis også alle de andre almindelige browsere som f.eks. Safari og Konqueror skal med !o]

Roenving dit virker perfekt. Smid et svar.

Har du haft lejlighed til at teste det i andre browsere (end dem, jeg var igennem ?-)

Velbekomme '-)

-- og jeg kom lige i tanke om, at funktionen faktisk kan skrives endnu kortere:

    <script type="text/javascript">
      function swPics(){
        var sFloat = typeof document.getElementById("pic1").style.styleFloat == "string" ? "styleFloat" : "cssFloat";
        document.getElementById("pic1").style[sFloat] = "right";
        document.getElementById("pic2").style[sFloat] = "left";
      }
      window.onload = function(){
        setTimeout("swPics()",2000);
      }
    </script>

IE 7 :) og 8 Beta ser det ud til at virke i!

hov ikke helt korrekt den skifter dem jo ikke tilbage igen...

tilgengæld virker det her :


var speed = 5000

function switchLayer()
{

    if(document.getElementById("left").style.left == '10px')
    {
        document.getElementById("left").style.left  = '';   
        document.getElementById("left").style.right = '10px'

        document.getElementById("right").style.right  = '';   
        document.getElementById("right").style.left = '10px'

        setTimeout("switchLayer()", speed);

    }else{

        document.getElementById("left").style.right = '';   
        document.getElementById("left").style.left = '10px'

        document.getElementById("right").style.left  = '';   
        document.getElementById("right").style.right = '10px'

        setTimeout("switchLayer()", speed);
    }
       
}

    setTimeout("switchLayer()", speed);

Tak for point ;~}