Aufklapp-Menü IE klappts, Netscape nicht

[Gast LT_]

Hallo,

ich blende einpaar Zeilen via Javascript ein und aus. Das ganze ist mit

 

<div id="1" class="parent">

  irgend ein Text

</div>

<div id="2" class="child">

  weiterer Text

</div>

<div id="3" class="parent">

  Text

</div>

<div id="4" class="child">

  noch mehr text Text

</div>

und in JavaScript folgendem:

 


if(ns)

{

     document.write( "<style type='text/css'>" +

                            ".child { position:relative; visibility:hidden; }" +

                            ".parent { position:relative; visibility:show; }" +

                            "</style>");

}

else if(ie)

{

     document.write( "<style type='text/css'>" +

                            ".child { display:none; position:relative; }" +

                            ".parent { display:block; position:relative; }" +

                            "</style>");

}


// und dann weiter unten

if(ie)

{

  if(ein)

    document.all(iItem+1)].style.display = "block"

  else

    document.all[(iItem+1)].style.display = "none";

}

else if(ns)

{

  if(ein)

    document.getElementById(layername).style.visibility="hidden";

  else

    document.getElementById(layername).style.visibility="visible";

}

Also das auf- und zuklappen funktioniert bei beiden browsern(IE 6 und Netscape 7.1)

Das Problem ist die Positionierung der <div> bei Netscape.

Entweder werden alle <div> so positioniert, als wären diese eingeblendet(also Aufgeklappt, mit zwischenräumen)

oder sie werden zunächst Zugeklappt korrekt angezeigt, aber beim aufklappen werden dann die <div> übereinander angezeigt.

Was ich gerne hätte wäre:

zunächst alle Einträge Zugeklappt:

-Eintrag Parent1

-Eintrag Parent2

-Eintrag Parent3

und beim aufklappten soll folglich:

-Eintrag Parent1

-Eintrag Parent2

- Eintrag Child1

- Eintrag Child2

- Eintrag Child3

-Eintrag Parent3

Hoffe es ist einigermaßen verständlich

[kills]

dieser teil hier:

  if(ein)

    document.all(iItem+1)].style.display = "block"

  else

    document.all[(iItem+1)].style.display = "none";

muss auf jeden fall so lauten:

  if(ein)

    document.all(iItem+1)].style.display = ""

  else

    document.all[(iItem+1)].style.display = "none";

Ob das dein Prob behebt, kann ich dir mit deiner erläuterung aber nicht sagen

und warum verwendest du nicht bei allen Browsern "style.display"?

[Gast LT_]

leider ist damit das prob nicht gelöst.

Also das Problem ist die Positionierung der <div> beim Netscape 7.1

Ich Denke, dass das Problem bei folgendem Code liegt

     document.write( "<style type='text/css'>" +

                            ".child { position:relative; visibility:hidden; }" +

                            ".parent { position:relative; visibility:show; }" +

                            "</style>");

wenn bei beiden (child und parent) die position = relative ist,

wird es so angezeigt

-Eintrag Parent1

-Eintrag Parent2

-Eintrag Parent3

Beim aufklappen des Parent2, so:

-Eintrag Parent1

-Eintrag Parent2

- Eintrag Child1

- Eintrag Child2

- Eintrag Child3

-Eintrag Parent3

Wenn bei Child = Absolute und Parent = Relative, dann wird es so angezeigt:

-Eintrag Parent1

-Eintrag Parent2

-Eintrag Parent3

Beim aufklappen des Parent2 wird dann Parent3 von den Child-Einträgen überdeckt

Eigentlich sollte Child und Parent bei der Position = Relative korrekt sein.

Der IE zeigt es richtig an, der Netspace 7.1 nicht.

Ist das vielleicht ein bug?

[kills]

hast du die site online damit man da mal reinschauen kann?

[Gast LT_]

leider hab ich nicht die möglichkeit es online zu stellen.

Wenn jemand so nett ist es online zu stellen

hier der komplette source:

<script type="text/javascript" language="JavaScript">

