Guten Abend
Ich habe ein kleines Problem, bei dem ich nicht weiss ob es überhaupt einen Workaround in dieser Form gibt. Ziel ist es eine <div>-Box so wie bei Windowsfenstern bekannt an den Rändern zu vergrössern oder verkleinern. Da ich nicht unbedingt für jeden effekt nen eigenes Framework einbinden will, habe ich das wie folgt mit scriptaculos versucht zu realisieren.
Folgendes <div>-Konstrukt:
Ausgerichtet per CSS:
Dies sieht dann in etwa so aus:
[Blockierte Grafik: http://home.arcor.de/logy/box.jpg]
Die drei <div>-Tags werden nun alle beweglich gemacht:
Wird nun der gelbe Balken (id=right) bewegt, muss man nur die Breite des <div id="box"> um die entsprechende Mausposition vergrösser/verkleinern. Dies macht die function resize() (xPos ist aktuelle x-Koordinate der Maus). Wenn die Breite der Box einen Wert von 100 unterschreitet, wird kein kleinerer Wert mehr gesetzt, um zu verhindern, dass der Inhalt zu sehr gestaucht wird.
Alles anzeigen
Jetzt kann noch der unschöne Effekt auftreten, dass der Anwender den gelben Balken ja auch nach oben/unten verschieben kann und bei späterer Änderung den Balken nicht mehr "findet" (der grüne und blaue Balken soll später ja transparent sein). Dies habe ich umgangen durch die function resizefix() welche aufgerufen wird sobald man einen Balken wieder loslässt, die function richtet diese dann wieder wie ursptünglich aus.
So weit so schön, funktioniert auch wunderbar: http://home.arcor.de/logy/box.html
Versucht man jetzt die Box kleiner als 100px zu ziehen verhindert dies die if-Abfrage in resize() korrekt, aber die Balken werden durch resizefix() nicht mehr an die Ränder positioniert. Und das ist jetzt mein Problem, im Falle des gelben Balkens wirkt sich resizefix() nur auf die horizontale aus, nicht auf die vertikale und da fehlt mir ehrlich gesagt das Verständniss für :D.
Vielleicht hat ja der ein oder andere ne Idee, warum "document.getElementById("right").style.right = 0;" einfach komplett ignoriert wird, die top ausrichtung allerdings funktioniert, oder hat andere Vorschläge zur Realisierung.
Ich habe ein kleines Problem, bei dem ich nicht weiss ob es überhaupt einen Workaround in dieser Form gibt. Ziel ist es eine <div>-Box so wie bei Windowsfenstern bekannt an den Rändern zu vergrössern oder verkleinern. Da ich nicht unbedingt für jeden effekt nen eigenes Framework einbinden will, habe ich das wie folgt mit scriptaculos versucht zu realisieren.
Folgendes <div>-Konstrukt:
Ausgerichtet per CSS:
Quellcode
- #box { background-color: #eee; position: absolute; top: 0; left: 0; width: 100px; height: 100px; border: solid 1px black;}
- #right { background-color: yellow; position: absolute; top: 0; right: 0; width: 4px; height: 100px; cursor:w-resize;}
- #bottom { background-color: green; position: absolute; bottom: 0; left: 0; width: 100px; height: 4px; cursor:s-resize;}
Dies sieht dann in etwa so aus:
[Blockierte Grafik: http://home.arcor.de/logy/box.jpg]
Die drei <div>-Tags werden nun alle beweglich gemacht:
Wird nun der gelbe Balken (id=right) bewegt, muss man nur die Breite des <div id="box"> um die entsprechende Mausposition vergrösser/verkleinern. Dies macht die function resize() (xPos ist aktuelle x-Koordinate der Maus). Wenn die Breite der Box einen Wert von 100 unterschreitet, wird kein kleinerer Wert mehr gesetzt, um zu verhindern, dass der Inhalt zu sehr gestaucht wird.
Quellcode
- function resize() {
- size = xPos-document.getElementById("box").style.left.substr(0, document.getElementById("box").style.left.indexOf("px"));
- if(size<100){
- document.getElementById("box").style.width = "100px";
- document.getElementById("bottom").style.width = "100px";
- }
- else{
- document.getElementById("box").style.width = size + "px";
- document.getElementById("bottom").style.width = size + "px";
- }
- }
Jetzt kann noch der unschöne Effekt auftreten, dass der Anwender den gelben Balken ja auch nach oben/unten verschieben kann und bei späterer Änderung den Balken nicht mehr "findet" (der grüne und blaue Balken soll später ja transparent sein). Dies habe ich umgangen durch die function resizefix() welche aufgerufen wird sobald man einen Balken wieder loslässt, die function richtet diese dann wieder wie ursptünglich aus.
So weit so schön, funktioniert auch wunderbar: http://home.arcor.de/logy/box.html
Versucht man jetzt die Box kleiner als 100px zu ziehen verhindert dies die if-Abfrage in resize() korrekt, aber die Balken werden durch resizefix() nicht mehr an die Ränder positioniert. Und das ist jetzt mein Problem, im Falle des gelben Balkens wirkt sich resizefix() nur auf die horizontale aus, nicht auf die vertikale und da fehlt mir ehrlich gesagt das Verständniss für :D.
Vielleicht hat ja der ein oder andere ne Idee, warum "document.getElementById("right").style.right = 0;" einfach komplett ignoriert wird, die top ausrichtung allerdings funktioniert, oder hat andere Vorschläge zur Realisierung.
