Java Script Problem mit Firefox und Opera

chefprolet · 13.03.2008, 09:51

´Guten Morgen allerseits,

ich habe folgendes Problem mit einem Script.
In IE funkt es einwandfrei, in Firefox und Opera leider gar nicht.

Code:

<script type="text/javascript"> 
function sichtbarmachen(ebenenname) {
elements = document.getElementsByTagName("div");
for (x=0;x<elements.length;x++)
elements[x].className = "inactive";
document.getElementById(ebenenname).className = "active";
}
</script>

Link dazu: <a href="#" onclick="javascript:sichtbarmachen('ebene1')"> test</a>

dan sind einfach ein paar ebenen auf der seite die standardmässig ausgeblendet sind.

Code:

<div id="ebene1"><? include("kontakt.php") ?></div>
<div id="ebene2"><? include("anfahrt.php") ?></div>
<div id="ebene3"><? include("einkauf.php") ?></div>
<div id="ebene4"><? include("login.php") ?></div>
<div id="ebene5"><? include("impressum.php") ?></div>
<div id="unten1" ><? include("unten1.php") ?></div>

css dazu:
#ebene1   { background-color: #181818; text-align: left; visibility: invisible; padding: 13px; position: absolute; top: 25px; left: 805px; width: 250px; height: 417px; border: solid 1px #666666; overflow: hidden}
#ebene2   { background-color: #181818; text-align: left; visibility: invisible; padding: 13px; position: absolute; top: 25px; left: 805px; width: 250px; height: 417px; border: solid 1px #666666; overflow: hidden}
#ebene3   { background-color: #181818; text-align: left; visibility: invisible; padding: 13px; position: absolute; top: 25px; left: 805px; width: 250px; height: 417px; border: solid 1px #666666; overflow: hidden}
#ebene4   { background-color: #181818; text-align: left; visibility: invisible; padding: 13px; position: absolute; top: 25px; left: 805px; width: 250px; height: 417px; border: solid 1px #666666; overflow: hidden}
#ebene5   { background-color: #181818; text-align: left; visibility: invisible; padding: 13px; position: absolute; top: 25px; left: 805px; width: 250px; height: 417px; border: solid 1px #666666; overflow: hidden}

Klicket man den Link an, da werden alle Ebenen, oder die im Moment sichtbare Ebene ausgeblendet und die im Link stehende Ebene eingeblendet. Ich komm net dahinter, warum es im FF und OP net geht.

Bitte um eure Hilfe!!

Dank und Gruss
Sven

webcreate · 13.03.2008, 10:32

Dokus lernen, Dokus lernen!!!
Da ist weit mehr als ein Fehler drin.

HTML-Code:

<script type="text/javascript"> 
function sichtbarmachen(ebenenname) 
{
    elements = document.getElementsByTagName("div");
    for (x=0;x<elements.length;x++)
    {
        if(elements[x]['id'] != ebenenname)
        {
            document.getElementById(elements[x]['id']).style.visibility = 'hidden';
        }
        else
        {
            document.getElementById(elements[x]['id']).style.visibility = 'visible';
        }
    }
}
</script>
<style type="text/css">
#ebene1   { background-color: #181818; text-align: left; visibility: hidden; padding: 13px; position: absolute; top: 25px; left: 805px; width: 250px; height: 417px; border: solid 1px #666666; overflow: hidden}
#ebene2   { background-color: #181818; text-align: left; visibility: hidden; padding: 13px; position: absolute; top: 25px; left: 805px; width: 250px; height: 417px; border: solid 1px #666666; overflow: hidden}
#ebene3   { background-color: #181818; text-align: left; visibility: hidden; padding: 13px; position: absolute; top: 25px; left: 805px; width: 250px; height: 417px; border: solid 1px #666666; overflow: hidden}
#ebene4   { background-color: #181818; text-align: left; visibility: hidden; padding: 13px; position: absolute; top: 25px; left: 805px; width: 250px; height: 417px; border: solid 1px #666666; overflow: hidden}
#ebene5   { background-color: #181818; text-align: left; visibility: hidden; padding: 13px; position: absolute; top: 25px; left: 805px; width: 250px; height: 417px; border: solid 1px #666666; overflow: hidden}
</style>
</head>

<body>
<a href="#" onclick="javascript:sichtbarmachen('ebene1')"> test</a>
<div id="ebene1"><? include("kontakt.php") ?></div>
<div id="ebene2"><? include("anfahrt.php") ?></div>
<div id="ebene3"><? include("einkauf.php") ?></div>
<div id="ebene4"><? include("login.php") ?></div>
<div id="ebene5"><? include("impressum.php") ?></div>
</body>

chefprolet · 13.03.2008, 10:36

Das dachte ich mir schon fast. Nur wo?
Ich hatte vergessen die Klassen aus der CSS-Datei mit zu posten.
Die hast es ja jetzt viel einfacher gemacht. Leuchtet mir ein.
Werds gleich mal testen.
Und obs invisible oder hidden heiss, da hab ich gerade danach gegooglet.

