Javascriptmeny

5 svar · 122 visningar · startad av Stina 16 maj 2001

StinaMedlem sedan jan. 200189 inlägg

16 maj 2001 10:34#1

Är det någon som vet hur man ska göra för att denna ska funka även i Netscape.

HTML kod:

<body>

</body>
</html>

JohnsenMedlem sedan juli 2000836 inlägg

16 maj 2001 10:54#2

Eftersom display är IE-specifikt går det inte att göra på det viset för att flytta lager i andra läsare. Jag gjorde ett litet test på en variant för en tid sedan, du kan ju se om det är något att ha: http://www.host4u.d2g.com/johnsen/tmen.html

------------------
- J-O-H-N-S-E-N -
------------------

JojoxxMedlem sedan juni 20004 308 inlägg

16 maj 2001 11:10#3

Nja... display ingår faktiskt i CSS-standarden (CSS Level 2 - display), men Netscape 4.x stödjer inte dynamisk rendering (rendera om sidan efter det att den laddats). Men Netscape 6, och andra DOM1 kompatibla läsare kan använda det.

Lite modifikation

<html>
<head>
<title>Menu</title>

<script language="Javascript">
<!--
var currentTopic = 0;
var originalTopic = 0;
var lonePicks = "#1#"
var loneHeaderVal = "#" + currentTopic + "#";

function reveal(id) {
	if (document.all) {
		if (document.all["topic" + id].style.display == "") {
			// Current topics is visible... turn invisible
			document.all["topic" + id].style.display = "none";
			currentTopic = 0;
		} else {
			// Current topic is invisible... turn visible... hide all other
			if (currentTopic != 0) {
				// Hide other visible topic
				loneHeaderVal = "#" + currentTopic + "#";
				if (lonePicks.indexOf(loneHeaderVal) == -1) {
					document.all["topic" + currentTopic].style.display = "none";
				} else {
					loneHeaderVal = "#0#";
					if (lonePicks.indexOf(loneHeaderVal) == -1) {
						document.all["topic" + currentTopic].style.display = "none";
					}
				}
			}
			document.all["topic" + id].style.display = "";
			currentTopic = id;
			loneHeaderVal = "#" + currentTopic + "#";
		}
	} else if (document.getElementById) {
		if (document.getElementById("topic" + id).style.display == "") {
			// Current topics is visible... turn invisible
			document.getElementById("topic" + id).style.display = "none";
			currentTopic = 0;
		} else {
			// Current topic is invisible... turn visible... hide all other
			if (currentTopic != 0) {
				// Hide other visible topic
				loneHeaderVal = "#" + currentTopic + "#";
				if (lonePicks.indexOf(loneHeaderVal) == -1) {
					document.getElementById("topic" + currentTopic).style.display = "none";
				} else {
					loneHeaderVal = "#0#";
					if (lonePicks.indexOf(loneHeaderVal) == -1) {
						document.getElementById("topic" + currentTopic).style.display = "none";
					}
				}
			}
			document.getElementById("topic" + id).style.display = "";
			currentTopic = id;
			loneHeaderVal = "#" + currentTopic + "#";
		}
	}
}
//-->
</script>
</head>

<body>

<!--Länk 1 -->

<table cellpadding="0" cellspacing="0">
<div id="link1">
<tr>
<td valign="center" height=20><A class="IE4Selectedclass" href="">
<td valign=center><A class="IE4Linkclass" href="javascript:reveal(1)">Länk 1</a></td>
</tr>
</div>
</table>

<div id="topic1" style="display: none" class="IE4divMargin">
<A class=IE4subtopicclass href="#">Länk 1.1</a><br>
<A class=IE4subtopicclass href="#">Länk 1.2</a><br>
<A class=IE4subtopicclass href="#">Länk 1.3</a><br>
<A class=IE4subtopicclass href="#">Länk 1.4</a><br>
<A class=IE4subtopicclass href="#">Länk 1.5</a><br>
<A class=IE4subtopicclass href="#">Länk 1.6</a><br>
</div>

<!-- Länk 2 -->

<table cellpadding="0" cellspacing="0">
<div id="link2">
<tr>
<td valign="center" height=20><A class="IE4Selectedclass" href="">
<td valign=center><A class="IE4Linkclass" href="javascript:reveal(2)">Länk 2</a></td>
</tr>
</div>
</table>

<div id="topic2" style="display: none" class="IE4divMargin">
<A class=IE4subtopicclass href="#">Länk 2.1</a><br>
<A class=IE4subtopicclass href="#">Länk 2.2</a><br>
<A class=IE4subtopicclass href="#">Länk 2.3</a><br>
<A class=IE4subtopicclass href="#">Länk 2.4</a><br>
<A class=IE4subtopicclass href="#">Länk 2.5</a><br>
<A class=IE4subtopicclass href="#">Länk 2.6</a><br>
</div>

</body>
</html>

------------------

/ J

JohnsenMedlem sedan juli 2000836 inlägg

16 maj 2001 11:43#4

Trevligt, man lär sig något nytt varje dag. Inget verkar funka i Opera dock.

nakozMedlem sedan dec. 1999653 inlägg

17 maj 2001 01:05#5

stina:
kan bara tipsa om en grej som gör din kod lite mer lättläst här på webforum...
spana in denna: http://cgi.webforum.nu/wf/ubbcode.html

mvh.

------------------
void[]
stash/$gu&-public(querystring)/n int{}bind "2" "say i own!" :)

StinaMedlem sedan jan. 200189 inlägg

17 maj 2001 11:32#6

Är hemskt tacksam för alla era svar.