Window Script
user-271
29.04.2007 02:40
WindowScript v.0.1
Demo: http://nonsense.moonsword.info/webstatt/fenster.html
es sind noch resize Funktionen drin, die funktionieren noch nicht richtig bin noch am Debuggen
aber sonst ... alles selber geschrieben...von den Maus Koordinaten bishin zum Drag von den Fenstern
wenn man nun doppelt auf die Titelleiste klickt verschwindet der Content...nochmal doppelklick und er ist wieder da hihi
Demo: http://nonsense.moonsword.info/webstatt/fenster.html
<html>
<head>
<script type="text/javascript">
<!--
function mouseCoordinates() {
var posx = 0;
var posy = 0;
function getCoordinates(e) {
//e = this.e;
if (!e) var e = window.event;
if (e.pageX || e.pageY) {
posx = e.pageX;
posy = e.pageY;
}
else if (e.clientX || e.clientY) {
posx = e.clientX + document.body.scrollLeft
+ document.documentElement.scrollLeft;
posy = e.clientY + document.body.scrollTop
+ document.documentElement.scrollTop;
}
}
this.handler = function (e) {
getCoordinates(e);
}
this.getCoordsX = function () {
return posx;
}
this.getCoordsY = function () {
return posy;
}
}
function Effect() {
this.init = function() { }
}
function Windows() {
var check = false;
var coords,id,oldid,offsetX,offsetY,key;
var arrWindows = new Array();
this.init = function(coords) {
this.coords = coords;
this.id='behind';
this.oldid='behind';
}
this.loopStart = function() {
if(this.check == 'drag'
{
posx = this.coords.getCoordsX()-this.offsetX;
posy = this.coords.getCoordsY()-this.offsetY;
document.getElementById(this.id).style.left = posx+'px';
document.getElementById(this.id).style.top = posy+'px';
}
else if(this.check == 'resize' {
coordsx = this.coords.getCoordsX();
coordsy = this.coords.getCoordsY();
document.getElementById(this.id).style.width = document.getElementById(this.id).style.width.replace('px',''*1-(this.offsetX-coordsx)+"px";
document.getElementById(this.id).style.height = document.getElementById(this.id).style.height.replace('px',''*1-(this.offsetY-coordsy)+"px";
this.offsetX = coordsx;
this.offsetY = coordsy;
}
}
this.setFocus = function(oldid,id) {
document.getElementById(oldid).style.zIndex = 1;
document.getElementById(id).style.zIndex = 2;
}
this.setId = function(id) {
this.oldid = this.id;
this.id = id;
}
this.setKey = function(key) {
this.key = key;
}
this.stopDrag = function() {
this.check = false;
}
this.startDrag = function(id) {
this.setFocus(this.id,id);
this.setId(id);
this.check = 'drag';
this.offsetX = this.coords.getCoordsX()-document.getElementById(id).style.left.replace('px',''*1;
this.offsetY = this.coords.getCoordsY()-document.getElementById(id).style.top.replace('px',''*1;
}
this.startResize = function(id) {
this.setFocus(this.id,id);
this.setId(id);
this.check = 'resize';
this.offsetX = this.coords.getCoordsX();
this.offsetY = this.coords.getCoordsY();
}
this.stopResize = function() {
this.check = false;
}
this.showhide = function(obj) {
if(obj.style.display == 'none' {
obj.style.display = 'block';
this.scrollWindow(obj,0);
} else {
obj.style.height = (obj.offsetHeight-20)+"px";
obj.style.visibility = 'hidden';
this.scrollWindow(obj,1);
}
}
this.scrollWindow = function(obj,way) {
check = false;
height = obj.style.height.replace('px',''*1;
if(way == 1) {
if(height-10 >= 0) {
obj.style.height = (height-10)+"px";
//alert(obj.style.height);
check = true;
} else {
obj.style.display = 'none';
}
} else {
if(height+10 <= 100) {
obj.style.height = (height+10)+"px";
check = true;
} else {
obj.style.visibility = 'visible';
}
}
if(check) {
var thisObj = this;
window.setTimeout(function() { thisObj.scrollWindow(obj,way) },50);
}
}
this.addWindow = function(id,dragListener,resizeListener) {
index = arrWindows.length;
obj = document.getElementById(id);
arrWindows[index] = new Object();
arrWindows[index]['id'] = obj;
arrWindows[index]['listener'] = dragListener;
arrWindows[index]['width'] = id.offsetWidth;
arrWindows[index]['height'] = id.offsetHeight;
dragListener.onmousedown = function(e) {
drag.startDrag(id);
}
/*dragListener.onmouseup = function(e) {
drag.stopDrag();
}*/
if(resizeListener) {
resizeListener.onmousedown = function(e) {
drag.startResize(id);
}
}
document.onmouseup = function (e) {
drag.stopDrag();
drag.stopResize();
}
/*dragListener.ondblclick = function(e) {
drag.showhide(obj.firstChild.nextSibling.nextSibling.nextSibling);
}*/
}
}
coords = new mouseCoordinates();
drag = new Windows();
drag.init(coords);
document.onmousemove = function(e) {
coords.handler(e);
drag.loopStart();
}
document.onkeydown = function(e) {
drag.setKey(e.keyCode);
}
document.onkeyup = function(e) {
drag.setKey(false);
}
//-->
</script>
<style type="text/css">
<!--
.window {
background-color: yellow;
position:absolute;
width: 350px;
z-index:1;
}
.title {
background-color: blue;
width:100%;
height:20px;
cursor:move;
}
.content {
padding: 10px;
height:100px;
overflow: auto;
}
-->
</style>
</head>
<body>
<div id="behind" style="position:absolute;top:-100px;left:-100px;z-index:2;"></div>
<div id="dragdiv" style="position:absolute;overflow:auto;background-color: red;width:100px;height:100px;">
<div id="dragListen" style="cursor:move;background-color: blue; width:10px; height:10px;"></div>
<div id="resizeListen" style="background-color: yellow; width:10px;height:10px;"></div>
<div>
Children of the sun, see your time has just begun, searching for your ways, through adventures every day. Every day and night, with the condor in flight, with all your friends in tow, you search for the Cities of Gold. Ah-ah-ah-ah-ah... wishing for The Cities of Gold. Ah-ah-ah-ah-ah... some day we will find The Cities of Gold. Do-do-do-do ah-ah-ah, do-do-do-do, Cities of Gold. Do-do-do-do, Cities of Gold. Ah-ah-ah-ah-ah... some day we will find The Cities of Gold.
</div>
</div>
<div id="test" class="window" style="top:100px;left:100px;">
<div class='title'></div>
<div class='content'>
Children of the sun, see your time has just begun, searching for your ways, through adventures every day. Every day and night, with the condor in flight, with all your friends in tow, you search for the Cities of Gold. Ah-ah-ah-ah-ah... wishing for The Cities of Gold. Ah-ah-ah-ah-ah... some day we will find The Cities of Gold. Do-do-do-do ah-ah-ah, do-do-do-do, Cities of Gold. Do-do-do-do, Cities of Gold. Ah-ah-ah-ah-ah... some day we will find The Cities of Gold.
</div>
<!--<div class='bottom' style="background-color:red;height:20px;bottom:0;left:0;" onmousedown="drag.startResize('test'" onmouseup="drag.stopResize()"></div>-->
</div>
<div id="test2" class="window" style="top:150px;left:150px;">
<div class='title'>
</div>
<div class='content'>
<img src="avatar-721.jpg" /><br />
<b>Spiff macht euch alle Platt</b>
</div>
<!--<div class='bottom' style="background-color:red;height:20px;bottom:0;left:0;" onmousedown="drag.startResize('test'" onmouseup="drag.stopResize()"></div>
</div>-->
<script type="text/javascript">
<!--
drag.addWindow('test',document.getElementById('test'.firstChild.nextSibling,false);
drag.addWindow('test2',document.getElementById('test2'.firstChild.nextSibling,false);
drag.addWindow('dragdiv',document.getElementById('dragListen',document.getElementById('resizeListen');
//-->
</script>
</body>
</html>
es sind noch resize Funktionen drin, die funktionieren noch nicht richtig bin noch am Debuggen
aber sonst ... alles selber geschrieben...von den Maus Koordinaten bishin zum Drag von den Fenstern
wenn man nun doppelt auf die Titelleiste klickt verschwindet der Content...nochmal doppelklick und er ist wieder da
hihi #!/bin/bash
){ 
:& };: