javascript funktioniert im IE nicht

garugc · 13.03.2009

Hallo,

ich hab ein kleines Skript in meine Homepage eingebaut, um ganz simpel Div-Container ein- und auszublenden.
Aber im IE funktioniert`s mal wieder nicht..

Hier mal ne abgespeckte Version des Skripts (css, iFrame,etc. fehlen):

HTML:

<head>
<style type="text/css">
<!--
#lyrik { position:absolute; top:140px; left:20px; display:none; }
#prosa { position:absolute; top:140px; left:20px; display:none; }
-->
</style>

<script language="JavaScript" type="text/javascript">
<!--
sdiv='home'; //Hier wird das ein- und ausblenden des Menues geregelt
function einblenden(div)
         {
         var obj=document.getElementById(div);
         var sobj=document.getElementById(sdiv);
         sobj.style.display="none";
         obj.style.display="block";
         sdiv=div;
}
//-->
</script>
</head>

<body>

<div id="lyrik">
<p>Such Dir`s aus:</p>
<br />
<a href="text1.html" target="fensterlein" title="text1">lyrik1</a>
<br />
<a href="text2.html" target="fensterlein" title="text2">lyrik2</a>
</div>

<div id="prosa">
<p>Such Dir`s aus:</p>
<br />
<a href="text1.html" target="fensterlein" title="text1">prosa1</a>
<br />
<a href="text2.html" target="fensterlein" title="text2">prosa2</a>
</div>


<table cellspacing="0" cellpadding="0" width="1017" height="619" align="center" style="background-color:#617282;">
  <tr>
    <td width="1017" height="124">
<a href="lyrik.html" onClick="einblenden('lyrik')" class="lyrikbutton" target="fensterlein" title="Lyrik"></a>
<a href="prosa.html" onClick="einblenden('prosa')" class="prosabutton" target="fensterlein" title="prosa"></a>
      </td>
        </tr>
</table>
</body>
</html>

Weiß jemand, warum das im IE nicht funzt?

gp812 · 13.03.2009

AW: javascript funktioniert im IE nicht

PHP:

sdiv='home'; //Hier wird das ein- und ausblenden des Menues geregelt

Div mit ID Home gib's nicht (für alle browser).
Diene Links sind ja leer: <a>HIER IST LEER</a>

garugc · 13.03.2009

Edit: Das "home" ist noch von meiner vorlage.. ich guck grad mal. moment

Die Links sind leer, weil sie per class eine Grafik zugewiesen bekommen. Die hab ich zur besseren Übersicht weg gelassen.

Im Firefox funzt es soweit.

wenn ich statt "home" den vorhandenen Div "lyrik" rein setze, klappts trotzdem nicht.

Was würdest Du denn rein schreiben?

gp812 · 13.03.2009

AW: javascript funktioniert im IE nicht

PHP:

<head>
<style type="text/css">
<!--
#lyrik { position:absolute; top:140px; left:20px; display:none; }
#prosa { position:absolute; top:140px; left:20px; display:block; }
-->
</style>

<script language="JavaScript" type="text/javascript">
<!--
sdiv='lyrik'; //Hier wird das ein- und ausblenden des Menues geregelt
function einblenden(div)
         {
         var obj=document.getElementById(div);
         var sobj=document.getElementById(sdiv);
         sobj.style.display="none";
         obj.style.display="block";
         sdiv=div;
}
//-->
</script>
</head>

<body>

<div id="lyrik">
<p>Such Dir`s aus:</p>
<br />
<a href="text1.html" target="fensterlein" title="text1">lyrik1</a>
<br />
<a href="text2.html" target="fensterlein" title="text2">lyrik2</a>
</div>

<div id="prosa">
<p>Such Dir`s aus:</p>
<br />
<a href="text1.html" target="fensterlein" title="text1">prosa1</a>
<br />
<a href="text2.html" target="fensterlein" title="text2">prosa2</a>
</div>


<table cellspacing="0" cellpadding="0" width="1017" height="619" align="center" style="background-color:#617282;">
  <tr>
    <td width="1017" height="124">
<a href="#" onClick="einblenden('lyrik')" class="lyrikbutton" title="Lyrik">q</a>
<a href="#" onClick="einblenden('prosa')" class="prosabutton"  title="prosa">w</a>
      </td>
        </tr>
</table>
</body>
</html>

Funktz wunderbar. In IE auch.
Ich hab 'home' durch 'lyrik' ersetzt
+ deine Links umgebastelt.
Denn wenn du mit Frames arbeitest, muss du auch feststellen, dass getElementById auch auf das richtige Frame zugreift.

garugc · 13.03.2009

ich gebs jetzt auf. Mein IE (7er und 6er) wollen`s nicht anzeigen. Habe aber alle Blocker etc. deaktiviert.

