Mysal: css javascript auslagern ie Probleme

Schönen Guten Tag ich bin grad dabei Javascript zu lehrnen.
Ich wollte ein kleine Übung schreiben die auch Funktioniert aller dings kann ich weder css noch Javascript auslagern da sonst der Ie nicht mehr mit spielt hätte da vieleicht wer ne Idee wie ich das beheben kann?

<!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=utf-8" />  
<title>Untitled Document</title>  
<link rel="stylesheet" type="text/css" href="test/basic.css"/>  
<script type="text/javascript" src="test/breit.js"></script>  
<script type="text/javascript">  
  
var box = new Array();  
box[0] = 'wrap1';  
box[1] = 'wrap2';  
box[2] = 'wrap3';  
box[3] = 'wrap4';  
  
var intStep  = 5;   // Schrittweite, um die das DIV in seiner Grösse geändert wird  
var intDelay = 5;   // Verzögerung in Millisekunden  
var intMin   = 0; // Min. Breite des DIVs  
var intMax   = 1000; // Max. Breite des DIVs  
var guzti = 0 ;  
var objDiv = 0 ;  
  
function show(id)  
{  
	  
                for(i=0;i<box.length;i++)  
                {  
                        document.getElementById(box[i]).style.width="0px";  
						  
                }  
				if ( objDiv == 0 ) {  
	objDiv = document.getElementById(id);  
	  
					}  
	if ( guzti == 0)  {  
	guzti = document.getElementById(id).style.width;  
	setTimeout("styl()", intDelay)  
					}  
  
}  
  
function styl(id)  
  
{  
	  
	guzti = parseInt(guzti);  
					  
				if (guzti < intMax) {  
				guzti = guzti+ intStep;  
				objDiv.style.width = guzti+"px";  
				  
				if (guzti < intMax) {  
				setTimeout("styl()", intDelay)  
				}  
				else  
				{  
				objDiv = 0 ;  
				guzti = 0 ;  
				  
				}  
				  
				}  
				  
				  
}  
  
</script>  
</head>  
  
<body>  
  
<form>  
	<select>  
    	<option value="#"onclick="show('wrap1');">#Steckbrief####</option>  
        <option value="#"onclick="show('wrap2');">#Lebenslauf######</option>  
        <option value="#"onclick="show('wrap3');">#test######</option>  
        <option value="#"onclick="show('wrap4');">#ja######</option>  
    </select>  
</form>  
  
<div id="wrap1" style="display:block; width:0px; background-color:#09C; overflow:hidden;" >  
    inhaltkommthierrein  
</div>  
  
<div id="wrap2"  style="display:block; width:100px; background-color:#09C; overflow:hidden;" >  
    inhaltkommthierrein  
</div>  
  
<div id="wrap3"  style="display:block; width:0px; background-color:#09C; overflow:hidden;" >  
    inhaltkommthierrein  
</div>  
  
<div id="wrap4"  style="display:block; width:0px; background-color:#09C; overflow:hidden;" >  
    inhaltkommthierrein  
