Kirjautuminen

Haku

Tehtävät

Keskustelu: Nettisivujen teko: JS - document.getElementById, IE6 ja IE7 selain ongelma

bellyx [03.11.2009 01:19:37]

#

Moro

Ongelmana on div alueen piilottaminen niin että kaikki kentän sisällä olevat elementit kuten painikkeet, tekstikentät jne siirtyvät piiloon loogisesti. Tällähetkellä tekstikentät ja painikkeet eivät haidaannu vaan ne siirtyvät muiden elementtien päälle. Koodi toimii hyvin FF:llä ja ie8:lla mutta ei ie6 tai ie7:lla. Luin jostain että tämä olisi tiedossa ole bugi mutta ratkasua en sivuilta löytänyt.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>xxxx</title>

<style type="text/css">
#container {
width: 650px;
margin: -12px;
text-align: right;
background: #ffffff;
border: 0px #000000 solid;
}
div.inpane, div.outpane {
background: #ffffff;
border: 1px #003399 solid;
padding: 15px;
margin: 1px;
font: normal 11px verdana;
}
div.inpanex, div.outpane {
background: #ffffff;
border: 0px #003399 solid;
padding: 0px;
margin: 0px;
font: normal 11px verdana;
}
div.inpane {
position: relative;
display: block;
}
div.outpane {
position: relative;
display: none;
}
select {
width: 120px;
}
input.rad, input.box {
position: relative;
top: 3px;
}
div.outpane1 {background: #ffffff;
border: 1px #003399 solid;
padding: 15px;
margin: 1px;
font: normal 11px verdana;
}
</style>


<script type="text/javascript">

function showhide(){
var divn1 = document.getElementById("div1");

if (divn1.style.display == "none") {
divn1.style.display = "block";
}
else {
divn1.style.display = "none";

}
}

function showhide2(){
var divn2 = document.getElementById("div5");
if (divn2.style.display == "none") {
divn2.style.display = "block";
}
else {
divn2.style.display = "none";
}
}

function showhide3(){
var divnx3 = document.getElementById("div8");
if (divnx3.style.display == "none") {
divnx3.style.display = "block";
}
else {
divnx3.style.display = "none";
}
}


function showhide6(){
var divnx2 = document.getElementById("div12");
if (divnx2.style.display == "none") {
divnx2.style.display = "block";
}
else {
divnx2.style.display = "none";
}
}

function showhide5(){
var divnx1 = document.getElementById("div10");
if (divnx1.style.display == "none") {
divnx1.style.display = "block";
}
else {
divnx1.style.display = "none";
}
}

function showhide21(){
var divn2 = document.getElementById("x5");
var dd = 3;

if (divn2.style.display == "none") {
divn2.style.display = "block";
}
else {
divn2.style.display = "none";
}
}

function showhide29(){
var divv22 = document.getElementById("x1");
var dd = 3;

if (divv22.style.display == "none") {
divv22.style.display = "block";
}
else {
divv22.style.display = "none";
}
}


function showMe (it, box) {
  var vis = (box.checked) ? "block" : "none";
  document.getElementById(it).style.display = vis;
}


</script>
</head>
<body>

<body onload="myButton_onclickhide();showhide21();">

<form name="Riskilaskin" class="inpane" >
  <div id="div7" class="inpane">Test test test:
    <input name="c3" type="checkbox" class="rad" onclick="showMe('div8', this)" checked="checked" />
    Kyllä / Ei<br />
  </div>
  <div id="div8" class="inpane" >
    <p>
      <input class="rad" id="Numberax21" onkeypress="return checkIt(event)" type="text" style="width:40px; text-align:right"/>
      Test test test<br />
      <br />
    </p>
    <table width="306" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <th height="58" scope="col"><div align="left">Test </div></th>
        <th scope="col"><div align="left">Test test test</div></th>
        <th scope="col"><div align="left"><strong>
            <input class="rad" type="text" style="width:40px; text-align:right" id="numberx22" readonly="readonly" size="10" />
        </strong><br />
        </div></th>
      </tr>
      <tr>
        <th height="10" scope="col"><img src="TESTI.GIF" alt="dfd" width="62" height="2" /></th>
        <th scope="col"><img src="TESTI.GIF" alt="4343" width="205" height="1" /></th>
        <th scope="col"><img src="TESTI.GIF" alt="434" width="77" height="1" /></th>
      </tr>
    </table>
    <p>
      <input class="rad" type='button' name='myButton1' value='Laske' onclick="myButton_onclickx20()" id="myButton1" />
      <INPUT class="rad" TYPE='button' NAME='myButton' VALUE='Tyhjennä kentät' onclick="myButton_onclickx46()">
      <br />
    </p>
  </div>
  <div id="div2" class="inpane">Test test test
	<input name="c1" type="checkbox" class="rad" onclick="showMe('div1', this)" checked="checked">
    Kyllä / Ei
  </div>

<div id="div1" class="inpane" >
  <input class="rad" id="Numberax10" onKeyPress="return checkIt(event)" type="text" style="width:40px; text-align:right"/>
Test<br />
        <input class="rad" id="Numberax12" onKeyPress="return checkIt(event)" type="text" style="width:40px; text-align:right"/>
Test<br />
		<input class="rad" id="Numberax14" onKeyPress="return checkIt(event)" type="text" style="width:40px; text-align:right"/>
Test<br />
        <input class="rad" id="Numberax11" onkeypress="return checkIt(event)" type="text" style="width:40px; text-align:right"/>
Test<br />
         <input class="rad" id="Numberax13" onkeypress="return checkIt(event)" type="text" style="width:40px; text-align:right"/>
