Jump to content

Javascript Windowing System Help


Anubis208
 Share

Recommended Posts

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...