Søg
Avatar billede gadebarnet Nybegynder
14. december 2004 - 18:03 Der er 9 kommentarer og
1 løsning

div layer

Opgave.

Skal have 10 layers der skal vises enkeltvis med 5 sekunders mellemrum.

Der skal være en knap indeni alle layers, der skal kunne gå til det sidste layer, og stoppe "timeren". Den skal først gå tilbage i sin cyklus når der trykkes på fortsæt som kun forekommer når der er trykket på knappen...

Er det til at forstå?
Avatar billede skovenborg Nybegynder
14. december 2004 - 18:25 #1
Hva' mæ:
<script type="text/javascript">
  var layerId = "layer";
  var lastButtonIdx = "sidsteKnap";
  var antal_layers = 10;
  var antal_sekunder = 5;
  var timer;
  var currentLayerIdx = 1;
  var currentLayerElm;
  function changeLayer() {
      if (currentLayerIdx > antal_layers) {currentLayerIdx = 1;}
      if (currentLayerElm) {currentLayerElm.style.display = "none";}
      currentLayerElm = document.getElementById(layerId+currentLayerIdx);
      currentLayerElm.style.display = "block";   
      currentLayerIdx++;
  }
 
  function skipToLast() {
      currentLayerIdx = antal_layers;
      changeLayer();
      document.getElementById(lastButtonIdx).style.display = "inline";
      stopTimer();
     
  }
 
  function continueTimer() {
      document.getElementById(lastButtonIdx).style.display = "none";
      currentLayerIdx = 1;
      changeLayer();
      startTimer();
  }
 
  function startTimer() {
    timer = setInterval("changeLayer();",antal_sekunder*1000);
  }
  function stopTimer() {
    window.clearInterval(timer);
  }
 
  window.onload = function() {
    changeLayer();
    startTimer();
  }
 

</script>

<body>
<form name="form1">
<div id="layer1" class="layer">1<input type="button" value="Gå til sidste" onclick="skipToLast();" /></div>
<div id="layer2" class="layer">2<input type="button" value="Gå til sidste" onclick="skipToLast();" /></div>
<div id="layer3" class="layer">3<input type="button" value="Gå til sidste" onclick="skipToLast();" /></div>
<div id="layer4" class="layer">4<input type="button" value="Gå til sidste" onclick="skipToLast();" /></div>
<div id="layer5" class="layer">5<input type="button" value="Gå til sidste" onclick="skipToLast();" /></div>
<div id="layer6"  class="layer">6<input type="button" value="Gå til sidste" onclick="skipToLast();" /></div>
<div id="layer7" class="layer">7<input type="button" value="Gå til sidste" onclick="skipToLast();" /></div>
<div id="layer8" class="layer">8<input type="button" value="Gå til sidste" onclick="skipToLast();" /></div>
<div id="layer9" class="layer">9<input type="button" value="Gå til sidste" onclick="skipToLast();" /></div>
<div id="layer10" class="layer">10<input type="button" value="Gå til sidste" onclick="skipToLast();" />
<input type="button" id="sidsteKnap" value="Fortsæt" style="display:none;" onclick="continueTimer();" /></div>
</form>
Avatar billede gadebarnet Nybegynder
14. december 2004 - 18:28 #2
Den spørger om jeg vil acceptere blabla, og den viser det forkert...
Avatar billede skovenborg Nybegynder
14. december 2004 - 18:50 #3
acceptere hvad? Det virker fint her (Mozilla Firefox 1.0) - hvis jeg altså har forstået spørgsmålet korrekt. Checker lige IE når jeg kommer ind i Windows engang.
Avatar billede skovenborg Nybegynder
14. december 2004 - 18:56 #4
ak og ve, ja nu kan jeg se
at fejlen min er, og løsningen er her:

<style type="text/css">
  .layer {
      display:none;
  }
