nicht angemeldet
Nicht im Firefox kompatibel
Servus Leute,
ich hab hier folgendes Script, womit ich die Spaltenbreite der Tabelle mit der Muas ändern kann. Im Internet Explorer funktioniert es. Nur halt in Firefox nicht. Da ich davon nicht soviel Ahnung habe, frage ich euch.
Ich hoffe ihr könnt mir weiter helfen.
Das Script:
<html>
<head>
<title>Resize Columns</title>
<style type="text/css">
<!--
.resizer {
cursor: e-resize;
}
.tableData {
padding: 3px;
white-space: nowrap;
overflow: hidden;
}
-->
</style>
<script>
var dragStartPos = 0;
var resizing = false;
function startDrag(i){
test=i;
document.onmousemove = dragging;
resizing = true;
if (navigator.appName == 'Netscape') {
theEvent = e;
} else {
theEvent = event;
}
dragStartPos = theEvent.clientX;
return true;
}
function stop(){
resizing = false;
}
function dragging(_test){
document.onmouseup= stop;
if(resizing){
if (navigator.appName == 'Netscape') {
theEvent = e;
} else {
theEvent = event;
}
dragEndPos = theEvent.clientX;
newWidth = parseInt(dragEndPos - dragStartPos) + parseInt(document.getElementById(test).width);
if(newWidth >= 1){
document.getElementById(test).width = newWidth;
dragStartPos = dragEndPos
}
}
return true;
}
</script>
</head>
<body onselectstart='return false'>
<table style="table-layout: fixed;" border="0" cellpadding="0" cellspacing="0" bgcolor="#DDDDDD">
<tr>
<td width="4" bgcolor="#DDDDDD"></td>
<td id="spalte1" width="100" bgcolor="#DDDDDD" class="tableHeader">Author</td>
<td width="4" bgcolor="#DDDDDD" class="resizer" onMouseDown="startDrag('spalte1')"></td>
<td id="spalte2" width="100" class="tableHeader">Title</td>
<td width="4" bgcolor="#DDDDDD" class="resizer" onMouseDown="startDrag('spalte2')"></td>
<td id="spalte3" width="100" class="tableHeader">Date</td>
<td width="4" bgcolor="#DDDDDD" class="resizer" onMouseDown="startDrag('spalte3')"></td>
</tr>
<tr>
<td></td>
<td bgcolor="#FFFFFF" class="cell">
<div class="tableData">Test</div>
</td>
<td></td>
<td bgcolor="#FFFFFF" class="cell">
<div class="tableData">Test</div>
</td>
<td></td>
<td bgcolor="#FFFFFF" class="cell">
<div class="tableData">Test. Test. Test. Test. Test. Test. Test. Test. Test. Test. Test. Test. Test. </div>
</td>
<td></td>
</tr>
</table>
</body>
</html>
-
n'abend,
function dragging(_test){
document.onmouseup= stop;
if(resizing){
if (navigator.appName == 'Netscape') {
theEvent = e;
} else {
theEvent = event;
}
[...]bist du schon Mal auf die Idee gekommen das übergebene Event-Objekt richtig zu befragen?
function dragging( e ) { // hole event-objekt falls e nicht übergeben wurde (da wir es dann mit einem IE zu tun haben...) var theEvent = !e = window.event : e; // das würde ich eher in den mousedown-handler packen document.onmouseup = stop; // globale variablen sind sehr unschön - wenn nicht gedraggt werden soll, sollte dieser event-handler besser gar nicht aktiv sein... if( resizing ) { dragEndPos = theEvent.clientX; // parseInt!? suchst du bei der ersten Anwendung vielleicht nach Math.floor() oder .ceil() oder .round()? newWidth = parseInt(dragEndPos - dragStartPos) + parseInt(document.getElementById(test).width); if(newWidth >= 1){ document.getElementById(test).width = newWidth; dragStartPos = dragEndPos } } return true; } }weiterhin schönen abend...
--
Freundlich wie man war, hat man mir Großbuchstaben geschenkt.
sh:( fo:# ch:# rl:| br:> n4:& ie:{ mo:} va:) de:] zu:} fl:( ss:? ls:[ js:|-
Danke für die schnelle Antwort,
jetzt geht es im Firefox, aber nicht so wie im IE.Kannst du oder jemand anderes mir weiterhelfen?
-
Hallo,
jetzt geht es im Firefox, aber nicht so wie im IE.
das ist nichts neues, wo liegt das Problem?
Gruß plan_B
--
*®*´¯`·.¸¸.·-
Hallo,
jetzt geht es im Firefox, aber nicht so wie im IE.
das ist nichts neues, wo liegt das Problem?
Gruß plan_B
Na wenn ich z.b. die Breite der ersten Spalte veränder, darf sich die Breite der anderen nicht verändern. Das funktioniert im IE wunerbar. Im Firefox ganz und gar nicht.
-
hallo,
das ist nichts neues, wo liegt das Problem?
Na wenn ich z.b. die Breite der ersten Spalte veränder, darf sich die Breite der anderen nicht verändern. Das funktioniert im IE wunerbar. Im Firefox ganz und gar nicht.
also das unterschiedlich Eventhandling der Browser hast du berücksichtigt, jetzt geht es wohl um die Darstellung?
Da fällt mir auf, dass kein Doctype definiert ist: http://de.selfhtml.org/html/allgemein/grundgeruest.htm@title=Grundgeruest
Wenn ich nun weiter forschen müsste, würde ich mir ausgeben lassen, welche Werte (Spaltenbreiten) deine Funktionen so berechnen und ob da etwas falsch läuft. Da ist wohl dein SELF gefragt. In die einzelen Tabellenzellen könnte man wunderbar die Werte reinschreiben lassen ...
Vielleicht wäre dieses Kapitel auch noch interessant für dich http://de.selfhtml.org/css/eigenschaften/tabellen.htm@title=css/eigenschaften/tabellen
Gruß plan_B
--
*®*´¯`·.¸¸.·
-
Na wenn ich z.b. die Breite der ersten Spalte veränder, darf sich die Breite der anderen nicht verändern. Das funktioniert im IE wunerbar. Im Firefox ganz und gar nicht.
vielleicht bist du mit deinem Beispiel noch nicht weiter gekommen, möglicherweise hapert es doch noch am Eventhandling.
Ich sehe zwar keinen praktischen Nutzen in dem Script, immerhin habe ich etwas über table-layout:fixed und mouseevents gelernt.
funktioniert auch so einigermassen: table/table1.htm
Gruß plan_B
--
*®*´¯`·.¸¸.·
-
-
-
-