Eagle3386
Mitglied
Hallo zusammen,
ich habe ein Problem mit der Verschmelzung einer Tabelle bzw. deren Spalten beim horizontalen Vergrößern einer Grafik und dem Rücksetzen bei Doppelklicks..
Einbindung der benötigten Bibliotheken sowie Stylesheet-Angaben im <head>-Bereich:
Mein jQuery-Code sieht aktuell so aus:
Und der zugehörige HTML-Code so:
Meine Probleme sind nun folgende:
ich habe ein Problem mit der Verschmelzung einer Tabelle bzw. deren Spalten beim horizontalen Vergrößern einer Grafik und dem Rücksetzen bei Doppelklicks..
Einbindung der benötigten Bibliotheken sowie Stylesheet-Angaben im <head>-Bereich:
Code:
<link type="text/css" href="ui/ui.resizable.css" rel="stylesheet" />
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="ui/ui.core.js"></script>
<script type="text/javascript" src="ui/ui.resizable.js"></script>
<style type="text/css">
table { border-collapse:collapse; margin: 100px auto; }
td { border: 1px solid #000000; margin: 0px; padding: 0px; text-align:center; width: 24px; }
.resBar { border: 5px; height: 20px; margin: 0px; padding: 0px; width: 24px; }
</style>Mein jQuery-Code sieht aktuell so aus:
Code:
$(function()
{
$(".resBar").resizable
({
animate: true,
ghost: false,
grid: 24,
handles: 'e, w',
helper: 'resBarBorder',
maxHeight: 20,
minWidth: 24
});
});Und der zugehörige HTML-Code so:
Code:
<table cellpadding="100" cellspacing="0">
<tr>
<td style="font-weight: bold; width: 200px;">Fahrzeuge</td>
<td>00</td><td>01</td><td>02</td><td>03</td><td>04</td><td>05</td><td>06</td><td>07</td><td>08</td><td>09</td><td>10</td><td>11</td>
<td>12</td><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td><td>19</td><td>20</td><td>21</td><td>22</td><td>23</td>
</tr>
<tr>
<td style="text-align: left; width: 200px;">Auto #1</td>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
<td>
<img id="rB-1" class="resBar" src="images/bar.gif" />
</td>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
[ ... ganz viele weitere Zeilen wie die obige ... ]
</table>Meine Probleme sind nun folgende:
- Skalieren der Balken-Grafik lässt den helper-Rahmen (CSS-Klasse: resBarBorder, erzeugt lediglich eine Art "Drahtgitter-Modell" für die neue Balken-Größe) korrekt entsprechend der definierten Rasterbreite (24 Pixel) springen bzw. wachsen..
Unglücklicherweise wird die "Drahtbox" nicht vollständig gefüllt, wenn sich der Mauszeiger beim Loslassen nicht exakt über dem rechten Rand befindet - Beispiel: lasse ich los, wenn der Cursor etwa 5 Pixel links des rechten Rands steht, werden diese 5 Bildpunkte nicht vom "bar.gif"-Bild gefüllt..
Wie könnte ich das beheben?
- Allerdings ist mein Hauptproblem einen Tick anders: die eigentliche Größenänderung der Grafik klappt bestens, vergrößert jedoch aktuell die Breite der Zelle.. Stattdessen möchte ich aber ein Einfügen des colspan-Attributs nebst Erhöhung des Wertes, sofern die entsprechende Breite erreicht ist - egal, ob ich den Balken von seiner ursprünglichen Position aus nach links oder rechts ziehe..
Kann mir jemand eine kleine Hilfestellung geben, wie ich das erreichen könnte, weil mein jQuery/AJAX-Wissen ist noch nicht unbedingt "ultimativer Wahnsinn"..
- Mal angenommen, ich ziehe den Balken auf seine doppelte Größe und der Mauszeiger ist direkt über ihm bzw. seinem rechten Rand..
Wenn ich diese
Grafik(-Rand) nun doppelt anklicke, soll die ursprüngliche Größe wiederhergestellt werden..
Ich hab's über die existierende Methode ".resizable('destroy')" versucht, aber es funktionierte einfach nicht - die Fehler-Console vom Firefox gibt auch keinen Hinweis auf 'nen möglichen Fehler..
Der Code für diese Funktionalität sieht aktuell so aus:
Code:
var resBar = $("#rB-1");
resBar.dblclick(function ()
{
resBar.resizable('destroy');
});
