Drag the Page around

[Dr.CSS]

ever seen the drag JS in action? well you can now, just like desktop window you grab the bar at top and drag it around...
have fun.    http://www.multiintech.com/index.php?page=desktop  the original  http://www.multiintech.com/old/

    mark

[Ron@Spikecity]

Almost scary Mark

[Dr.CSS]

yea, the /old/ page is as close to a desktop application i got, till i found CMSMS "The Worlds Greatest way to Make Web Sites", then i stopped development of that site and stuffed it the /old/ folder, did you clik around, back/forward buttons, minimize/close, dropdown address bar ......

  mark

[baconburgare]

Awesome cool!!! 

Can u have more windows in same site? Like a windows desktop or something? Not sure how to use it but any way, hope u get my point.

*stunned by coolness factor*

[EDIT]

Kinda mean a desktop with several movable windows.

[EDIT AGAIN]

Cant find any minimize maximize thingys. Can only move window around.

[ANOTHER EDIT]

Ah the original site works: http://www.multiintech.com/old/

[Dr.CSS]

the original  http://www.multiintech.com/old/  ...did you read the whole page, should have full explianation of functions
has all the implimentations i had going at the time.. go back and look in the right corner of top bar that you drag see the orange green red buttons thats them... green is supposed to maximize but not working as i would have to make ... well lets not give the secrets away.. HAHAHA.. it's just a bunch of diff. pages that just look like it's closing/minimizing, btw the minimized page has a working clock in the 'system tray' 

it's fun..
        mark
think i might port a full working /old/ to CMSMS....
i've embeded that page into a page on my CMSMS site... http://www.multiintech.com/index.php?page=embeded

[baconburgare]

Like it!

What I was trying to say was that minimize and stuff doesnt work on http://www.multiintech.com/index.php?page=desktop but it works on the other link. But back to my first question. Would it be possible to have several windows on the same page? Like a menu-window, a main-window, a somethingelse-window aso. Sorry if it's explained somewhere, I'm too lazy to read today 

[EDIT]

I mean imagine if visitors could open and drag around the windows they fancy to use. Awesome cool. Especially for windows or game-related sites were u'r used to use that behavour. Wow, it's a web site usage revolution kinda!

[Dr.CSS]

you mean more like this... which i found after i made mine...
http://osx.portraitofakite.com/  clik around that to get the full impact, little oval in the right side of bar rolls the little window up,
mine has calls that are specific to root and handle and i don't know if you can have more then one,, root/handle...

    mark

[baconburgare]

Yes exactly, several windows and possible to drag on top of each other, awesome! Oh well, if it's doable without using flash or some other slowing down applet crap or activeX that no one dare or bother to download.

Wouldnt that be just great if you could do? *hint hint* do it

[EDIT]

I'd be glad to help anyway I can. Pretty familiar with HTML and JS and stuff. But spent my whole life wth VB and ASP when I should have picked PHP

[tsw]

