PDA

View Full Version : Javascriptmeny

Stina
2001-05-16, 11:34
Är det någon som vet hur man ska göra för att denna ska funka även i Netscape.

HTML kod:


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

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

function reveal(id)
{
if (ver4Verify)
{
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 + "#";
}
}
}
//-->
</script>

<script language="Javascript">
<!--
function ver4Verify() {
if (navigator.appVersion.indexOf("4.") != -1) {
return true;
}
else
{
return false;
}
}
//-->
</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>
Johnsen
2001-05-16, 11:54
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 -
------------------
Jojoxx
2001-05-16, 12:10
Nja... display ingår faktiskt i CSS-standarden (CSS Level 2 - display (http://www.w3.org/TR/REC-CSS2/visuren.html#propdef-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
Johnsen
2001-05-16, 12:43
Trevligt, man lär sig något nytt varje dag. Inget verkar funka i Opera dock.
nakoz
2001-05-17, 02:05
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!" :)
Stina
2001-05-17, 12:32
Är hemskt tacksam för alla era svar.