XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   Javascript & Ajax (http://xhtmlforum.de/forumdisplay.php?f=83)
-   -   Layer auf- und zublenden im IE. (http://xhtmlforum.de/showthread.php?t=59881)

powl0r 18.01.2010 17:54

Layer auf- und zublenden im IE.
 
Hi,

und wieder hab ich nen Problem mit Javascript im IE. Im Firefox funktioniert das ganze...
Ich hab einen Layer mit einer height von 50px. Bei Klick in eine Checkbox vergrößere ich die height auf 350px und blende einen weiteren Layer innerhalb des Layers ein. Bei weiterem Klick in die Checkbox, verschwindet der eine Layer dann und der andere Layer geht wieder auf die 50px.

Hier mein CSS:

Code:

#kundendaten {
        background-color:#E4E9EE;
        border:1px solid #999999;
        bottom:506px;
        font-weight:bold;
        margin-right:10px;
        position:absolute;
        top:225px;
        width:532px;
        left:0px;
}


Code der Layer:

HTML-Code:

<div style="margin-top: 15px;">
<div id="kundendaten" style="height: 50px;">
<br />
<div align="left" style="padding-left:35px;">
<input id="kundendaten_checkbox" type="checkbox" onclick="javascript:kundendatenClicked();">&nbsp;<label for="kundendaten_checkbox">{kundendaten}: </label>
</div>
<br />
<div id="kundendaten_hide" style="visibility:hidden">
<table cellspacing="1" cellpadding="1" style="border: 1px solid rgb(153, 153, 153); background-color: rgb(228, 233, 238); margin-left: 35px;" class="middle_medium" align="left">
<!-- Kundeninfo -->
  <tr>
    <td colspan="4">

          <table cellspacing="1" cellpadding="1" class="middle_medium" style="border:0px none transparent; width:100%;">
            <tr style="background-color:#E4E9EE;">

          <th style="font-weight:bold; white-space:nowrap;">&nbsp;{t_user_portal_name}&nbsp;</th>
          <th style="font-weight:bold; white-space:nowrap;">&nbsp;{t_email}:&nbsp;</th>
          <th style="font-weight:bold; white-space:nowrap;">&nbsp;
                <select name="email_senden_funktion_vorlage" onChange="if (this.value != \'\') email_funktion_oeffnen(\'\', this.value, \'\', \'\'); else email_funktion_schliessen();"><option value="" style="font-weight:bold; color:#666666;">{t_kundendaten_email_box}</option></select>&nbsp;</th>
          <th style="font-weight:bold; white-space:nowrap;">&nbsp;{t_buyer_id}&nbsp;</th>

        </tr>
        <tr style="background-color:#FF5555;">

          <td style="font-weight:bold; white-space:nowrap;">&nbsp;<input type="text" name="edit_mitgliedsname"                  maxlength="80"  size="15"  value="Barzahlung" id="f_user_portal_name"> <img src="./images/lupe.png" border="0" alt="s" title="Suche nach Mitgliedsnamen" style="cursor:pointer;" onclick="var tmp = document.getElementById(\'f_user_portal_name\'); f_buyer_id_search(tmp.value, \'portal_name\');" />&nbsp;</td>
          <td colspan="2" style="font-weight:bold; white-space:nowrap;">&nbsp;<input type="text" name="edit_email" id="f_email"                          maxlength="80"  size="19"  value="Barzahlung" id="f_email" />&nbsp;</td>
          <td style="font-weight:bold; white-space:nowrap; text-align:center;">&nbsp;<input type="text" name="edit_kundennummer"                    maxlength="80"  size="13"  value="" id="f_buyer_id"> <img src="./images/lupe.png" border="0" alt="s" title="Suche nach Kundennummer" style="cursor:pointer;" onclick="var tmp = document.getElementById(\'f_buyer_id\'); f_buyer_id_search(tmp.value, \'id\');" />&nbsp;</td>
        </tr>
      </table>

      <div id="f_buyer_id_function_body" class="f_buyer_id_function_body_hidden"></div>

    </td>

  </tr>

<!-- Kunden-Adressen -->
  <tr style="background-color:#E4E9EE;">
    <th colspan="2" style="font-weight:bold; white-space:nowrap;">&nbsp;{t_bill_address}&nbsp;</th>
    <th colspan="2" style="font-weight:bold; white-space:nowrap;">&nbsp;{t_delivery_address}&nbsp;</th>

  </tr>
  <tr style="background-color:#E4E9EE;">
    <td colspan="4" title="" style="text-align:center;"><input type="hidden" name="adressen_aenderbar" value="1" /></td>

  </tr>
  <tr style="background-color:#FF5555;">
    <td style="white-space:nowrap;">&nbsp;{t_bill_name}&nbsp;</td>
    <td style="white-space:nowrap;"><input type="text" name="edit_rech_name" id="f_bill_name"      maxlength="80"  size="20" value=""> <img src="./images/lupe.png" border="0" alt="s" title="Suche nach Kundennamen" style="cursor:pointer;" onclick="var tmp = document.getElementById(\'f_bill_name\'); f_buyer_id_search(tmp.value, \'bill_name\');" /></td>
    <td style="white-space:nowrap;">&nbsp;{t_delivery_name}&nbsp;</td>

    <td style="white-space:nowrap;"><input type="text" name="edit_lief_name" id="f_delivery_name"                      maxlength="80"  size="20"  value=""> <img src="./images/lupe.png" border="0" alt="s" title="Suche nach Liefernamen" style="cursor:pointer;" onclick="var tmp = document.getElementById(\'f_delivery_name\'); f_buyer_id_search(tmp.value, \'delivery_name\');" /></td>
  </tr>

  <tr style="background-color:#FF5555;">
    <td style="white-space:nowrap;">&nbsp;{t_bill_name_2}&nbsp;</td>
    <td style="white-space:nowrap;"><input type="text" name="edit_rech_name_2" id="f_bill_name_2"  maxlength="80"  size="20"  value=""></td>
    <td style="white-space:nowrap;">&nbsp;{t_delivery_name_2}&nbsp;</td>
    <td style="white-space:nowrap;"><input type="text" name="edit_lief_name_2" id="f_delivery_name_2"                    maxlength="80"  size="20"  value=""></td>

  </tr>
  <tr style="background-color:#FF5555;">
    <td style="white-space:nowrap;">&nbsp;{t_bill_street}&nbsp;</td>

    <td style="white-space:nowrap;"><input type="text" name="edit_rech_strasse_1" id="f_bill_street_1"                  maxlength="80"  size="20"  value=""></td>
    <td style="white-space:nowrap;">&nbsp;{t_delivery_street}&nbsp;</td>
    <td style="white-space:nowrap;"><input type="text" name="edit_lief_strasse_1" id="f_delivery_street_1"                maxlength="80"  size="20"  value=""></td>
  </tr>
  <tr style="background-color:#FF5555;">
    <td style="white-space:nowrap;">&nbsp;{t_bill_street_2}&nbsp;</td>

    <td style="white-space:nowrap;"><input type="text" name="edit_rech_strasse_2" id="f_bill_street_2"                  maxlength="80"  size="20"  value=""></td>
    <td style="white-space:nowrap;">&nbsp;{t_delivery_street_2}&nbsp;</td>

    <td style="white-space:nowrap;"><input type="text" name="edit_lief_strasse_2" id="f_delivery_street_2"                maxlength="80"  size="20"  value=""></td>
  </tr>
  <tr style="background-color:#FF5555;">
    <td style="white-space:nowrap;">&nbsp;{t_bill_zip}&nbsp;</td>
    <td style="white-space:nowrap;"><input type="text" name="edit_rech_plz" id="f_bill_zip"                      maxlength="40"  size="20"  value=""></td>
    <td style="white-space:nowrap;">&nbsp;{t_delivery_zip}&nbsp;</td>

    <td style="white-space:nowrap;"><input type="text" name="edit_lief_plz" id="f_delivery_zip"                      maxlength="40"  size="20"  value=""></td>
  </tr>

  <tr style="background-color:#FF5555;">
    <td style="white-space:nowrap;">&nbsp;{t_bill_city}&nbsp;</td>
    <td style="white-space:nowrap;"><input type="text" name="edit_rech_ort" id="f_bill_city"                      maxlength="40"  size="20"  value=""></td>
    <td style="white-space:nowrap;">&nbsp;{t_delivery_city}&nbsp;</td>
    <td style="white-space:nowrap;"><input type="text" name="edit_lief_ort" id="f_delivery_city"                      maxlength="40"  size="20"  value=""></td>
  </tr>

  <tr style="background-color:#FF5555;">
    <td style="white-space:nowrap;">&nbsp;{t_bill_country}&nbsp;</td>

    <td style="white-space:nowrap;"><input type="text" name="edit_rech_land" id="f_bill_country"                      maxlength="40"  size="20"  value=""></td>
    <td style="white-space:nowrap;">&nbsp;{t_delivery_city}&nbsp;</td>
    <td style="white-space:nowrap;"><input type="text" name="edit_lief_land" id="f_delivery_country"                      maxlength="40"  size="20"  value=""></td>
  </tr>

  <tr>

        <td colspan="4" style="height:5px; background-color:#FF5555;"> </td>
  </tr>

  <tr style="background-color:#FF5555;">
    <td style="white-space:nowrap;">&nbsp;{t_telephone_1}&nbsp;</td>
    <td style="white-space:nowrap;"><input type="text" name="edit_telefon_1" id="f_telephone_1"                      maxlength="80"  size="20"  value="" /></td>
    <td style="white-space:nowrap;">&nbsp;{t_telephone_2}&nbsp;</td>
    <td style="white-space:nowrap;"><input type="text" name="edit_telefon_2" id="f_telephone_2"                      maxlength="80"  size="20"  value="" /></td>

  </tr>
  <tr style="background-color:#FF5555;">
    <td style="white-space:nowrap;">&nbsp;{t_telefax}&nbsp;</td>

    <td style="white-space:nowrap;"><input type="text" name="edit_telefax" id="f_telefax"                        maxlength="80"  size="20"  value="" /></td>
    <td style="white-space:nowrap;">&nbsp;{t_buyer_tax_id}&nbsp;</td>
    <td style="white-space:nowrap;"><input type="text" name="edit_kaeufer_ust_id" id="f_buyer_tax_id"                        maxlength="256"  size="20"  value="" id="f_buyer_tax_id" /></td>
  </tr>
</table>
</div>
</div>
</div>


Mein Javascript:


Code:

function kundendatenClicked(){
        if (document.getElementById("kundendaten_checkbox").checked == false){
                document.getElementById("kundendaten_hide").style.visibility = "hidden";
                document.getElementById("kundendaten").style.height = "50px";
        } else {
                document.getElementById("kundendaten_hide").style.visibility = "visible";
                document.getElementById("kundendaten").style.height = "350px";
        }
}


Im IE geht der Layer nicht auf 50px sondern ist von Anfang an groß. Beim klicken in die Checkbox wird der andere Layer dann auch eingeblendet und wieder ausgeblendet. Jedoch funktioniert dann auch nicht das "kleiner werden".

powl0r 20.01.2010 12:15

habs, durfte kein visibility nehmen sondern display im javascript


Alle Zeitangaben in WEZ +2. Es ist jetzt 17:34 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023