Tabelle wandert in Safari

S

sas3003

Neues Mitglied
Thread Starter
Dabei seit
11.10.2005
Beiträge
10
Reaktionspunkte
0
Hi liebe MacUser *g*
steh grad vor einem sehr interessanten Problem.
Habe mit HTML, ein wenig JS (umstaendlicher gehts wahrscheinlich nicht mehr)und ein wenig css an einer Seite gebastelt.

Problem: Ich habe eine aufklappbare Textbox, realisiert ueber javascript, indem der entsprechende Texteil sichtbar gemacht wird. funktioniert auch soweit.. aber sobald ich die Textbox zu und wieder aufklappe, wandert der Tabellen Inhalt in die naechste Spalte und immer eine Spalte weiter mit jedem aufklappen. An einer anderen Stelle steht der Text in der 2ten Spalte der Tabelle und es gibt keine Probleme.
Habe versucht eine Tablle einzubetten, bringt aber nichts dann wandert die gesammte Tabelle eine Spalte weiter.
Ach ja auf PC mit IE funktioniert alles wunderbar. Hatte jemand mal ein aehnliches Problem?

Hier das Codefragment + Js (nicht lachen, bin designer kein programmierer *gg*)
Code:
<!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=ISO-8859-1" />
<title>Aboriginal Alice demo</title>
<link href="text.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/JavaScript" language="JavaScript1.2">
<!--
var teaser1 = false;
var teaser2 = false;
var teaser3 = false;

var text1 = false;
var text2 = false;
var text3 = false;

function hidden() 
{ 
        if (teaser1)
        {
                document.getElementById('ghost').style.display = 'none';
                teaser1 = false;
				
        }
        else
        {
                document.getElementById('ghost').style.display = 'block';
                teaser1 = true;
				
        }
} 

function hide() 
{ 
        if (teaser2)
        {
                document.getElementById('box').style.display = 'none';
                teaser2 = false;
				
        }
        else
        {
                document.getElementById('box').style.display = 'block';
                teaser2 = true;
				
        }
} 

function hidden2() 
{ 
        if (teaser3)
        {
                document.getElementById('ghost2').style.display = 'none';
                teaser3 = false;
				
        }
        else
        {
                document.getElementById('ghost2').style.display = 'block';
                teaser3 = true;
				
        }
} 

function hidden3() 
{ 
        if (text1)
        {
                document.getElementById('ghost3').style.display = 'none';
                text1 = false;
				
        }
        else
        {
                document.getElementById('ghost3').style.display = 'block';
                text1 = true;
				
        }
} 

function hidden4() 
{ 
        if (text2)
        {
                document.getElementById('ghost4').style.display = 'none';
                text2 = false;
				
        }
        else
        {
                document.getElementById('ghost4').style.display = 'block';
                text2 = true;
				
        }
} 


function hidden5() 
{ 
        if (text3)
        {
                document.getElementById('ghost5').style.display = 'none';
                text3 = false;
				
        }
        else
        {
                document.getElementById('ghost5').style.display = 'block';
                text3 = true;
				
        }
} 



function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
//-->
</script>
</head>