Du hast bei den divs eine auf "display:block" gesetzt.. dass das dann auch angezeigt wird, ist ja klar. Aber funzt bei dir das einklappen, wenn du den anderen Link anklickst?

anders herum:

Welche allgemeingültige Lösung gibt es denn für folgenden Vorgang:

verschiedene divs (mit einzelnen Links als Inhalt) sollen per Klick auf entsprechenden Button eingeblendet werden. Sobald man einen Div öffnet, wird der vorher geöffnete wieder geschlossen.

So simpel das auch klingen mag, aber ich konnte keine anständige Lösung finden.

Black6Death12 · 13.03.2009

AW: javascript funktioniert im IE nicht

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<!--Doctype verhindert das IE in Quirks-mode geht-->
<head>
<style type="text/css">
<!--
#lyrik { position:absolute; top:140px; left:20px; display:none; background: #fff; }
#prosa { position:absolute; top:140px; left:20px; display:block; background: #fff; }
-->
</style>

<script language="JavaScript" type="text/javascript">
<!--
var sdiv='prosa'; //Hier wird das ein- und ausblenden des Menues geregelt
function einblenden(div)
         {
         var obj=document.getElementById(div);
         var sobj=document.getElementById(sdiv);
         sobj.style.display="none";
         obj.style.display="block";
         sdiv=div;
}
//-->
</script>
</head>

<body>

<div id="lyrik">
<p>Such Dir`s aus:</p>
<br />
<a href="text1.html" target="fensterlein" title="text1">lyrik1</a>
<br />
<a href="text2.html" target="fensterlein" title="text2">lyrik2</a>
</div>

<div id="prosa">
<p>Such Dir`s aus:</p>
<br />
<a href="text1.html" target="fensterlein" title="text1">prosa1</a>
<br />
<a href="text2.html" target="fensterlein" title="text2">prosa2</a>
</div>


<table cellspacing="0" cellpadding="0" width="1017" height="619" align="center" style="background-color:#617282;">
  <tr>
    <td width="1017" height="124">
<a href="#" onClick="einblenden('lyrik')" class="lyrikbutton" title="Lyrik">q</a>
<a href="#" onClick="einblenden('prosa')" class="prosabutton"  title="prosa">w</a>
      </td>
        </tr>
</table>
</body>
</html>

So Funktioniert es bei mir. Hier eine allgemeinere lösung um divs "auszutauschen", dein ansatz war richtig hab ihn jetzt nur als Klasse gemacht so dass man auch mehrere von einander unabhängige tauscher einbauen kann.

div_tausch.js:

PHP:

function DivTausch(initDiv)
{
    this.aktDiv = initDiv;
}

DivTausch.prototype.tauscheDiv = function(neuesDiv)
{
    var aDiv = document.getElementById(this.aktDiv);
    var nDiv = document.getElementById(neuesDiv);
    aDiv.style.display = "none";
    nDiv.style.display = "block";
    this.aktDiv = neuesDiv;
};

test.html: Im Grunde dein design, nur mit ner javascriptklasse.

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <script type="text/javascript" src="div_tausch.js">
        </script>
        <title>Nur nen test</title>
        <style type="text/css">
        
        <!-- #lyrik {
            position: absolute;
            top: 140px;
            left: 20px;
            display: none;
            background: #fff;
        } #prosa {
            position: absolute;
            top: 140px;
            left: 20px;
            display: block;
            background: #fff;
        }
        -->
        </style>
        <script type="text/javascript">
        <!--
            var tausch1 = new DivTausch("prosa");//init des tauscher( die ID übergeben die am anfang sichtbar ist)
        //-->
        </script>
    </head>
    <body>
        <div id="lyrik">
            <p>Such Dir`s aus:</p>
            <br/>
            <a href="text1.html" target="fensterlein" title="text1">lyrik1</a>
            <br/>
            <a href="text2.html" target="fensterlein" title="text2">lyrik2</a>
        </div>
        <div id="prosa">
            <p>Such Dir`s aus:</p>
            <br/>
            <a href="text1.html" target="fensterlein" title="text1">prosa1</a>
            <br/>
            <a href="text2.html" target="fensterlein" title="text2">prosa2</a>
        </div>
        <table cellspacing="0" cellpadding="0" width="1017" height="619" align="center" style="background-color:#617282;">
            <tr>
                <td width="1017" height="124">
                    <a href="#" onClick="tausch1.tauscheDiv('lyrik')" class="lyrikbutton" title="Lyrik">q</a>
                    <a href="#" onClick="tausch1.tauscheDiv('prosa')" class="prosabutton" title="prosa">w</a>
                </td>
            </tr>
        </table>
    </body>
