• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Ein und ausblenden eines Divs

Status
Für weitere Antworten geschlossen.
S

seblon

Mitglied
Hallo ich hab das Problem, dass das automatische Ein- und Ausblenden eines Divs nicht geht.

In der Fehlerconsole steht:
Fehler: preis is not a function
Quelldatei: xxx/xxx/xx.php?id=3/event/OmXyqpiS0uMkqxKVpGgWIQ%3D%3D
Zeile: 2
Zum Vergrößern anklicken....
Die Funktion im Head:
HTML: 
...
<script type='text/javascript'>
    function preis ()
      {
        if (document.getElementById ('preis').style.visibility == 'collapse')
        {
          document.getElementById ('preis').style.visibility = 'visible';
           
        }
        else
        {
           document.getElementById ('preis').style.visibility = 'collapse';
      
        }
      }
  </script>
...
Der Aufruf der Funktion im Body:
HTML: 
...
<input type='checkbox' name='produkt' value='1' onclick='preis();' checked='checked'> 
Produkte<br>
<div id='preis' style='visibility:visible;'>Preis:<br>
...
</div>
...
Ich hoffe jemand erkennt das Problem weil Firebug auch keine Vernünftige Fehlermeldung oder irgendwas aufschlussreiches liefert ausser das was in der Fehlerkonsole bei Firefox steht.
 
Werbung:
visibility: Unsichtbare Elemente: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets
collapse Bestimmt, dass Tabellenspalten, -spaltengruppen, -zeilen und -zeilengruppen, also tr, td, col, colgroup und Elemente mit dem entsprechenden Wert für display:table-..., von der Anzeige entfernt werden, sodass der Platz anderen Elementen zur Verfügung steht. Angewendet auf andere Elemente, hat collapse die gleichen Auswirkungen wie hidden.
Zum Vergrößern anklicken....
:wink:
Aber hast recht eigentlich sollte ich dort hidden verwenden. Löst allerdings mein Problem nicht.
 
Werbung:
Also ich hab das Javascript mal so übernommen und collapse durch hidden ausgetauscht, funktioniert im IE7 sowie im FF3 ohne Fehler. Hast du mal nen Link zur Seite wo der Fehler auftritt?
 
Die Linkadresse kann ich leider nicht öffentlich posten, da dies eine Kundenseite ist. Ich kann dir allerdings mal im PM die Linkadresse mitteilen oder alternativ den kompletten Quellcode posten.
 
Werbung:
Wenn diese Fhelermeldung kommt, die Funktion aber da ist, dann ist irgendwo in der Funktion ein Fehler. Sobald JavaScript beim Abarbeiten von oben nach unten auf einen Fehler stößt, bricht es ab, und wenn die Funktion dann noch nicht vollständig verarbeitet wurde, dann glt sie als nicht existent.

Solange es nicht geht, ist also ein Fehler in der Funktion.
 
Code: 
function preis () {
    var div = document.getElementById("preis");
    div.className = (div.className == "hidden") ? "" : "hidden";
}
Code: 
.hidden {
    display: none;
}
 