<body marginheight="0" marginwidth="0" leftmargin="0" topmargin="0">

	 <table width="980" bgcolor="#532721" align="left" cellpadding="0" cellspacing="0">
	  	<tr>
			<td colspan="2" height="20">&nbsp; </td>
		</tr>
	  	<tr>
		  <td colspan="2" height="336"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="980" height="336" title="aboriginal alice flash navigation">
            <param name="movie" value="flash navi/alice_navi.swf" />
            <param name="quality" value="high" />
            <embed src="flash navi/alice_navi.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="980" height="336"></embed>
	      </object></td>
		</tr>
	  	<tr>
			<td colspan="2" height="60"><img src="" alt="titel" width="268" height="52" /></td>
	   </tr>
  	  <tr>
		<td width="280" valign="top">
			<table width="280" border="0" cellpadding="0" cellspacing="0">
				<tr>
					<td width="280" align="center"><img src='pics/alice_mediabox.jpg' alt="mediabox"/>
					&nbsp;</td>
				</tr>
				<tr><td>&nbsp;</td></tr>
				<tr>
					<td align="center">
						<table width="270" cellpadding="0" cellspacing="0">
							<tr>
								<td background="pics/teaser/teaser_back_1.png">
								<img src="pics/teaser/teaser_art1.png" /></td>
							</tr>
							<tr>
							  <td style="display : none" id="ghost" background="pics/teaser/teaser_back2.png" 
							  name="box">
							  <img src="pics/teaser/teaser_art2.png" /></td>
							</tr>
							<tr>
							  <td background="pics/teaser/teaser_back3.png" align="right">
							  <a href="#box1" onClick="hidden()"><img src="pics/arrow_up.png" /></a></td>
							</tr>
						</table>
					</td>
				</tr>
				<tr height="20">
					<td align="center">	<table width="270" cellpadding="0" cellspacing="0">
							<tr>
								<td background="pics/teaser/teaser_back_1.png">
								<img src="pics/teaser/teaser_didge1.png" /></td>
							</tr>
							<tr>
								<td style="display : none" id="box" background="pics/teaser/teaser_back2.png" 	
								name=box2>
								<img src="pics/teaser/teaser_didge2.png" /></td>
							</tr>
							<tr>
								<td background="pics/teaser/teaser_back3.png" align="right">
								<a href="#box2" onClick="hide()"><img src="pics/arrow_up.png" /></a>
								</td>
							</tr>
						</table></td>
				</tr>
				<tr>
					<td align="center">	<table width="270" cellpadding="0" cellspacing="0">
							<tr>
								<td background="pics/teaser/teaser_back_1.png">
								<img src="pics/teaser/teaser_dream1.png" /></td>
							</tr>
							<tr>
								<td style="display : none" id="ghost2" background="pics/teaser/teaser_back2.png"
								name="box3"><img src="pics/teaser/teaser_dream2.png" />
								</td>
							</tr>
							<tr>
							  <td background="pics/teaser/teaser_back3.png" align="right">
							  <a href="#box3" onClick="hidden2()"><img src="pics/arrow_up.png" /></a></td>
							</tr>
							<tr>
							  <td>&nbsp;</td>
					  </tr>
					</table></td>
				</tr>
				<tr>
					<td align="center">&nbsp;</td>
				</tr>
				
				
			</table>
		</td>
		<td width="700" valign="top">
			<table width="700" border="0" valign="top">
				<tr>
				  <td width="480">
						<table width="480" border="0" cellpadding="0" cellspacing="0">
							<tr>
								<td colspan="2"><img src="pics/text_line.png" alt="text-line" width="480" height="10" /></td>
							</tr>
							<tr >
								<td width="340" valign="top">
									<p class="headline">HISTORY OF OUR SOUTHERN ARRERNTE 	
									FAMILY <br />/ COMMUNITY GROUP </p>
							    	<p align="justify" class="content_text" >text regulaer bleibt stehen </p>								</td>
								<td width="140" align="right" valign="top">
									<p><img src="pics/alice_pic_text1.jpg" alt="pic_text1" /></p>								</td>
							</tr>
							
							<tr>
								<td style="display : none" id="ghost3" name="t1">
								<p align="justify" class="content_text" >The Arrernte speaking people were
									those who occupied most of the choice regions in the Mac Donnell Ranges. Their
									territory stretched about 110 kilometres to both West and East and was about
									330 kilometres in extent  from North an ernte were divided into six sub groups,
									each with its particular territory. These sub-groups were further divided into
									small family or kin groups, all bound by the very rigid system of authority
									governed by intermarriage and movements over another group Estate .
									Their territory stretched about 110 kilometres to both West and East and was 	
									about 330 kilometres in extent  from North an ernte were divided into six sub 		
									groups, each with its particular territory. These sub-groups were further 
									divided into small family or kin groups, all bound by the very rigid system of 
									authority governed by intermarriage and movements over another group Estate . 
									</p></td>
								
							</tr>
							<tr>
								<td align="right">
									<a href="#t1" onClick="hidden3()"><img src="pics/arrow_down.png" width="25" height="19" /></a>							</td>
								<td>&nbsp;</td>
							</tr>
						</table>
den Rest des Cods hab ich mal gecuttet, da es hier den Rahmen der verfuegbaren Zeichen gesprengt haette.. Ja es sind alles tags etc geschlosse.. *gg*

Schon mal danke fuers Gruebel:eek:)
 
ach ja der Text in der untersten Tabelle ist das Problem *gg*
 
Nette Probleme hast Du um die Uhrzeit :)

