Søg
Avatar billede virus Nybegynder
22. maj 2003 - 15:00 Der er 17 kommentarer og
2 løsninger

Show/Hide layer

Har været på udflugt efter svar på ovenstående spørgsmål og bevares der er mange svar, men, det jeg søger er blot en funktion som selv finder ud af om det pågældende layer skal vises eller skjules.

Dvs. funktionen skal finde ud af om det pågældende layer allerede er vist eller skjult :)

Thx
Avatar billede fixxxer Nybegynder
22. maj 2003 - 15:07 #1
var ns, ns6, ie;

ns  = (document.layers) ? true : false;
ns6 = (document.getElementById) ? true : false;
ie  = (document.all) ? true : false;
if (navigator.userAgent.indexOf ("Mozilla") != -1) {
  BrowserOK = parseInt(navigator.appVersion.substring(0,1)) >= 3
}

function changeVisibility( menu ){
  newMenu = menu;
  if( ns ){
      menu = document.layers[menu];
      if( menu.visibility == "hide" ){
          if( lastMenu.length > 0 ){
            document.layers[ lastMenu].visibility = "hide";
            }
        menu.visibility = "show";
    menu.display = "";
            lastMenu = newMenu;
      } else {
        menu.visibility = "hide";
    menu.display = "";
      }
    } else if( ie ){
      menu = document.all[menu].style;
        if( menu.visibility == "hidden" ){
              if( lastMenu.length > 0 ){
              document.all[ lastMenu].style.visibility = "hidden";
              }
          menu.visibility = "visible";
      menu.display = "";
                lastMenu = newMenu;
        } else {
          menu.visibility = "hidden";
      menu.display = "";
        }
    } else if( ns6 ){
      menu = document.getElementById(menu).style;
    if( menu.visibility == "hidden" ){
          if( lastMenu.length > 0 ){
              document.getElementById( lastMenu ).style.visibility = "hidden";
            }
      menu.visibility = "visible";
      menu.display = "";
            lastMenu = newMenu;
    } else {
      menu.visibility = "hidden";
      menu.display = "";
    } 
  }
}



køres som changeVisibility('detderskalskjules/vises');

fx et <div>:

<div id="detderskalskjules/vises">Hej med dig</div>
Avatar billede pelkjaer Nybegynder
22. maj 2003 - 15:08 #2
var shown = false;

function showHideLayers(layerID) {
  if (document.getElementById) {
    if (!shown) {
      document.getElementById(layerID).style.visibility = "hidden";
    }
    if (shown) {
      document.getElementById(layerID).style.visibility = "visible";
    }
  }
  shown = !shown;
}

<a href="#" onClick="showHideLayers('Layer1');return false;">klik</a>
Avatar billede fixxxer Nybegynder
22. maj 2003 - 15:20 #3
må jeg tilføje at min arbejder efter hvilken browser klienten kører, og at den husker forgående layer, hvis man vil arbejde med flere layer som skal skjules/vises :)
Avatar billede virus Nybegynder
22. maj 2003 - 15:43 #4
Well jeg får en fejl om der mangler et object i dit eksempel fixxxer :/
Din pelkjaer har problemer med mere end 3 layers :/

Har i nogen ideer?
Skal btw KUN virke i IE >= 4.*
Avatar billede pelkjaer Nybegynder
22. maj 2003 - 16:47 #5
Så virker det med ligeså mange layers du ønsker, og også i IE4

<html>
<head>
<script type="text/Javascript">
var shown = false;

function showHideLayers() {
  var a = arguments;
  for (i=0; i<a.length; i+=1) {
    if (document.getElementById) {
      if (a[i]!="none" && !shown) {
        x = document.getElementById(a[i]);
        x.style.visibility = "hidden";
      }
      if (a[i]!="none" && shown) {
        x = document.getElementById(a[i]);
        x.style.visibility = "visible";
      }
    }
    if (document.all && !document.getElementById) {
      if (a[i] != "none" && !shown) {
        x = eval('document.all.' + (a[i]));
        x.style.visibility = "hidden";
      }
      if (a[i] != "none" && shown) {
        x = eval('document.all.' + (a[i]));
        x.style.visibility = "visible";
      }
    }
  }
  shown = !shown;
}
</script>
</head>
<body>

