Søg
Avatar billede mini-me Nybegynder
28. august 2008 - 13:44 Der er 11 kommentarer og
1 løsning

Switch af 2 divs

Hej,

I venstre top, har jeg et billede og i højre top har jeg et billede.

2 sekunder senere vil jeg have dem til at skifte plads, how to??
Avatar billede mini-me Nybegynder
28. august 2008 - 14:00 #1
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>
Avatar billede mini-me Nybegynder
28. august 2008 - 14:06 #2
<script language="Javascript">
<!--
var speed = 20000
function switchLayer() {
// Her skal jeg vel blot have noget der skifter de 2 positioner??
}
setTimeout("switchLayer()", speed);



//-->
</script>
Avatar billede mini-me Nybegynder
28. august 2008 - 14:21 #3
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);
Avatar billede Slettet bruger
28. august 2008 - 16:05 #4
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>
Avatar billede roenving Novice
29. august 2008 - 18:06 #5
-- 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]
Avatar billede mini-me Nybegynder
29. august 2008 - 18:34 #6
Roenving dit virker perfekt. Smid et svar.
Avatar billede roenving Novice
29. august 2008 - 18:39 #7
Har du haft lejlighed til at teste det i andre browsere (end dem, jeg var igennem ?-)

Velbekomme '-)
Avatar billede roenving Novice
29. august 2008 - 18:43 #8
-- 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>
Avatar billede mini-me Nybegynder
29. august 2008 - 19:06 #9
IE 7 :) og 8 Beta ser det ud til at virke i!
Avatar billede mini-me Nybegynder
29. august 2008 - 19:08 #10
hov ikke helt korrekt den skifter dem jo ikke tilbage igen...
Avatar billede mini-me Nybegynder
29. august 2008 - 19:12 #11
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);
Avatar billede roenving Novice
31. august 2008 - 16:24 #12
Tak for point ;~}
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel Indlæg Oprettet Seneste aktivitet
problem med download i <a href=" " download> tag i JavaScript Af Peer i JavaScript 0 I går 20:09 -
Validering af filnavn i formular Af Strawberry i JavaScript 8 14/04/202610:11 20/04/202611:14
Mangler et JavaScript til htm side med iframe i Joomla5 Af Peder Lund Nielsen i JavaScript 2 03/02/202614:19 04/04/202616:02
Åbne en PDF fil fra en mappe Af mbl i JavaScript 9 18/04/202516:52 22/04/202512:33
Spørgsmål til cookies Af Mads i JavaScript 2 14/02/202511:47 27/06/202514:34
Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I går 20:09 problem med download i <a href=" " download> tag i JavaScript Af Peer i JavaScript
I går 18:26 Problemer med Prestashop Af BCP i E-handel
I går 18:10 Google Home Af birdbrain i Apps til iOS
I går 14:46 Microsoft vil "stjæle" mine login oplysninger Af mort1 i Windows
I går 14:35 trådløst tastatur Af ole i Andet hardware
White papers
Flere white papers »