Bei JS-Problemen ist der Firefox bzw. dessen JavaScript Console immer gut zu gebrauchen. Diese sagt folgendes:

mehrmals Schreibfehler bei "d isplay" & kein Leerzeichen hinter dem Punkt

hide, hidden und hidden1-3 not defined

Also die Fehler mal bereinigen und wenn's immer noch nich geht:
Nen Link auf die Seite wär hilfreicher. Bekomm das Skript bei mir garnicht zum Laufen.

Übrigens müssen in XHTML alle JS-events klein geschrieben werden (onclick).
 
Zuletzt bearbeitet:
hi Jakob,
sitz hier grad in ner Agentur in Sydney wo ich mein Praxissemester absolviere.. bei uns is es jetzt vormittags um 11 *gg*

Wuerd dir gern nen link schicken das ganze is aber noch net online is grad nur ne demoversion...
was soll denn falsch geschrieben sein bei display? und hinter welchem punkt fehlt ein leerzeichen? hab ich irgenwo punkte???

Hab leider gar keine Ahnung von JavaScript (wie du siehst) und mir meine Funktionen zusammengedoktort..
Aber es funktioniert einwandfrei im IE, das oeffnen und schliessen funktioniert auch bei Safari und Firefox ohne weiteres. Mir verschiebt es nur den Inhalt der Tabelle, die eingeblendet wird, immer eine Spalte weiter.

hab gerade alles auf diese Tabelle+ inhalt reduziert(kein css, keine imgs etc nur die tabellen fuer den Seitenaufbau) und alles funktioniert ohne probleme nichts verschiebt sich..

dann duerfte es doch nicht am JS liegen, oder?

hier der reduzierte code:
Code:
<!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=ISO-8859-1" />
<title>Aboriginal Alice demo</title>
<link href="text.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/JavaScript" language="JavaScript1.2">
<!--
var text1 = false;

function hidden3() 
{ 
        if (text1)
        {
                document.getElementById('ghost3').style.display = 'none';
                text1 = false;
				
        }
        else
        {
                document.getElementById('ghost3').style.display = 'block';
                text1 = true;
				
        }
}
//-->
</script>
</head>
<body marginheight="0" marginwidth="0" leftmargin="0" topmargin="0">


	 <table width="980" bgcolor="#532721" align="left" cellpadding="0" cellspacing="0" border="1">
	  	<tr>
			<td colspan="2" height="20">&nbsp; </td>
		</tr>
	  	<tr>
		  <td colspan="2" height="336">flash navi</td>
		</tr>
	  	<tr>
			<td colspan="2" height="60">img</td>
	   </tr>
  	  <tr>
		<td width="280" valign="top">
			<table width="280" border="0" cellpadding="0" cellspacing="0" border="1">
				<tr><td width="280" align="center">img</td></tr>
				<tr><td>&nbsp;</td></tr>
				<tr><td align="center">img</td></tr>
				<tr height="20"><td>img</td></tr>
				<tr><td align="center">img</td></tr>
				<tr><td align="center">&nbsp;</td></tr>
			</table>
		</td>
		<td width="700" valign="top">
			<table width="700" border="1" valign="top">
				<tr>
				  <td width="480">
						<table width="480" border="0" cellpadding="0" cellspacing="0">
							<tr>
								<td colspan="2"><img src="pics/text_line.png" alt="text-line" width="480" height="10" /></td>
							</tr>
							<tr >
								<td width="340" valign="top">
									<p class="headline">HISTORY OF OUR SOUTHERN ARRERNTE 	
									FAMILY <br />/ COMMUNITY GROUP </p>
							    	<p align="justify" class="content_text" >The Arrernte speaking people were
									those who occupied most of the choice regions in the Mac Donnell Ranges. Their
									territory stretched about 110 kilometres to both West and East and was about
									330 kilometres in extent  from North an ernte were divided into six sub groups,
									each with its particular territory. These sub-groups were further divided into
									small family or kin groups, all bound by the very rigid system of authority
									governed by intermarriage and movements over another group Estate . </p>								</td>
								<td width="140" align="right" valign="top">
									<p><img src="pics/alice_pic_text1.jpg" alt="pic_text1" /></p>								</td>
							</tr>
							
							<tr>
								<td style="display : none" id="ghost3" name="t1">
								<p align="justify" class="content_text" >The Arrernte speaking people were
									those who occupied most of the choice regions in the Mac Donnell Ranges. Their
									territory stretched about 110 kilometres to both West and East and was about
									330 kilometres in extent  from North an ernte were divided into six sub groups,
									each with its particular territory. These sub-groups were further divided into
									small family or kin groups, all bound by the very rigid system of authority
									governed by intermarriage and movements over another group Estate .
									Their territory stretched about 110 kilometres to both West and East and was 	
									about 330 kilometres in extent  from North an ernte were divided into six sub 		
									groups, each with its particular territory. These sub-groups were further 
									divided into small family or kin groups, all bound by the very rigid system of 
									authority governed by intermarriage and movements over another group Estate . 
									</p></td>
								
							</tr>
							<tr>
								<td align="right">
									<a href="#t1" onClick="hidden3()"><img src="pics/arrow_down.png" width="25" height="19" /></a>							</td>
								<td>&nbsp;</td>
							</tr>
						</table>
					 
				  <td width="200" valign="top">navigation</td>
				</tr>
				<tr>
					<td width="480">texbox2</td>
					<td width="200" valign="top">img</td>
				</tr>
				<tr>
					<td width="480">textbox3</td>
					<td width="200" valign="top">2navi</td>
				</tr>
			</table>
		
		</td>
	  </tr>
	   <tr>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
	   </tr>
	   <tr>
			<td>&nbsp;</td>
			<td align="center">img</td>
	   </tr>
	  <tr>
			<td>&nbsp;</td>
			<td align="right"><a href="#Beispiel">this is a footer link</a></td>
	   </tr>
