webForumDet fria alternativet

visa/dölj <DIV>

2 svar · 449 visningar · startad av orvar

orvarMedlem sedan feb. 2001105 inlägg
#1

Hej,
försökt mig på _lite_ ajax och råkade komma över en artikel från -02 som visade följande metod för att med ett musklick visa/dölja en <DIV>:

Css:

#box {
	position: relative;
	margin: 0 auto;
	padding: 0 auto;
	width: 90%;
	border: 1px solid black;
	background: white;
	top: 30px;
	z-index: 1;
	visibility: hidden;
}

Javascript:

<script language="JavaScript">
  ns4 = document.layers;
  ie4 = document.all;
  nn6 = document.getElementById && !document.all;

function showObject(t) {
  if (ns4) {
    document.box.visibility = "show";
  } else if (ie4) {
    document.all['box'].style.visibility = "visible";
  } else if (nn6) {
    document.getElementById('box').style.visibility = "visible";
  }
}

function hideObject() {
  if (ns4) {
    document.box.visibility = "hide";
  } else if (ie4) {
    document.all['box'].style.visibility = "hidden";
  } else if (nn6) {
    document.getElementById('box').style.visibility = "hidden";
  }
}
</script>

Jag kan köpa att man fick göra det manuellt för olika webbläsare -02, men har inte utveckligen kommit längre -07? Det funkar ex. inte i Safari som det ser ut nu. Frågan är om det har kommit någon generell standard än? Finns det något annat bättre/enklare sätt kan jag köpa det också.

Tacksam för svar!
/orvar

colioneMedlem sedan juni 20014 421 inlägg
#2
function toggle(strID) {
document.getElementById(strID).style.visibility = (document.getElementById(strID).style.visibility === "hidden") "visible":"hidden";
}

Ska räcka i dagsläget.

Då skickar du in idt på det element du vill dölja när du anropar funktionen:

toggle('box')

Detta stöds i alla moderna browser. (IE5 och upp)

dAEkMedlem sedan feb. 20041 816 inlägg
#3

Det finns flera sätt att gömma element. Att sätta display: none är ett sätt, visibility: hidden är ett annat och att positionera elementen utanför skärmen är ett tredje, som f.ö. lämpar sig väl när man vill att information skall vara "synlig" för de som surfar med hjälpmedel t.ex. en talsyntes eller punktdisplay - men inte för seende.

Enkelt sagt är display: none nog den vanligaste metoden som används idag. display:none gör att utrymmet som det gömda innehållet också göms, eller tas bort från dokumentflödet, vilket inte visibility: hidden gör. Använder man visibility: hidden och har jättemycket innehåll kommer det alltså bli ett stort tomrum på sidan.

Kort sagt: det finns flera sätt som är olika bra beroende på vad man vill göra.

132 ms totalt · 3 externa anrop · v20260731065814-full.30151723
0 ms — hämta forumlista (cache)
0 ms — hämta statistik (cache)
129 ms — hämta tråd, inlägg och bilagor (db)