Its doable, but it needs something more. one needs to save window positions between page visits in a cookie and it will be near perfect (take a look at google personalized home page

[Dr.CSS]

JS for drag...

/**************************************************
* dom-drag.js
* 09.25.2001
* www.youngpup.net
* Script featured on Dynamic Drive (http://www.dynamicdrive.com) 12.08.2005
**************************************************
* 10.28.2001 - fixed minor bug where events
* sometimes fired off the handle, not the root.
**************************************************/

var Drag = {

obj : null,

init : function(o, oRoot, minX, maxX, minY, maxY, bSwapHorzRef, bSwapVertRef, fXMapper, fYMapper)
{
o.onmousedown = Drag.start;

o.hmode = bSwapHorzRef ? false : true ;
o.vmode = bSwapVertRef ? false : true ;

o.root = oRoot && oRoot != null ? oRoot : o ;

if (o.hmode  && isNaN(parseInt(o.root.style.left  ))) o.root.style.left  = "0px";
if (o.vmode  && isNaN(parseInt(o.root.style.top  ))) o.root.style.top    = "0px";
if (!o.hmode && isNaN(parseInt(o.root.style.right ))) o.root.style.right  = "0px";
if (!o.vmode && isNaN(parseInt(o.root.style.bottom))) o.root.style.bottom = "0px";

o.minX = typeof minX != 'undefined' ? minX : null;
o.minY = typeof minY != 'undefined' ? minY : null;
o.maxX = typeof maxX != 'undefined' ? maxX : null;
o.maxY = typeof maxY != 'undefined' ? maxY : null;

o.xMapper = fXMapper ? fXMapper : null;
o.yMapper = fYMapper ? fYMapper : null;

o.root.onDragStart = new Function();
o.root.onDragEnd = new Function();
o.root.onDrag = new Function();
},

start : function(e)
{
var o = Drag.obj = this;
e = Drag.fixE(e);
var y = parseInt(o.vmode ? o.root.style.top  : o.root.style.bottom);
var x = parseInt(o.hmode ? o.root.style.left : o.root.style.right );
o.root.onDragStart(x, y);

o.lastMouseX = e.clientX;
o.lastMouseY = e.clientY;

if (o.hmode) {
if (o.minX != null) o.minMouseX = e.clientX - x + o.minX;
if (o.maxX != null) o.maxMouseX = o.minMouseX + o.maxX - o.minX;
} else {
if (o.minX != null) o.maxMouseX = -o.minX + e.clientX + x;
if (o.maxX != null) o.minMouseX = -o.maxX + e.clientX + x;
}

if (o.vmode) {
if (o.minY != null) o.minMouseY = e.clientY - y + o.minY;
if (o.maxY != null) o.maxMouseY = o.minMouseY + o.maxY - o.minY;
} else {
if (o.minY != null) o.maxMouseY = -o.minY + e.clientY + y;
if (o.maxY != null) o.minMouseY = -o.maxY + e.clientY + y;
}

document.onmousemove = Drag.drag;
document.onmouseup = Drag.end;

return false;
},

drag : function(e)
{
e = Drag.fixE(e);
var o = Drag.obj;

var ey = e.clientY;
var ex = e.clientX;
var y = parseInt(o.vmode ? o.root.style.top  : o.root.style.bottom);
var x = parseInt(o.hmode ? o.root.style.left : o.root.style.right );
var nx, ny;

if (o.minX != null) ex = o.hmode ? Math.max(ex, o.minMouseX) : Math.min(ex, o.maxMouseX);
if (o.maxX != null) ex = o.hmode ? Math.min(ex, o.maxMouseX) : Math.max(ex, o.minMouseX);
if (o.minY != null) ey = o.vmode ? Math.max(ey, o.minMouseY) : Math.min(ey, o.maxMouseY);
if (o.maxY != null) ey = o.vmode ? Math.min(ey, o.maxMouseY) : Math.max(ey, o.minMouseY);

nx = x + ((ex - o.lastMouseX) * (o.hmode ? 1 : -1));
ny = y + ((ey - o.lastMouseY) * (o.vmode ? 1 : -1));

if (o.xMapper) nx = o.xMapper(y)
else if (o.yMapper) ny = o.yMapper(x)

Drag.obj.root.style[o.hmode ? "left" : "right"] = nx + "px";
Drag.obj.root.style[o.vmode ? "top" : "bottom"] = ny + "px";
Drag.obj.lastMouseX = ex;
Drag.obj.lastMouseY = ey;

Drag.obj.root.onDrag(nx, ny);
return false;
},

end : function()
{
document.onmousemove = null;
document.onmouseup  = null;
Drag.obj.root.onDragEnd( parseInt(Drag.obj.root.style[Drag.obj.hmode ? "left" : "right"]),
parseInt(Drag.obj.root.style[Drag.obj.vmode ? "top" : "bottom"]));
Drag.obj = null;
},

fixE : function(e)
{
if (typeof e == 'undefined') e = window.event;
if (typeof e.layerX == 'undefined') e.layerX = e.offsetX;
if (typeof e.layerY == 'undefined') e.layerY = e.offsetY;
return e;
}
};

HTML....



MultiInTechMultiple Integrated Technologies






have fun....
i have a program on my PC called winroll that lets you roll the window up into the title bar, too bad it can't be made to work on web sites.. screenshot...

    mark

[attachment deleted by admin]