</style>
Avatar billede gadebarnet Nybegynder
14. december 2004 - 18:58 #5
Kunne man så også lave så den fader mellem de layers?
Avatar billede gadebarnet Nybegynder
14. december 2004 - 18:58 #6
Ja, du må gerne lige checke det i windows. IE
Avatar billede skovenborg Nybegynder
14. december 2004 - 20:16 #7
okay, efter meget besvær fik jeg bakset det her sammen - håber det virker nogenlunde tilfredsstillende:
<script type="text/javascript">
  var layerId = "layer";
  var lastButtonIdx = "sidsteKnap";
  var antal_layers = 10;
  var antal_sekunder = 2;
  var timer,fadingTimer;
  var fadingTime = 2; // i ms
  var nextLayerOpacity = 0;
  var prevLayerOpacity = 100;
  var currentLayerIdx = 1;
  var currentLayerElm, previousLayerElm;
  var dOpacity = 5; // hvor meget den fader per gang (fra 1-100)
  var fadingSpeed;
  function changeLayer() {
      if (currentLayerIdx > antal_layers) {currentLayerIdx = 1;}
      if (arguments.length == 1) {prevIdx = arguments[0];}
      else {prevIdx = (currentLayerIdx == 1) ? antal_layers : currentLayerIdx-1;}
      previousLayerElm = document.getElementById(layerId+prevIdx);
      currentLayerElm = document.getElementById(layerId+currentLayerIdx);
      currentLayerElm.style.display = "block";
      // beregner fade-timerens interval
      if ((currentLayerElm.filters || typeof currentLayerElm.style.MozOpacity != "undefined") && prevIdx != currentLayerIdx) {
          fadingSpeed = 100/dOpacity*fadingTime;
          fadingTimer = window.setInterval("fadeLayers();",fadingSpeed);
      }
      currentLayerIdx++;
  }

  function fadeLayers() {
      nextLayerOpacity += dOpacity;
      prevLayerOpacity -= dOpacity;
      if (currentLayerElm.filters) {
          currentLayerElm.filters.alpha.opacity = nextLayerOpacity;
          previousLayerElm.filters.alpha.opacity = prevLayerOpacity;
      }
      else {
          currentLayerElm.style.MozOpacity = nextLayerOpacity/100;
          previousLayerElm.style.MozOpacity = prevLayerOpacity/100;
      }

      if (nextLayerOpacity == 100) {
            stopFading();
            prevLayerOpacity = 100;
      }
  }

  function stopFading() {
        previousLayerElm.style.display = "none";
        window.clearInterval(fadingTimer);
        nextLayerOpacity = 0;
  }


  function skipToLast() {
      var tempIdx =  (currentLayerIdx == 1 || currentLayerIdx == antal_layers+1) ? antal_layers : currentLayerIdx-1;
      currentLayerIdx = antal_layers;
      stopTimer();
      changeLayer(tempIdx);
      document.getElementById(lastButtonIdx).style.display = "inline";
  }

  function continueTimer() {
      document.getElementById(lastButtonIdx).style.display = "none";
      currentLayerIdx = 1;
      changeLayer();
      startTimer();
  }

  function startTimer() {
    timer = setInterval("changeLayer();",antal_sekunder*1000);
  }
  function stopTimer() {
    window.clearInterval(timer);
    if (fadingTimer) {stopFading();}
  }

  window.onload = function() {
    changeLayer();
    startTimer();
  }


</script>

<style type="text/css">
  .layer {
      display:none;
      position:absolute;
  }
</style>
</head>
<body>
<form name="form1" style="position:relative;">
<div id="layer1" class="layer" style="-moz-opacity:0;filter:alpha(opacity=0);">1<input type="button" style="background-color:#f00" value="Gå til sidste" onclick="skipToLast();" /></div>
<div id="layer2" class="layer" style="-moz-opacity:0;filter:alpha(opacity=0);">2<input type="button" value="Gå til sidste" onclick="skipToLast();" /></div>
<div id="layer3" class="layer" style="-moz-opacity:0;filter:alpha(opacity=0);">3<input type="button" value="Gå til sidste" onclick="skipToLast();" /></div>
<div id="layer4" class="layer" style="-moz-opacity:0;filter:alpha(opacity=0);">4<input type="button" value="Gå til sidste" onclick="skipToLast();" /></div>
<div id="layer5" class="layer" style="-moz-opacity:0;filter:alpha(opacity=0);">5<input type="button" value="Gå til sidste" onclick="skipToLast();" /></div>
<div id="layer6"  class="layer" style="-moz-opacity:0;filter:alpha(opacity=0);">6<input type="button" value="Gå til sidste" onclick="skipToLast();" /></div>
<div id="layer7" class="layer" style="-moz-opacity:0;filter:alpha(opacity=0);">7<input type="button" value="Gå til sidste" onclick="skipToLast();" /></div>
<div id="layer8" class="layer" style="-moz-opacity:0;filter:alpha(opacity=0);">8<input type="button" value="Gå til sidste" onclick="skipToLast();" /></div>
<div id="layer9" class="layer" style="-moz-opacity:0;filter:alpha(opacity=0);">9<input type="button" value="Gå til sidste" onclick="skipToLast();" /></div>
<div id="layer10" class="layer" style="-moz-opacity:0;filter:alpha(opacity=0);">10<input type="button" value="Gå til sidste" onclick="skipToLast();" />
<input type="button" id="sidsteKnap" value="Fortsæt" style="display:none;" onclick="continueTimer();" /></div>
</form>
Avatar billede gadebarnet Nybegynder
14. december 2004 - 20:24 #8
Det spiller fanme MAX...

Fantastisk TAK.
Avatar billede skovenborg Nybegynder
14. december 2004 - 20:31 #9
det var dejligt :-)

men sig til hvis der er problemmer.
Avatar billede skovenborg Nybegynder
14. december 2004 - 20:33 #10
og tak for points :-)
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 5 27/04/202620:09 03/05/202613:59
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 dag 16:21 Installere Ubuntu på Virtuel Maskine Af Uvanga i Andet software
I dag 09:38 Microsoft har igen ødelagt mit højreklik Af valby i Windows
30/0714:41 To mails fra YouSee - Jeg tror ikke altid på tilfældigheder Af mort1 i Andet sikkerhed
27/0714:34 Hjælp til at kunne skanne negativer på Plustek 8300i SE Af Mariann i Foto & video
27/0713:58 Mapperne Dokumenter og Overførsler er forsvundet efter geninstallation af Win11 Af bragger i Windows
White papers
Flere white papers »