Funktioniert trotzdem nicht :( Bin echt am verzweifeln. Hier jetzt der gesamte Quelltext:
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  <html>
  <head>
    <meta name="robots" content="noindex, nofollow">
    <title>Produkte, Jobs und Flyerübersicht - sponsored by xxx</title>
  <style type='text/css'>
  body
    {
    background-color: #E7E7E7;
    color: #284075; 
    font-size: 11px; 
    font-family: Verdana, Arial, Helvetica, sans-serif;
    margin-top: 25;
    margin-left: 0;
    }

  a:link
    { 
    color: #FF6600;
    text-decoration: none;
    }

  a:visited
    { 
    color: #FF6600;
    text-decoration: none;
    }
    
  a:hover
    { 
    color: #FF6600;
    text-decoration: underline;
    }
    
  a:active
    { 
    color: #FF6600;
    text-decoration: none;
    }
    
  td
    {
    color: #284075; 
    font-size: 11px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    }
  .TableHiGrdHell
    {
    background-color: #F2F2F2;
    color: #284075;
    }
  .headline
    {
    color: #ea6616;
    font-weight: bold;
    font-size: 14px;
    line-height: 17px;
    font-family: Verdana, Arial, Helvetica, Geneva, Swiss
    }
    .hidden {
    display: none;
  }
  </style>
  <script type="text/javascript">
  <!--
    function preis () {
    var div = document.getElementById("preis");
    div.className = (div.className == "hidden") ? "" : "hidden";
    }
  //-->
  </script>
</head>
Code: 
<body>  <TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0 WIDTH=525>
    <TR>
      <TD>
        <SPAN CLASS=headline>Job&uuml;bersicht</SPAN>
      </TD>
      <TD ALIGN=RIGHT>
        <a href=javascript:self.print()><img src='drucken.gif' width='16' alt='Drucken' border='0'></a>
      </TD>
    </TR>
    <TR>
      <TD COLSPAN=2>
        &nbsp;
      </TD>
    </TR>
  </TABLE>
  <TABLE BORDER=0 CELLSPACING=0 CELLPADDING=1 CLASS=TableHiGrdHell>
    <TR>
      <TD CLASS=TableHiGrdHell width=100>
        &nbsp;<B>Kategorien</B>
      </TD>
    </TR>
   </TABLE>
   <TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0>
    <TR>
      <TD VALIGN=top width=100>
        <A HREF='xxx?id=3&amp;kat=Produkt' target='_self'>Produkte</A><br>
        <A HREF='xxx?id=3&amp;kat=Job' target='_self'>Jobs</A><br>
        <A HREF='xxx?id=3&amp;kat=Flyer' target='_self'>Anhänge/Flyer</A><br>
        <br>
        <form action='xxx?id=3' method='POST'>
         <input type='text' name='suche' size='10'><br>
         <input type='submit' value='Suchen'>
        </form>
        <br>
        <u>Sortierung:</u><br>
        <form action='xxx?id=3' method='POST' name='formular'>
         <input type='hidden' name='id' value='3'>
         <input type='hidden' name='kat' value='Job'>
         <select name='sort'>
          <option value='newest' selected=selected>Neueste zuerst</option>
          <option value='oldest'>&Auml;lteste zuerst</option>
          <option value='billig'>Preis aufsteigend</option>
          <option value='teuer'>Preis absteigend</option>
          <option value='abc'>Alphabetisch</option>
        </select>
        <br><b>Anzeigen:</b>
        <br>
        <input type='checkbox' name='produkt' value='1' onclick='preis();' checked=checked> Produkte
        <br>
        <div id='preis'>&bull;Preis:
          <br>
          <select name=preis>
            <option value=0>egal</option>
            <option value=5>bis 5&euro;</option>
            <option value=10>bis 10&euro;</option>
            <option value=20>bis 20&euro;</option>
            <option value=50>bis 50&euro;</option>
            <option value=100>bis 100&euro;</option>
          </select>
          <br>
        </div>
              <input type='checkbox' name='job' value='1' checked=checked> Jobs<br>
              <input type='checkbox' name='flyer' value='1' checked=checked> Flyer<br>
              <input type='hidden' name='show' value='1'>
              <br><input type='submit' value='Sortieren'><br>
            </form>
          </td>
          <TD ALIGN=right VALIGN=top>
          <table>
            <tr>
              <td>
                CONTENT
              </td>
            </tr>
          </table>
        </TD>
      </TR>
    </TABLE>
  </body>
</html>
 
Zuletzt bearbeitet:
Werbung:
Werbung:
haben den fehler gefunden. es lag ganz einfach daran, das der anme der auswahlbox preis hieß und die function auch.

habe die function umgenannt in changepreis und siehe da: es geht.

Vielen Dank an alle die mir geholfen haben!
 
Ich poste meine Frage mal in diesen Thread, weil ich nicht für ein ähnliches Thema einen neuen öffnen will :)