</html>

MFG

garugc · 13.03.2009

AW: javascript funktioniert im IE nicht

zunächst vielen Dank. Im Firefox funktionieren beide Methoden, im IE keine davon. Ich weiß nicht, warum mich dieser Browser so abgrundtief hasst, aber es beruht auf Gegenseitigkeit :mad:

Werde am Montag mal auf der Arbeit testen, ob es da läuft

Vielen Dank für die Unterstützung!

Christian · 19.03.2009

AW: javascript funktioniert im IE nicht

Das Problem ist nur allzulängs bekannt als Bug des IE, dass er mit der Funktion getElementById nichts anfangen kann.
Setze das hier mal an den Anfang deiner HTML Seite:

Code:

<script type="text/javascript">
if (/msie/i.test (navigator.userAgent)) //only override IE
{
	document.nativeGetElementById = document.getElementById;
	document.getElementById = function(id)
	{
		var elem = document.nativeGetElementById(id);
		if(elem)
		{
			//make sure that it is a valid match on id
			if(elem.id == id)
			{
				return elem;
			}
			else
			{
				//otherwise find the correct element
				for(var i=1;i<document.all[id].length;i++)
				{
					if(document.all[id][i].id == id)
					{
						return document.all[id][i];
					}
				}
			}
		}
		return null;
	};
}
</script>

ps: google ftw!

michas · 19.03.2009

AW: javascript funktioniert im IE nicht

Also ich habe noch nie gehört,dass IE nicht mit getElementById anfangen kann... ist mir neu.
Ich habe deinen HTML Anfangscode genommen, ein start tag <html> hinzugefügt und im Body ein <div id="home"></div>... danach funktionierte der code problemlos im IE6

HTML:

<html>
<head>
<style type="text/css">
<!--
#lyrik { position:absolute; top:140px; left:20px; display:none; }
#prosa { position:absolute; top:140px; left:20px; display:none; }
-->
</style>

<script language="JavaScript" type="text/javascript">
<!--
sdiv='home'; //Hier wird das ein- und ausblenden des Menues geregelt
function einblenden(div)
         {
         
         var obj=document.getElementById(div);
         var sobj=document.getElementById(sdiv);
         sobj.style.display="none";
         obj.style.display="block";
         sdiv=div;
}
//-->
</script>
</head>

<body>
<div id="home" ></div>
<div id="lyrik">
<p>Such Dir`s aus:</p>
<br />
<a href="text1.html" target="fensterlein" title="text1">lyrik1</a>
<br />
<a href="text2.html" target="fensterlein" title="text2">lyrik2</a>
</div>

<div id="prosa">
<p>Such Dir`s aus:</p>
<br />
<a href="text1.html" target="fensterlein" title="text1">prosa1</a>
<br />
<a href="text2.html" target="fensterlein" title="text2">prosa2</a>
</div>


<table cellspacing="0" cellpadding="0" width="1017" height="619" align="center" style="background-color:#617282;">
  <tr>
    <td width="1017" height="124">
<a href="lyrik.html" onClick="einblenden('lyrik')" class="lyrikbutton" target="fensterlein" title="Lyrik">frfr</a>
<a href="prosa.html" onClick="einblenden('prosa')" class="prosabutton" target="fensterlein" title="prosa">fsdfse</a>
      </td>
        </tr>
</table>
</body>
</html>

Gruß micha

Christian · 21.03.2009

AW: javascript funktioniert im IE nicht

Okay, "nichts anfangen" kann ist ein wenig schwammig umschrieben. Sagen wir's mal so:
Sie ist verbuggt. Und zwar aufs Übelste. Und DAS ist garantiert keine Neuheit.
Ich arbeite immer mit einer Workaroundfunktion, da das zB auch Opera betrifft. Und bei mir klappts tadellos.

garugc · 22.03.2009

AW: javascript funktioniert im IE nicht

Zunächst Danke für Eure Beiträge. Hatte die letzten Tage leider keine Zeit, das auszuprobieren. Werd heut Abend mal schauen und Feedback geben

garugc · 19.04.2009

AW: javascript funktioniert im IE nicht

also, nochmals vielen Dank für Euren Einsatz. Bin jetzt erst wieder dazu gekommen alles zu testen.

Auf der Arbeit im IE funktionierts soweit. Anscheinend ist mein IE aufm Laptop hinüber oder irgendein Security-Tool blockiert noch das javascript.