<div id="Layer1" style="position:absolute; left:25px; top:15px; width:100px; height:100px; z-index:1; background-color: #CCC;">LAG1</div>
<div id="Layer2" style="position:absolute; left:50px; top:25px; width:100px; height:100px; z-index:1; background-color: #0099FF;">LAG2</div>
<div id="Layer3" style="position:absolute; left:75px; top:35px; width:100px; height:100px; z-index:1; background-color: #FF0000;">LAG3</div>
<div id="Layer4" style="position:absolute; left:100px; top:45px; width:100px; height:100px; z-index:1; background-color: #999999;">LAG4</div>

<br><br><br><br><br><br><br><br>

<a href="#" onClick="showHideLayers('Layer1','Layer2','Layer3','Layer4');return false;">Show/Hide</a>

</body>
</html>
Avatar billede fixxxer Nybegynder
22. maj 2003 - 16:50 #6
<html>

<head>
<script>
var ns, ns6, ie;
var lastMenu = '';


ns  = (document.layers) ? true : false;
ns6 = (document.getElementById) ? true : false;
ie  = (document.all) ? true : false;
if (navigator.userAgent.indexOf ("Mozilla") != -1) {
  BrowserOK = parseInt(navigator.appVersion.substring(0,1)) >= 3
}

function changeVisibility( menu ){
  newMenu = menu;
  if( ns ){
      menu = document.layers[menu];
      if( menu.visibility == "hide" ){
          if( lastMenu.length > 0 ){
            document.layers[ lastMenu].visibility = "hide";
            }
        menu.visibility = "show";
    menu.display = "";
            lastMenu = newMenu;
      } else {
        menu.visibility = "hide";
    menu.display = "";
      }
    } else if( ie ){
      menu = document.all[menu].style;
        if( menu.visibility == "hidden" ){
              if( lastMenu.length > 0 ){
              document.all[ lastMenu].style.visibility = "hidden";
              }
          menu.visibility = "visible";
      menu.display = "";
                lastMenu = newMenu;
        } else {
          menu.visibility = "hidden";
      menu.display = "";
        }
    } else if( ns6 ){
      menu = document.getElementById(menu).style;
    if( menu.visibility == "hidden" ){
          if( lastMenu.length > 0 ){
              document.getElementById( lastMenu ).style.visibility = "hidden";
            }
      menu.visibility = "visible";
      menu.display = "";
            lastMenu = newMenu;
    } else {
      menu.visibility = "hidden";
      menu.display = "";
    }
  }
}

</script>

</head>

<body>
  <div id="testdiv">Mit test div</div>
 
  <a href="java script:changeVisibility('testdiv');">Klik her</a>
</body>

</html>
Avatar billede fixxxer Nybegynder
22. maj 2003 - 16:50 #7
jeg havde glemt en variabel
Avatar billede pelkjaer Nybegynder
22. maj 2003 - 16:53 #8
Til IE4 skal du huske name

<div id="Layer1" name="Layer1" osv>
Avatar billede fixxxer Nybegynder
22. maj 2003 - 16:53 #9
ok, det var jeg ikke klar over
Avatar billede pelkjaer Nybegynder
22. maj 2003 - 16:54 #10
Det var til mig spørger :o) det var mig selv der havde glemt det..
Avatar billede virus Nybegynder
22. maj 2003 - 19:23 #11
Alright :)

Fixxxer dit eksempel virker desværre ikke ordentligt med 4 divs :/

Pelkjaer det er som om at dit ikke virker ordentligt, nogen gange skal der trykkes flere gange for at vise/skjule layers, afhængig af hvor mange der er skjulte/aktive


Jeg smider 200 points i spørgsmålet som vi dele... hvis i har en løsning inden imorgen :)
Avatar billede fixxxer Nybegynder
22. maj 2003 - 20:19 #12
virker mit eksempel ikke med 4 divs?

jeg har kørt det med tæske mange divs, uden problemer


Skal den, som min kode gør, skjule det forgående div, når et nyt skal vises?? for så skal scriptet jo bare rettes :)
Avatar billede fixxxer Nybegynder
22. maj 2003 - 20:20 #13
altså det skal rettes hvis det IKKE skal skjule forgående viste div, når der vises nyt div
Avatar billede pelkjaer Nybegynder
22. maj 2003 - 20:53 #14
virus>>Det er jo klart - er 1 layer skjult, og et andet ikke skjult, vil de jo ikke gøre det samme første gang der klikkes - sådan er det med mindre du samtidig med id vil angive style på din event. Og så er vil tilbage i en "alm show/hide". For mig at se virker det som det skal, ellers må du forklare dig igen.
Avatar billede fixxxer Nybegynder
22. maj 2003 - 21:08 #15
lige mine ord :)
Avatar billede virus Nybegynder
22. maj 2003 - 23:57 #16
Ok kan lige hurtigt prøve at beskrive hvad det er jeg søger :)

