HTML/JS Problem

Seite 1 von 1 - Forum: Coding Stuff auf overclockers.at

URL: https://www.overclockers.at/coding-stuff/html-js-problem_232093/page_1 - zur Vollversion wechseln!

grOOvekill@ schrieb am 18.10.2012 um 11:17

S'gott,

so, bastel gerade eine Seite und habe folgendes Problem:

Ich benötige auf den Unterseiten expandierende Contentboxen. Da habe ich auch ein Javascript Ding gefunden, das genau das macht was ich brauche.

Die Seite könnt ihr euch hier ansehen: http://www.kemalkara.com/_tmp/site2/

So. Das funktioniert alles soweit. Das Problem ist nur: lokal im Editplus Texteditor waren die 3 Boxen geschlossen, so wie sie es sein sollen. Im IE sind sie das auch, wenn man auf die Seite geht. Seltsamerweise werden im Firefox aber alle 3 Boxen bereits expandiert angezeigt, wobei die Bezeichnung 'Öffnen [+]' dann natürlich auch Blödsinn ist.

Das gleiche Problem habe ich leider in Chrome und Opera. Ich gehe mal davon aus, dass das irgendeine Kleinigkeit im Javascript ist, aber ich komme leider nicht drauf. Hat einer von euch eine Idee? Wäre euch wirklich dankbar.

Hier nochmal der Code:

Code: HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="de">
<head>
<TITLE>SANDOZ FÄCHER | OSPAMOX</TITLE>

<style type="text/css">
	td			{font-family: verdana; font-size:10pt; color:#000000; }
	a:link		{font-family: verdana; font-size:10pt; color:#000000; text-decoration:none;}
	a:visited	{font-family: verdana; font-size:10pt; color:#000000; text-decoration:none;}
	a:active	{font-family: verdana; font-size:10pt; color:#000000; text-decoration:none;}
	a:hover		{font-family: verdana; font-size:10pt; color:#FF0000; text-decoration:none;}
</style>

<script type="text/javascript">

function toggle_visibility(tbid,lnkid) {
if (document.getElementsByTagName) {
  var tables = document.getElementsByTagName('table');
  for (var i = 0; i < tables.length; i++) {
   if (tables[i].id == tbid){
     var trs = tables[i].getElementsByTagName('tr');
     for (var j = 2; j < trs.length; j+=1) {
     trs[j].bgcolor = '#CCCCCC';
       if(trs[j].style.display == 'none') 
          trs[j].style.display = '';
       else 
          trs[j].style.display = 'none';
    }
   }
  }
 }
   var x = document.getElementById(lnkid);
   if (x.innerHTML == 'Öffnen [+]')
      x.innerHTML = 'Schließen [-]';
   else 
      x.innerHTML = 'Öffnen [+]';
}
</script>

</head>

<BODY>

	<table border="0" align="center" cellpadding="0" cellspacing="0">
		<tr>
			<td colspan="2"><img src="ospamox_header.jpg"></td>
		</tr>
	</table>

    <table width="800" border="0" align="center" cellpadding="0" cellspacing="0" id="tbl1" name="tbl1">	
        <tr><td></td></tr>
        <tr>
			<td width="710" align="right">INDIKATION ERWACHSENE</td>
            <td width="90"><a href="javascript:toggle_visibility('tbl1','lnk1');"><div align="right" id="lnk1" name="lnk1">Öffnen [+]</div></a></td>
		</tr>
        <tr style="{display='none'}">
			<td colspan="2"><div><img src="ospamox_ind_erw.jpg"></div></td>
		</tr>        
     </table>

	 <table width="800" border="0" align="center" cellpadding="0" cellspacing="0" id="tbl2" name="tbl2">
        <tr><td></td></tr>
        <tr>
			<td width="710" align="right">INDIKATION KINDER</td>
            <td width="90"><a href="javascript:toggle_visibility('tbl2','lnk2');"><div align="right" id="lnk2" name="lnk2">Öffnen [+]</div></a></td>
		</tr>
        <tr style="{display='none'}">
			<td colspan="2"><div><img src="ospamox_ind_kind.jpg"></div></td>
		</tr>        
     </table>

	 <table width="800" border="0" align="center" cellpadding="0" cellspacing="0" id="tbl3" name="tbl3">
        <tr><td></td></tr>
        <tr>
			<td width="710" align="right">FACHKURZINFORMATION</td>
            <td width="90"><a href="javascript:toggle_visibility('tbl3','lnk3');"><div align="right" id="lnk3" name="lnk3">Öffnen [+]</div></a></td>
		</tr>
        <tr style="{display='none'}">
			<td colspan="2"><div><img src="ospamox_fki.jpg"></div></td>
		</tr>        
     </table>

</body>
</html>

tia

ill schrieb am 18.10.2012 um 11:20

<tr style="{display='none'}">

auch schon ohne die geschwungenen klammern in der inline style angabe versucht? Bin mir nämlich ziemlich sicher, dass diese Schreibweise jeder vernünftige Browser eigentlich ignorieren müsste

mat schrieb am 18.10.2012 um 11:28

Ack. Chrome und FF ignoriert die Style-Angabe wegen den geschwungenen Klammern. Wenn du dir Firebug im Firefox installierst, dann kannst du per "Rechtsklick auf das <tr> => Element im Firebug untersuchen" sehen, dass dort nur ein leeres Style-Tag steht.

grOOvekill@ schrieb am 18.10.2012 um 11:30

Das war's!!!

Also, nicht ganz, ich hab aus der Zeile das hier geabstelt:

<tr style="display: none;">

Und Bäm! Funktioniert! :-)

Tausend Dank! Ich hab einfach an der falschen Stelle gesucht!

ill schrieb am 18.10.2012 um 11:37

da schau her, dass auch die css-syntax fehlerhaft war is mir dann schon garnimma aufgefallen

Nico schrieb am 18.10.2012 um 11:58

http://www.w3schools.com/css/css_howto.asp

standard konform coden schadet nicht

ill schrieb am 18.10.2012 um 12:05

Ich halt mich mit dem W3Fools - Bashing jetzt mal zurück und leg hier noch eine Alternative ab:

https://developer.mozilla.org/en-US/docs/CSS