</div>  
</body>  
</html>  

  1. Liebe(r) Mysal,

    aller dings kann ich weder css noch Javascript auslagern

    vielleicht hilft Dir dieser Auszug (Eine CSS-Datei nachladen) aus meinem kleinen Lehrgang zum sinnvollen Schreiben eines JavaScripts?

    Das Auslagern von JS-Code steht in SELFHTML.

    Liebe Grüße,

    Felix Riesterer.

    --
    ie:% br:> fl:| va:) ls:[ fo:) rl:| n4:? de:> ss:| ch:? js:) mo:} zu:)
    1. Liebe(r) Mysal,

      aller dings kann ich weder css noch Javascript auslagern

      vielleicht hilft Dir dieser Auszug (Eine CSS-Datei nachladen) aus meinem kleinen Lehrgang zum sinnvollen Schreiben eines JavaScripts?

      Das Auslagern von JS-Code steht in SELFHTML.

      Liebe Grüße,

      Felix Riesterer.

      Vielen dank es hat sich rausgestellt das nicht das auslagern das Problem ist
      sondern das beim ie das:
      <a onclick="show('wrap1')" href="#wrap1"><h1>Steckbrief</h2></a>
      funktioniert das :~~~html <form>
      <select>
           <option value="#"onclick="show('wrap1');">#Steckbrief####</option>
               </select>
      </form>

      aber nicht kann mir wer sagen warum das so ist oder sehe ich den Wald vor lauter Bäume nicht?  
      
      
      1. مرحبا

        <a onclick="show('wrap1')" href="#wrap1"><h1>Steckbrief</h2></a>

        h1 bzw. h2 haben im a-Element nichts verloren, vorallem nicht so, wie du es hier tust.
        Was soll das werden, was hast du vor?

        <select>  
        
        > <option value="#"onclick="show('wrap1');">#Steckbrief####</option>  
        
        </select>
        

        http://de.selfhtml.org/javascript/sprache/eventhandler.htm#onchange

        mfg

        1. مرحبا

          <a onclick="show('wrap1')" href="#wrap1"><h1>Steckbrief</h2></a>

          h1 bzw. h2 haben im a-Element nichts verloren, vorallem nicht so, wie du es hier tust.
          Was soll das werden, was hast du vor?

          <select>

          <option value="#"onclick="show('wrap1');">#Steckbrief####</option>
          </select>

          
          >   
          > <http://de.selfhtml.org/javascript/sprache/eventhandler.htm#onchange>  
          >   
          > mfg  
            
            
          Schönen guten tag  
            
          Ja du hast recht h tags haben da nix zu suchen aber das löst leider mein Problemn nicht.  
            
          Es soll aus dem Dropdown Menue eine Auswahlgetätigt werden und daraufhin eine Div breiter werden (mit kleiner Schleife als Animation).  
            
          Das geht beim Firefox aber nicht im IE also mit der Auswahl aus dem Dropdown beim klick auf den Link gehts bei beiden.
          
          1. مرحبا

            http://de.selfhtml.org/javascript/sprache/eventhandler.htm#onchange

            Es soll aus dem Dropdown Menue eine Auswahlgetätigt werden und daraufhin eine Div breiter werden (mit kleiner Schleife als Animation).

            Daher der Link, dein Stichwort für Select-Boxen lautet onchange, nicht onclick.

            Wobei du es auch mit a-Elementen lösen könntest, sofern du noch am Design der Auswahlbox was ändern möchtest.
            Select-Boxen lassen sich ja praktisch nicht stylen, Links schon.

            Das geht beim Firefox aber nicht im IE also mit der Auswahl aus dem Dropdown beim klick auf den Link gehts bei beiden.

            onchange

            mfg

            1. مرحبا

              http://de.selfhtml.org/javascript/sprache/eventhandler.htm#onchange

              Es soll aus dem Dropdown Menue eine Auswahlgetätigt werden und daraufhin eine Div breiter werden (mit kleiner Schleife als Animation).

              Daher der Link, dein Stichwort für Select-Boxen lautet onchange, nicht onclick.

              Wobei du es auch mit a-Elementen lösen könntest, sofern du noch am Design der Auswahlbox was ändern möchtest.
              Select-Boxen lassen sich ja praktisch nicht stylen, Links schon.

              Das geht beim Firefox aber nicht im IE also mit der Auswahl aus dem Dropdown beim klick auf den Link gehts bei beiden.

              onchange

              mfg

              Vielen dank für die Infos habs jetzt mit onchange hinbekommen.

              Wenn du Zeit und Lust hast könnteste du noch etwas auf die Variante mit den a-Elemmenten eingehn ? meinst du einfach normale Links oder kann man die auch so stylen das sie wie ein Dropdown Menu aussehn ?

              1. مرحبا

                Wenn du Zeit und Lust hast könnteste du noch etwas auf die Variante mit den a-Elemmenten eingehn ? meinst du einfach normale Links oder kann man die auch so stylen das sie wie ein Dropdown Menu aussehn ?

                Das erste Beispiel auf dieser Seite z. B. würde mit wenigen Handgriffen aussehen wie eine Select-Box. Mit dem Unterschied, dass du es halt noch schöner gestalten kannst.

                Ein sehr schönes bsp. liefert Piwik mit dem Sprachwechsler in der rechten Leiste, oder dem Sprachwechsler auf der Demo-Seite.

                mfg

      2. Liebe(r) Mysal,

        es hat sich rausgestellt das nicht das auslagern das Problem ist

        völlig richtig. Das war nicht das Problem. Das echte Problem ist, dass Du entweder Deine Gedanken nicht sortieren kannst/willst, oder dass Du in der Notation sowohl der deutschen, als auch der HTM-Sprache in Deinem Posting nicht genügend Sorgfalt anwendest. Für mich ergibt dieser Rest Deines Postings absolut keinen (sprachlichen) Sinn:

        sondern das beim ie das:
        <a onclick="show('wrap1')" href="#wrap1"><h1>Steckbrief</h2></a>
        funktioniert das :~~~html

        <form>

        <select>
             <option value="#"onclick="show('wrap1');">#Steckbrief####</option>
                 </select>
        </form>

        
        > aber nicht kann mir wer sagen warum das so ist oder sehe ich den Wald vor lauter Bäume nicht?  
          
        Wenn ich nicht relativ schnell verstehe, was Du da willst, dann ver(sch)wende ich keine Zeit mehr, Dir kostenlos zu helfen. Willst Du andere zum Helfen bewegen, solltest Du Dir mehr Mühe beim Beschreiben Deines Problems geben ([Tipps für Fragende](/hilfe/charta.htm#tipps-fuer-fragende))!  
          
        Liebe Grüße,  
          
        Felix Riesterer.
        
        -- 
        ie:% br:> fl:| va:) ls:[ fo:) rl:| n4:? de:> ss:| ch:? js:) mo:} zu:)