<!-- Begin

	var ua = navigator.userAgent.toLowerCase()


   if(ua.indexOf("msie")>-1)

   {

   		ns = false;

   		ie = true;

   }

   else

   {

   		ns = true;

   		ie = false;

   }


  if(ns)

  {          

      document.write( "<style type='text/css'>" +

                          ".child { position:relative; visibility:hidden; }" +

                          ".parent { position:relative; visibility:show; }" +

                      "</style>");                        

  }

  else if(ie)

  {

      document.write( "<style type='text/css'>" +

                          ".child { display:none; position:relative; }" +

                          ".parent { display:show; position:relative; }" +

                      "</style>");

  }


  function Expand(item)

  {

      if(ns)

      {


        var layername = "item"+(item+1);


        if(document.getElementById(layername).style.visibility == "visible")

          document.getElementById(layername).style.visibility="hidden";

        else

          document.getElementById(layername).style.visibility="visible";

      }

      if(ie)

      {

        if(document.all["item"+(item+1)].style.display == "none" || document.all["item"+(item+1)].style.display == "")

          document.all["item"+(item+1)].style.display = "block";

        else if(document.all["item"+(item+1)].style.display == "block")

          document.all["item"+(item+1)].style.display = "none";

      }

  }

//  End -->

</script>


<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>

	<title></title>

</head>

<body text="#000000">


<div id="item0" class="parent">

<a href="javascript:Expand(0)">

-Eintrag Parent1</a>

</div>


<div id="item1" class="child">

- Eintrag Child1

</div>


<div id="item2" class="parent">

<a href="javascript:Expand(2)">

-Eintrag Parent2</a>

</div>


<div id="item3" class="child">

- Eintrag Child1<br>

- Eintrag Child2<br>

- Eintrag Child3

</div>


<div id="item4" class="parent">

<a href="javascript:Expand(4)">

-Eintrag Parent3</a>

</div>


<div id="item5" class="child">

- Eintrag Child1

</div>


</body>

</html>

[Manitu71]