Jeg har et kundesystem, her har jeg alle ordre som en kunde har foretaget.
Istedet for at skulle vise alt info om disse ordre vil jeg bare dynamisk
når de blever hevet ud af databasen, kun få vist ordrenr, som samtidigt
er et link til at show/hide alt info om den pågældende ordre. Der skal kunne
være flere viste layers af gangen, til sammenligning. :)

Altså egentligt en kopi af det eksperten.dk bruger oppe i menuen til venstre :)
Avatar billede fixxxer Nybegynder
23. maj 2003 - 01:03 #17
så skal mit script bare byttes ud:



<html>

<head>
<script>
var ns, ns6, ie, newlayer;

ns4  = (document.layers) ? true : false;
ie4 = (document.all)? true:false
ie5 =(document.getElementById)? true:false
ns6 = (document.getElementById && !document.all)?true:false;

function getLayerStyle( lyr ){
if( ns4 ){
return document.layers[lyr];
} else if( ie4 ){
return document.all[lyr].style;
} else if( ie5 ){
return document.all[lyr].style;
} else if( ns6 ){
return document.getElementById(lyr).style;
}
}

function ShowHide(layer){
newlayer = getLayerStyle(layer)

var styleObj = (ns4)? document.layers[layer] : (ie4)? document.all[layer].style : document.getElementById(layer).style;

if (newlayer.visibility == "hidden") {
newlayer.visibility = "visible";
styleObj.display = ""
}
else if (newlayer.visibility == "visible") {
newlayer.visibility = "hidden";
styleObj.display = "none"
}
}
</script>

</head>

<body>

  <div id="testdiv1" name="testdiv1" style="visibility: hidden; display: none;">div 1</div>
  <div id="testdiv2" name="testdiv2" style="visibility: hidden; display: none;">div 2</div>
  <div id="testdiv3" name="testdiv3" style="visibility: hidden; display: none;">div 3</div>
  <div id="testdiv4" name="testdiv4" style="visibility: hidden; display: none;">div 4</div>
  <div id="testdiv5" name="testdiv5" style="visibility: hidden; display: none;">div 5</div>
  <div id="testdiv6" name="testdiv6" style="visibility: hidden; display: none;">div 6</div>
  <div id="testdiv7" name="testdiv7" style="visibility: hidden; display: none;">div 7</div>
  <div id="testdiv8" name="testdiv8" style="visibility: hidden; display: none;">div 8</div>

  <a href="java script:ShowHide('testdiv1');">vis/skjul 1</a> 
  <a href="java script:ShowHide('testdiv2');">vis/skjul 2</a> 
  <a href="java script:ShowHide('testdiv3');">vis/skjul 3</a> 
  <a href="java script:ShowHide('testdiv4');">vis/skjul 4</a> 
  <a href="java script:ShowHide('testdiv5');">vis/skjul 5</a> 
  <a href="java script:ShowHide('testdiv6');">vis/skjul 6</a> 
  <a href="java script:ShowHide('testdiv7');">vis/skjul 7</a> 
  <a href="java script:ShowHide('testdiv8');">vis/skjul 8</a> 
</body>

</html>


Bemærk at <div>'et skal indholde: style="visibility: hidden; display: none" for at det virker
Avatar billede virus Nybegynder
23. maj 2003 - 12:57 #18
Perfekt, siger mange tak for hjælpen begge to! :)
Avatar billede fixxxer Nybegynder
23. maj 2003 - 14:25 #19
ingen årsag og 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 5 27/04/202620:09 21/08/202610:41
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 10:26 Synkronisering af kalender mellem computer, android telefon og iPhone Af Strawberry i Andre onlineløsninger
I dag 10:24 Kan Excel selv beregne alder? Af leahcim i Excel
I går 15:02 Gemme besked fra Facebook / Messenger Af lurup i Sociale medier
29/0820:17 Kan man kopiere en DVD og afspille den på * Linux Mint - Cinnamon - 22.1 - "Xia" * ? Af Ikke-ekspert i Linux
27/0821:03 Kan man få Word viewer gratis Af Strawberry i Word
White papers
Flere white papers »