</table>
 </body>
</html>
 
beim click auf das img unter dem text klappt die box auf bzw zu
 
habe gerade festgestellt dass das Problem bei Firefox weiter besteht.. :(
irgendeine Idee wo das Problem liegen koennte??
*langsamabersicheramverzweifelnbin*
 
Wie gesagt, lad's doch einfach hoch (Seite ist jetzt unter dem Link), es will sich doch keiner durch den Quelltext kämpfen. So sieht auch jeder, dass es ganz normal funktioniert. Es rutscht keine Zeile runter. Achte mal auf den Scrollbalken und guck Dir die Seite an. Die Seite erweitert und verkürzt sich einfach durch Deinen Mechanismus. Nichts komisch.

Der Vorteil bei ner online verfügbaren Seite ist auch, dass Du gleich nachsehen kannst, was sonst noch zu erledigen ist.
 
Zuletzt bearbeitet:
Übrigens musst Du nicht für jede Textbox eine neue Funktion schreiben. Nimm nur eine, die nennst Du meinetwegen hide und in die Klammer gibst Du den Namen der Box:
Code:
 function hide(box) 
{ 
if (document.getElementById('box').style.display = 'none'){
document.getElementById('box').style.display = 'block';
}
else {
document.getElementById('box').style.display = 'none';
}
}

Musst Du wahrscheinlich noch bisschen anpassen. Das rufst Du denn z.B. mit hide('teaser2') oder hide('teaser3') auf.

Ich sehe gerade, der haut da ja nur im Forum hier diese komischen Abstände bei display rein… komisch.
 
Zuletzt bearbeitet:
hi jakob,
danke fuer deine schnelle antwort, hochladen is schoen und gut, hab aber keine domain auf die ich momentan was hochladen koennte.. jedenfalls hab ich immernoch das problem dass die Tabelle beim mehrfachen oeffnen der Textbox wandert.. (hier in der reduzierten version im firefox, in der original version im Safari)

es soll moeglich sein die textboxen, bzw teaserboxen unabhaengig voneinander zu oeffnen und zu schliessen, reicht da dann auch eine funktion? hatte anfangs nur eine funktion und es hat nicht funktioniert..

bei deinem beispiel hide(box), woher weiss js, dass ich mit zb. hide(teaser) auf diese funktion zugeifen will? muss ich ich das irgendwie speziell deklarieren? (oder was auch immer?)

(das verkuerzen und verlaengern der Seite war ja Sinn der uebung *gg*)

merci
 
Ah! Jetzt hab ich auch zum ersten Mal gesehen, was Du meinst. Es wandert, wenn man es auf- und zumacht und das dann wiederholt!

Da würde ich einfach dem <p>-Block die ID geben, nicht der td, ist eh ne schlechte Idee ner td display:none zuzuweisen.

Zu Deiner Frage: Weil's in der Klammer steht. Probier mal:
Code:
function display(Text){
alert(Text);
}
und im Quelltext dann:
Code:
<a onclick="display('hierschreibstduwasrein')">Klick</a>
 
hurra! :)
Problem geloest.. die id gehoert in den <p>, vielen vielen Dank!!!
Wer haette auch gedacht dass es soooo einfach ist.. Naja das werd ich jedenfalls nie wieder vergessen *gg*

