Objekt in 4 Richtungen bewegen

one6666

Mitglied Titanium
Hallo,

Nachtrag:
Habe es jetzt geschafft ;-)


ich versuche gerade einen Div Container der später mal meinen WYSIWYG Editor beinhalten wird in die Breite und Höhe zu ziehen(vergleichbar mit einen Fullscreen Modus),
eine Besonderheit ist daran das er nicht einfach aufspringen soll sondern schön sanft in die jeweilige Richtung fahren soll ;-)
[OFFTOPIC_START: Später soll er sogar noch erst schnell anlaufen und zum Schluss der jeweiligen Kante langsamer werden ;-) aber das ist eine andere Geschichte OFFTOPIC_ENDE]

Die ganzen Positionsangaben habe ich schon ermittelt,
ich weiß jetzt wie weit der Div Container nach links, rechts, oben und unten fahren muss um die ganze Fläche des Browserfenster zu füllen :)

Mein Problem besteht nun darin eine function zu schreiben die 4 unterschiedliche Richtungen gleichzeitig bearbeitet :confused:

Mit einer Richtung ist das ganze noch kein Problem siehe Link: http://media-volex.de/editor_window/editor_window.html ,
aber wie das ganze jetzt mit 4 Richtungen gehen soll ist mir immer noch ein Rätsel,
habe einfach jeden mir erdenklichen Weg schon durch :(

Hier der Code:
HTML:
<!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=utf-8" />
<title>Editor-Window</title>
<style type="text/css">
body{
	margin:0px;
	padding:0px;
}
</style>
<script type="text/javascript">
function move(count) {
	if (count == undefined) {
    count = 0;
    }
    if (count < editor_window_right) {
    count++;
	count_start = editor_window_width;
	count_start = count_start + count;
	document.getElementById("editor_window_id").style.width = count_start + "px";
    var timeout = window.setTimeout("move(" + count + ")", 1);
	}
}

function fullscreen(){
	editor_window = document.getElementById("editor_window_id");
	
	window_width = window.innerWidth;
	window_height = window.innerHeight;
	
	editor_window_width = parseInt(editor_window.style.width);
	editor_window_height = parseInt(editor_window.style.height);
	
	editor_window_left = editor_window.offsetLeft;
	editor_window_top = editor_window.offsetTop;
	
    window_distance_horizontal = window_width - editor_window_width;
	window_distance_vertical = window_height - editor_window_height;
	
	editor_window_right = window_distance_horizontal - editor_window_left;
	editor_window_bottom = window_distance_vertical - editor_window_top;
	
    move();
}

</script>
</head>

<body>

<div id="editor_window_id" style=" background:#CCC; margin-left:300px; margin-top:300px; width:800px; height:300px;">
<button style="float:right;" onclick="fullscreen()">Fullscreen</button>
</div>

</body>
</html>

Weiß Jemand wie ich damit weiter verfahren soll ?
 
Zuletzt bearbeitet:
Zurück