Test<br />
        <br />
        <table width="306" border="0" cellpadding="0" cellspacing="0">
          <tr>
            <th height="58" scope="col"><div align="left">Test</div></th>
            <th scope="col"><div align="left">Test test test</div></th>
            <th scope="col"><div align="left">
                <input class="rad" type="text" style="width:40px; text-align:right" id="numberx15" readonly="readonly" size="10" />
                <br />
            </div></th>
          </tr>
          <tr>
            <th width="44" height="58" scope="col"><div align="left">Test</div></th>
            <th width="202" scope="col"><div align="left">Test test test</div></th>
            <th width="89" scope="col"><div align="left">
              <input class="rad" type="text" style="width:40px; text-align:right" id="numberx16" readonly size="10" />
            </div></th>
          </tr>
          <tr>
            <th height="10" scope="col"><div align="left">Test</div></th>
            <th scope="col"><div align="left">Test test test</div></th>
            <th scope="col"><div align="left">
              <input class="rad" type="text" style="width:40px; text-align:right" id="numberx17" readonly size="10" />
            </div></th>
          </tr>
          <tr>
            <th height="10" scope="col"><img src="TESTI.GIF" alt="dfd" width="54" height="1" /></th>
            <th scope="col"><img src="TESTI.GIF" alt="" width="205" height="1" /></th>
            <th scope="col"><img src="TESTI.GIF" alt="4343" width="77" height="1" /></th>
          </tr>
        </table>
        <br />
    	<INPUT class="rad" TYPE='button' VALUE='Laske' onclick="myButton_onclickx10()" id="myButton3">
        <INPUT class="rad" TYPE='button' VALUE='Tyhjennä kentät' onclick="myButton_onclickx44()"><br />
  </div>

  <div id="div4" class="inpane">Test:
    <input name="c2" type="checkbox" class="rad" onclick="showMe('div5', this)" checked="checked">
    Kyllä / Ei
  </div>

  <div id="div5" class="inpane" >
    <input class="rad" id="Numberax18" onKeyPress="return checkIt(event)" type="text" style="width:40px; text-align:right"/>
Test<br />
        <input class="rad" id="Numberax19" onKeyPress="return checkIt(event)" type="text" style="width:40px; text-align:right"/>
Test<br />
        <br />
        <table width="306" border="0" cellpadding="0" cellspacing="0">
          <tr>
            <th height="58" scope="col"><div align="left">Test</div></th>
            <th scope="col"><div align="left">TestTestTestTestTest</div></th>
            <th scope="col"><div align="left"><strong>
              <input class="rad" type="text" style="width:40px; text-align:right" id="numberx18" readonly size="10" />
            </strong><br />
            </div></th>
          </tr>
          <tr>
            <th height="10" scope="col"><img src="TESTI.GIF" alt="dfd" width="62" height="2" /></th>
            <th scope="col"><img src="TESTI.GIF" alt="4343" width="205" height="1" /></th>
            <th scope="col"><img src="TESTI.GIF" alt="434" width="77" height="1" /></th>
          </tr>
        </table>
        <br />
    	<INPUT class="rad" TYPE='button' VALUE='Laske' onclick="myButton_onclickx19()" id="myButton4">
        <INPUT class="rad" TYPE='button' VALUE='Tyhjennä kentät' onclick="myButton_onclickx43()">
  </div>

  <div id="div9" class="inpane">Test:
    <input name="c4" type="checkbox" class="rad" onclick="showMe('div10', this)" checked="checked">
    Kyllä / Ei
  </div>

      <div id="div10" class="inpane" >
      	<p>
      	  <input class="rad" id="Numberax25" onKeyPress="return checkIt(event)" type="text" style="width:40px; text-align:right"/>
        Test - Test<br />
        <input class="rad" id="Numberax26" onKeyPress="return checkIt(event)" type="text" style="width:40px; text-align:right"/>
        Test - Test<br />
      	</p>
      	<table width="306" border="0" cellpadding="0" cellspacing="0">
          <tr>
            <th height="58" scope="col"><div align="left">Test</div></th>
            <th scope="col"><div align="left">TestTestTestTestTest</div></th>
            <th scope="col"><div align="left"><strong>
            <input class="rad" type="text" style="width:40px; text-align:right" id="numbebb" readonly="readonly" size="10" />
            </strong><br />
            </div></th>
          </tr>
          <tr>
            <th height="58" scope="col"><div align="left">Test</div></th>
            <th scope="col"><div align="left">TestTestTestTestTest</div></th>
            <th scope="col"><div align="left"><strong>
              <input class="rad" type="text" style="width:40px; text-align:right" id="numberx24" readonly size="10" />
            </strong><br />
            </div></th>
          </tr>
          <tr>
            <th height="10" scope="col"><img src="TESTI.GIF" alt="dfd" width="62" height="2" /></th>
            <th scope="col"><img src="TESTI.GIF" alt="4343" width="205" height="1" /></th>
            <th scope="col"><img src="TESTI.GIF" alt="434" width="77" height="1" /></th>
          </tr>
        </table>
      	<p>
      	  <INPUT class="rad" TYPE='button' VALUE='Laske' onclick="myButton_onclickx21()" id="myButton5">
          <INPUT class="rad" TYPE='button' VALUE='Tyhjennä kentät' onclick="myButton_onclickx42()">
   	      <br />
                </p>
  </div>

</form>


</body>
</html>

Mod. lisäsi kooditagit

tsuriga [03.11.2009 16:48:23]

#

Jollei ole painavaa syytä käyttämättä jotain kirjastoa, käytä sellaista (esim. jQuery/MooTools/Prototype) välttääksesi selainkohtaisia eroja.

Vastaus

Aihe on jo aika vanha, joten et voi enää vastata siihen.

Tietoa sivustosta