so, hab`s hier mal online gestellt.

Habs mir auf allen zwei Browsern angeschaut. Ist wirklich weiter auseinander beim Netscape

[kills]

hi,

also ich hab mir das ganze mit dem IE6 und dem MozillaFireFox 0.9.3 angesehen und mit beiden sieht das alles recht gut aus. Wies im NS aussieht, kann ich jetzt von hier nicht sagen!

Aber auf jeden fall müsste die oben von mir Angesprochene Änderung eingepflegt werden, damit das auf/zuklappen richtig funktioniert!

die JS funktion lässt sich übrigens noch optimieren:

// let's find out what DOM functions we can use

var vbDOMtype = '';

if (document.getElementById)

{

	vbDOMtype = "std";

}

else if (document.all)

{

	vbDOMtype = "ie4";

}

else if (document.layers)

{

	vbDOMtype = "ns4";

}


// make an array to store cached locations of objects called by fetch_object

var vBobjects = new Array();


// function to emulate document.getElementById

function fetch_object(idname, forcefetch)

{

	if (forcefetch || typeof(vBobjects[idname]) == "undefined")

	{

		switch (vbDOMtype)

		{

			case "std":

			{

				vBobjects[idname] = document.getElementById(idname);

			}

			break;


			case "ie4":

			{

				vBobjects[idname] = document.all[idname];

			}

			break;


			case "ns4":

			{

				vBobjects[idname] = document.layers[idname];

			}

			break;

		}

	}

	return vBobjects[idname];

}


function Expand(item)

  {

     var layername = "item"+(item+1);

     oLayer = fetch_object( layername);

     // bei allen Browsern mit display arbeiten, nicht mit visibility!!

     oLayerDisplay = oLayer.style.display;


     oLayerDisplay = oLayerDisplay == "" ? "none" : "";

  }

übrigens, die 2 "Hilfs-Funktionen" hab ich von hier:

http://forum.fachinformatiker.de/clientscript/vbulletin_global.js

[Gast LT_]

// bei allen Browsern mit display arbeiten, nicht mit visibility!!

Leider kennt der Netscape display nicht, somit muss ich für Netscape visibility nehmen.

Ich hab den Code den du gepostet hast übernommen. Nur jetzt functioniert das auf- und zuklappen nicht mehr.

bin echt ratlos . (warum können sich nicht alle Browserhersteller auf einen Standart einigen )

[Gast LT_]

Mit Mozilla 1.7.2 wirds korrekt angezeigt. Wie es aussieht hat nur der Netscape ein Problem damit.

@Manitu71: mit welcher Version von Netscape hast du es getestet?

[kills]

laut selfhtml wird diese eingeschaft seit version 4 von NS u. IE unterstützt:

http://de.selfhtml.org/css/eigenschaften/positionierung.htm#display

[Gast LT_]

JUHU :OD es funktioniert jetzt.

Und zwar doch mit display.

ich hatte bei der Umstellung von visibility auf display vergessen den Wert zu ändern.

Aber jetzt gehts.

Vielen vielen Dank

[Enno]

Könntest du den funktionierenden Code mal posten.

suche grade für unsere DRK-Webseite son auf und zuklappendes Menü.

www.drk-ov-ulm.de

Ja ich weis, noch völlig unfertig. Und der Rechner steht noch daheim, an ner 1,5MB Arcor DSL-Leitung. Also bitte keinen DDOS drauf machen. Danke!

Also wenn ich den Code verwenden darf, wärs klasse.

Danke

Gruß

Enno

[Gast LT_]

<script type="text/javascript" language="JavaScript">

<!-- Begin


      document.write( "<style type='text/css'>" +

                          ".child { display:none; position:relative; }" +

                          ".parent { display:show; position:relative; }" +

                      "</style>");


  function Expand(item)

  {

        if(document.all["item"+(item+1)].style.display == "none" || document.all["item"+(item+1)].style.display == "")

          document.all["item"+(item+1)].style.display = "block";

        else if(document.all["item"+(item+1)].style.display == "block")

          document.all["item"+(item+1)].style.display = "none";


  }

//  End -->

</script>


<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>

	<title></title>

</head>

<body text="#000000">


<div id="item0" class="parent">

<a href="javascript:Expand(0)">

-Eintrag Parent1</a>

</div>


<div id="item1" class="child">

- Eintrag Child1

</div>


<div id="item2" class="parent">

<a href="javascript:Expand(2)">

-Eintrag Parent2</a>

</div>


<div id="item3" class="child">

- Eintrag Child1<br>

- Eintrag Child2<br>

- Eintrag Child3

</div>


<div id="item4" class="parent">

<a href="javascript:Expand(4)">

-Eintrag Parent3</a>

</div>


<div id="item5" class="child">

- Eintrag Child1

</div>


</body>

</html> 

so müsste es gehen

[kills]

schau mal dein ergebniss an, wenn du deine layer auf display: block setzt!!!

öffne die kästen ma ein paar mal und du wirst merken warum ich dir mehrfach geraten haben "block" durch "" zu ersetzen!

Im NS wird der Platz den das Element vorher verwendet hat nicht freigegeben und so verschiebt sich deine Menu dann ständig!!

[Enno]

@LT

bei dem Script klappt bei mir nix aus.

IE nicht, und Firefox 0.9.3 nicht.

???

[Manitu71]

Mit Mozilla 1.7.2 wirds korrekt angezeigt. Wie es aussieht hat nur der Netscape ein Problem damit.

@Manitu71: mit welcher Version von Netscape hast du es getestet?

Mit dem 7.1er denk ich wars

War auf jedenfall ne 7 davor

[Manitu71]

so, nochmal eine Aktualisierung von deinem letzten Skript gemacht und abgelegt. Also IE geht bei mir zum ausklappen im Gegensatz bei Enno.

Aber NS 7.1 zeigt nullkommanull Regung

[Enno]

Also:

daheim: WIN XP SP2

IE 6.1 (alle SPs) tut nicht - alles direkt untereinander

Mozilla 1.8 a2 tut nicht - alles direkt untereinander

Firefox 0.9.3 tut nicht - alles direkt untereinander

Firma: Win XP SP1

IE 6.0 (alle SPs) TUT - direkt untereinander - klappt auseinander und wieder zusammen.

Mozilla und Firefox wie daheim.

Gruß

Enno

[Gast LT_]

@kills

öffne die kästen ma ein paar mal und du wirst merken warum ich dir mehrfach geraten haben "block" durch "" zu ersetzen!

kann ich (leider) nicht nachvollziehen

wenn ich display="block" mit display="" ersetze, dann spielt netscape nicht mit.

@erno

könntest du das neue skript mit deinen browsern testen und das ergebnis posten?

hier das aktuellste skript: (funktioniert mit IE6.0, Netscape 7.1 und Mozilla 1.7.2)

<script type="text/javascript" language="JavaScript">

<!-- Begin

	var ua = navigator.userAgent.toLowerCase();


/*

  if(ua.indexOf("msie")>-1)

  {

    ns = false;

    ie = true;

  }

*/


  if(ua.indexOf("netscape")>-1)

  {

    ns = true;

    ie = false;

  }

  else

  {

    ns = false;

    ie = true;

  }

  var isDom = false;

  var isDomNN = false;

  var isDomIE = false;


  var isDOM = document.getElementById?true:false;

  var isDomNN = document.layers?true:false;

  var isDomIE = document.all?true:false;


  document.write( "<style type='text/css'>" +

                  ".child { display:none; position:relative; }" +

  	              ".parent { display:block; position:relative; }" +

                  "</style>");


  function Expand(item)

  {

    if (isDOM)

    {

     	if(document.getElementById("item"+(item+1)).style.display == "none" || document.getElementById("item"+(item+1)).style.display == "")

      {

        document.getElementById("item"+(item+1)).style.display = "block";

      }

      else

      {

        document.getElementById("item"+(item+1)).style.display = "none";

      }

    }

    else if (isDomIE)

    {

      if(document.all["item"+(item+1)].style.display == "visible")

      {

        document.all["item"+(item+1)].style.display = "hidden";

      }

      else

      {

        document.all["item"+(item+1)].style.display = "visible";

      }

    }

    else if (isDomNN)

    {

      if(document.layers["item"+(item+1)].visibility == "visible")

      {

        document.layers["item"+(item+1)].visibility="hidden";

      }

      else

      {

        document.layers["item"+(item+1)].visibility="visible";

      }


      document.layers["item"+(item+1)].visibility="hidden";

    }

  }

//  End -->

</script>


<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>

	<title></title>

</head>

<body text="#000000">


<div id="item0" class="parent">

<a href="javascript:Expand(0)">

-Eintrag Parent1</a>

</div>


<div id="item1" class="child">

- Eintrag Child1

</div>


<div id="item2" class="parent">

<a href="javascript:Expand(2)">

-Eintrag Parent2</a>

</div>


<div id="item3" class="child">

- Eintrag Child1<br>

- Eintrag Child2<br>

- Eintrag Child3

</div>


<div id="item4" class="parent">

<a href="javascript:Expand(4)">

-Eintrag Parent3</a>

</div>


<div id="item5" class="child">

- Eintrag Child1

</div>


</body>

</html>

[Enno]

@LT

also auf arbeit (WIN XP SP1)

IE klappt richtig

Firefox 0.9.3 klappt richtig

Mozilla 1.8 a2 klappt richtig

daheim kommt ca. 17.30 die antwort, wenn ich fertig bin mit arbeiten ;-)

Dort dann alles auf XP SP 2

Gruß

Enno

[Gast LT_]

thx,

gut zu wissen das es klappt (auf XP SP1).

eigentlich müsste es auch auf SP2 gehen,

aber ich warte lieber ab.

[Enno]

so dann daheim:

Win XP SP2

Firefox 0.9.3 klappt

Mozilla 1.8 a2 klappt

IE 6.0.2900.2096 klappt, nachdem man das Ausführen aktiver Inhalt zugelassen hat. Vorher wird das Menü vollständig ausgeklappt angezeigt.

Im übrigen auf allen aneren Browsern auch, die Java-Script disabled haben. Also das Menü, wird dort vollständigausgeklappt angezeigt.

Gruß

Enno

P.S. wie siehts aus, darf ich den code für unsere DRK-Seite verwenden? Ich würde es dort in ein php-script einbauen, das der code praktisch dynamisch erzeugt wird. Wäre klasse. Danke

[Gast LT_]

klar, deshalb hab ich nochmal vollstädig gepostet