Danke.
Sven

webcreate · 13.03.2008, 10:38

Vergleich den Code

chefprolet · 13.03.2008, 11:12

´Tja, leider blendet es jetzt nur die Ebenen aus, aber nicht ein.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
		<link href="css/main.css" type="text/css" rel="stylesheet">
		
<script type="text/javascript"> 
function sichtbarmachen(ebenenname) 
{
    elements = document.getElementsByTagName("div");
    for (x=0;x<elements.length;x++)
    {
        if(elements[x]['id'] != ebenenname)
        {
            document.getElementById(elements[x]['id']).style.visibility = 'hidden';
        }
        else
        {
            document.getElementById(elements[x]['id']).style.visibility = 'visible';
        }
    }
}
</script>

<style type="text/css">
.main { position: absolute; top: 25px; left: 25px; width: 766px; height: 733px; border: 1px solid #666666;}
#ebene6   { background-color: transparent; text-align: center; visibility: visible; padding: 0px; position: absolute; top: 25px; left: 830px; width: 100px; height: 100px; border: none;}
#ebene1   { background-color: #181818; text-align: left; visibility: hidden; padding: 13px; position: absolute; top: 25px; left: 805px; width: 250px; height: 417px; border: solid 1px #666666; overflow: hidden}
#ebene2   { background-color: #181818; text-align: left; visibility: hidden; padding: 13px; position: absolute; top: 25px; left: 805px; width: 250px; height: 417px; border: solid 1px #666666; overflow: hidden}
#ebene3   { background-color: #181818; text-align: left; visibility: hidden; padding: 13px; position: absolute; top: 25px; left: 805px; width: 250px; height: 417px; border: solid 1px #666666; overflow: hidden}
#ebene4   { background-color: #181818; text-align: left; visibility: hidden; padding: 13px; position: absolute; top: 25px; left: 805px; width: 250px; height: 417px; border: solid 1px #666666; overflow: hidden}
#ebene5   { background-color: #181818; text-align: left; visibility: hidden; padding: 13px; position: absolute; top: 25px; left: 805px; width: 250px; height: 417px; border: solid 1px #666666; overflow: hidden}
</style>

	</head>

	<body background="pixel/back.jpg" leftmargin="0" marginheight="0" marginwidth="0" topmargin="0" onload="javascript:sichtbarmachen('ebene6')">
	<div id="ebene6">HALLO HALLO</div>
		<div class="main"><a href="#" onclick="javascript:sichtbarmachen('ebene1')"> 1 sichtbar machen</a><a href="#" onclick="javascript:sichtbarmachen('ebene2')"> 2 sichtbar machen</a></div>
		<div id="ebene1">ebene 1</div>
		<div id="ebene2">ebene 2</div>
		<div id="ebene3">ebene 3</div>
		<div id="ebene4">ebene 4</div>
		<div id="ebene5">ebene 5</div>
	</body>

</html>

webcreate · 13.03.2008, 11:19

Auch recht logisch, da es zu einem Scriptfehler kommt, wenn man alle Divs in das Array legt und man dabei dann div verwendet, die keine ID haben.
Also schränkt man das Script so ein, dass nur die divs angesprochen werden, deren id mit 'ebene' beginnt.

Code:

<script type="text/javascript"> 
function sichtbarmachen(ebenenname) 
{
    elements = document.getElementsByTagName("div");
    for (x=0;x<elements.length;x++)
    {
        if(elements[x]['id'] != ebenenname && elements[x]['id'].substr(0, 5) == 'ebene')
        {
            document.getElementById(elements[x]['id']).style.visibility = 'hidden';
        }
        else if(elements[x]['id'].substr(0, 5) == 'ebene')
        {
            document.getElementById(elements[x]['id']).style.visibility = 'visible';
        }
    }
}
</script>

chefprolet · 13.03.2008, 11:23

Zitat:

Zitat von webcreate

Auch recht logisch, da es zu einem Scriptfehler kommt, wenn man alle Divs in das Array legt und man dabei dann div verwendet, die keine ID haben.
Also schränkt man das Script so ein, dass nur die divs angesprochen werden, deren id mit 'ebene' beginnt.

Code:

<script type="text/javascript"> 
function sichtbarmachen(ebenenname) 
{
    elements = document.getElementsByTagName("div");
    for (x=0;x<elements.length;x++)
    {
        if(elements[x]['id'] != ebenenname && elements[x]['id'].substr(0, 5) == 'ebene')
        {
            document.getElementById(elements[x]['id']).style.visibility = 'hidden';
        }
        else if(elements[x]['id'].substr(0, 5) == 'ebene')
        {
            document.getElementById(elements[x]['id']).style.visibility = 'visible';
        }
    }
}
</script>

Fantastisch......und wieder hab ich was gelernt.....danke sehr für die prompte und gute Hilfe.