bei der Codevereinfachung steig ich immer noch nicht durch.. wo setzt ich denn in deinem Beispiel die entsprechende var auf false und muss dann der parameter (Text) nicht ne Variable sein? hae? hab insgesamt 6 solche Boxen, die unabhaengig von einander auf und zu geklappt werden koennen muessen... zb text1 - text6, hatte zunaechst ueberlegt das in ne Schleife zu packen, aber bin davon abgekommen da ich ja entsprechend 6 verschiedene Variablen hab die auf false gesetzt werden muessen..

naja, nicht so wichtig, hauptsache es funktioniert.. ;)
danke nochmal und Gruss aus dem sonnigen Sydney
 
Zuletzt bearbeitet:
In Jakobs Beispiel war noch ein kleiner Fehler, ein Gleichzeichen hat gefehlt. Man kann das ganze auch noch weiter vereinfachen:
Code:
function hide(id) {
   document.getElementById(id).style.display=document.getElementById(id).style.display=='none'?'block':'none';
}
Variablen zum Speichern des Zustandes brauchst Du nicht mehr, da der aktuelle Zustand direkt abgefragt wird. Ist die Box sichtbar, wird sie auf unsichtbar gesetzt und umgekehrt.

Die Links zum Ein/Ausblenden können dann so aussehen:
Code:
<a href="#box1" onclick="hidden('ghost')">
<a href="#box2" onclick="hidden('box')">
<a href="#box3" onclick="hidden('ghost2')">
...
 
ahh cool, das funktioniert.. danke..
wobei bei onclick dann schon der richtige funktionsname stehen muss, oder?
wenn ich das Javasript nun extern haben moechte was muss ich dann im Html teil aendern (also im link zum ein und ausblenden?)
oder reicht es im script teil src="box.js" einzubauen??
 
Ups, sorry. Ja, in den onclick's muss natürlich "hide" stehen, wenn die Funktion auch so heisst. :eek:

wenn ich das Javasript nun extern haben moechte was muss ich dann im Html teil aendern (also im link zum ein und ausblenden?)
oder reicht es im script teil src="box.js" einzubauen??
Genau, im Quellcode brauchst Du nichts ändern. Einfach die JS-Datei über das src-Attribut referenzieren. Für die Funktionsweise ist es völlig egal ob die Funktion in der selben oder in einer externen Datei liegt.
 
frage hat sich geklaert es reicht src="", anzugeben.. hat beim alten skript nicht funktioniert.. daher die Frage.. vielen vielen dank nochmal funktioniert wunderbar.. auch wenn ich das skript jetzt nicht mehr ganz nachvollziehen kann..

Ist es eine abfrage ob (stark vereinfacht) funktion a=funktion a und dieses ==zustand a?
dann wird zustand a : zustand b gesetzt??? (by the way fuer was steht ':')

jaja wahrscheinlich ziemlich banale fragen.. hab bisher nur nen bisschen java programmiert (auch schon ne Weile her) und das is meine erster Ausflug ins Javascript *gg*
 
Genau, das ist eine vereinfachte Abfragesyntax.

x=a==b?1:2

Wenn a den gleichen Wert wie b hat, wird x der Wert 1 zugewiesen. Hat a einen anderen Wert als b bekommt die Variable x die 2 verpasst. Der Doppelpunkt trennt also die zwei möglichen Werte voneinander.

In selfHTML findest Du es hier: http://de.selfhtml.org/javascript/sprache/bedingt.htm#entweder_oder Vielleicht ist es dort besser erklärt. Im Erklären bin ich nicht so begabt. :D
 
supi, hab ich also richtig vermutet *g*
vielen dank nochmal, is so wirklich um einiges einfacher, aber ich glaub nicht das ich darauf gekommen waere.. merci
meld mich hier wieder beim naechsten problem ;)
 
Zurück
Oben Unten