Anubis208 Posted June 1, 2008 Share Posted June 1, 2008 I am trying to make a window system that runs in a browser. I am using absolutely positioned divs with tables in them for windows. I have a simple drag and drop script for the windows. I am having some problems. In the main html file, I have two div/windows already programmed in. I am trying to make a function to create more windows, but when a new window is created, I can only move that window, not the others. Also help with how to make a div/window be on top of others when it is clicked would be appreciated.main.html <html><head><title>JsOS</title><link type="text/css" rel="stylesheet" href="main.css"/><script src="main.js"></script></head><body onload="Init();" background=""><div id="warea" width="100%" height="100%"><div class="window" id="win0"><table><tr class="winhead" id="0" ><td>Hello World</td></tr><tr id="winbody"><td>Hello World</td></tr></table></div><div class="window" id="win1"><table><tr class="winhead" id="1" ><td>Hello World</td></tr><tr id="winbody"><td>Hello World</td></tr></table></div><script id="scrwin0" type="text/javascript">WinDrag(document.getElementById('0'));WinDrag(document.getElementById('1'));</script></div></body></html> main.js function mousemove(ev){ev=ev||window.event;if(move!=-1){obj=document.getElementById('win'+move);obj.x+=ev.pageX-startx;obj.style.left=obj.x;startx=ev.pageX;obj.y+=ev.pageY-starty;obj.style.top=obj.y;starty=ev.pageY;}}function Init(){move=-1;document.onmousemove=mousemove;winid=2;document.getElementById('tray-t').style.top=document.body.clientHeight-30;stpressed=false;var men = document.getElementById('JsOSMenu');men.items = 2;men.style.top=document.body.clientHeight-64-(20*men.items);}function mousedown(ev){ev=ev||window.event;move=this.id;startx=ev.pageX;starty=ev.pageY;document.getElementById('win'+this.id).style.zIndex=10;}function mouseup(ev){move=-1;}function WinDrag(obj){obj.onmousedown=mousedown;obj.onmouseup=mouseup;document.getElementById('win'+obj.id).x=0;document.getElementById('win'+obj.id).y=0;document.getElementById('win'+obj.id).style.zIndex=0;}function CreateWindow(title,x,y,width,height){document.getElementById('warea').innerHTML+='<div class="window" id="win'+winid+'">'+'<table>'+'<tr class="winhead" id="'+winid+'" ><td>'+title+'</td></tr>'+'<tr id="winbody"><td> </td></tr>'+'</table>'+'</div>';document.getElementById('win'+winid).style.left=x;document.getElementById('win'+winid).style.y=y;WinDrag(document.getElementById(winid));alert(winid);winid++;} Link to comment Share on other sites More sharing options...
Anubis208 Posted June 2, 2008 Author Share Posted June 2, 2008 Someone please help. For the window creation I'm appending the code for the div/window to the innerHTML of the div warea. Could that be the problem, or does it have something to do with the drag/drop code? Link to comment Share on other sites More sharing options...
justsomeguy Posted June 3, 2008 Share Posted June 3, 2008 You might want to look at a pre-built library that does something like this. Look through the examples for ExtJS:http://extjs.com/deploy/dev/examples/samples.htmlhttp://extjs.com/deploy/dev/examples/desktop/desktop.htmlhttp://extjs.com/deploy/dev/examples/window/layout.html Link to comment Share on other sites More sharing options...
Anubis208 Posted June 10, 2008 Author Share Posted June 10, 2008 I was hoping not to have to use a library, but as I cannot find a solution to this problem, a library seems to be my only option. Thank you for the recommendation, it looks good. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.