Willkommen in der Webstatt Zum Webstatt Blog und Stories
nuit nuit am 29.04.07 04:40

WindowScript v.0.1
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 :D

aber sonst ... alles selber geschrieben...von den Maus Koordinaten bishin zum Drag von den Fenstern :D
wenn man nun doppelt auf die Titelleiste klickt verschwindet der Content...nochmal doppelklick und er ist wieder da :D hihi

netcup.de Warum gibt es hier Werbung?
Creative Commons Lizenzvertrag
Alle Inhalte des Webstatt-Archivs stehen unter einer Creative Commons Namensnennung - Weitergabe unter gleichen Bedingungen 3.0 Unported Lizenz.

Impressum & Kontakt