Ich habe vollgendes, für vermutlich simples Problem. Ich wollte auch ein Div erstellen was bei druck auf einen Button/Link öffnet und schließt. Allerdings möchte ich 3 Container nebeneinander machen und jedesmal wenn jemand bsp Container 1 offen hat, soll er an einer Stelle als Infobox erscheinen. Nun soll aber wenn er Infobox 2 öffnet die 1. geschlossen werden, da die Infos an der gleichen Stelle stehen sollen.

Mein Code:
HTML: 
<script type="text/javascript">
        <!--
        //<! [CDATA[
function klapp($iContId)
            {
                $oElement= document.getElementById('infos_'+$iContId);
                $oPlusminus= document.getElementById('plusminus_'+$iContId);
                if($oElement.style.display== 'block')
                {
                    $oElement.style.display= 'none'; //wenn aufgeklappt
                    $oPlusminus.firstChild.nodeValue= 'Informationen anzeigen';
                }
                else
                {
                    $oElement.style.display= 'block'; //wenn zugeklappt
                    $oPlusminus.firstChild.nodeValue= 'Informationen schliessen';
                }
            }
        //]]>
        -->
            </script>
Der Aufruf in der HTML ist folgender:
HTML: 
<div class="geschlossen" style="position: absolute; top:550px; left: 0px; width: 310px;">
                <img src="../bilder/jataka_ersatzflyer.jpg"  style="height: 100px;" title="" alt="" />
                <br />
                <div class="anzeigen" onclick="klapp(1);" id="plusminus_1">
                Informationen anzeigen
                </div>
            </div>
            
            <div class="infotext" id="infos_1">    
                    <table class="abstand2" style="position: absolute; top:700px; left: 75px;" border="2" cellpadding="0" cellspacing="0">
                     <tr>
                        <th>Event</th>
                        <td>JATAKA (indoor)</td>
                    </tr>
                    <tr>
                        <th>Ort</th>
                        <td>offen</td>
                    </tr>
                    <tr>
                        <th>Datum</th>
                        <td>13.März 2009</td>
                    </tr>
                    <tr>
                        <th>Uhrzeit</th>
                        <td>22:00 Uhr</td>
                    </tr>
                    </table>
            </div>
            <div class="geschlossen" style="position: absolute; top:550px; left: 250px; width: 310px;">
                <img src="../bilder/huitaka_ersatzflyer.jpg" style="height: 100px;" title="" alt="" />
                <br />
                <div class="anzeigen" onclick="klapp(2);" id="plusminus_2">
                Informationen anzeigen
                </div>
            </div>
            <div class="infotext" id="infos_2">    
                    <table class="abstand2" style="position: absolute; top:700px; left: 309px;" border="2" cellpadding="0" cellspacing="0">
                     <tr>
                        <th>Event</th>
                        <td>HUITAKA<br /> OA 3rd</td>
                    </tr>
                    <tr>
                        <th>Ort</th>
                        <td>offen</td>
                    </tr>
                    <tr>
                        <th>Datum</th>
                        <td>22.August 2009</td>
                    </tr>
                    <tr>
                        <th>Uhrzeit</th>
                        <td>22:00 Uhr</td>
                    </tr>
                    </table>
            </div>
Bitte nicht an den CSS Einstellungen stören. Die habe ich erstmal damit irgendwas funzt so genommen.

Der Link zur Seite wenn jemand Optisch sehen will was ich meine ist:

Huitaka Events

Vielleicht hat ja jemand einen Tip. Im Kopf weiß ich mal wieder, wie immer, wie es funktionieren müsste. Leider reicht das Wissen an Möglichkeiten dazu nicht aus.

Liebe Grüße

Quaacks ^^
 
Werbung:
Könnte daran liegen, dass das Stellen eines anderen Problems in einem fremden Thread gerne als Grabschändung gesehen wird :-)
 
Dann tut es mir leid :?

Ich wollte nur nicht einen neuen Thread aufmachen um die Antwort zu sparen das hier ein Thread mich fast gleichem Problem ist und ich mich hier auslassen soll.

Ich werde aber aber dann in einem neuen Thread mein Glück versuchen :)

Mfg Quaacks ^^
 
Werbung:
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben