DHTML Window widget (v1.1) help.

[EISD]

1) Script Title: DHTML Window widget (v1.1)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex8/dhtmlwindow/index.htm

3) Describe problem: :confused:

I'd like to know if its possible to add a minimize event that handles the minimize like the one shown here:
http://prototype-window.xilinus.com/PWC-OS/ (completed)

need help getting the functions to work properly i.e: minimize and maximize shouldnt conflict.

browser compatibility.

styling of the control area.

thank you for all of your time!

[EISD]

I've managed to make the minimize block stack horizontally.



minimize:function(button, t){
dhtmlwindow.rememberattrs(t)
button.setAttribute("src", dhtmlwindow.imagefiles[2])
button.setAttribute("title", "Restore")
t.state="minimized" //indicate the state of the window as being "minimized"
t.contentarea.style.display="none"
t.statusarea.style.display="none"
if (typeof t.minimizeorder=="undefined"){ //stack order of minmized window on screen relative to any other minimized windows
dhtmlwindow.minimizeorder++ //increment order
t.minimizeorder=dhtmlwindow.minimizeorder
}
t.style.width="175px"
var windowspacing=t.minimizeorder*185 //spacing (gap) between each minmized window(s)
t.style.top=96.3+"%"
t.style.left=windowspacing-t.minimizeorder-240+"px"


now I'm trying to dissable the move function


move:function(t, e){
t.style.left=dhtmlwindow.distancex+dhtmlwindow.initx+"px"
t.style.top=dhtmlwindow.distancey+dhtmlwindow.inity+"px"
},


while the dhtml windows are minimized.

Also does anyone have any ideas on how to add a maximize (full window)
and tie it up to work?

[EISD]

else if (t.state=="maximized" && t.controls.firstChild.title=="Restore"){ //If window exists and is currently maximized?
t.controls.firstChild.setAttribute("src", dhtmlwindow.imagefiles[3]) //Change "restore" icon within window interface to "maximize" icon
t.controls.firstChild.setAttribute("title", "Maximize")
t.state="maximized" //indicate the state of the window as being "fullview"
}

...

maximize:function(button, t){
var tracker=0;
dhtmlwindow.rememberattrs(t)
button.setAttribute("src", dhtmlwindow.imagefiles[3])
button.setAttribute("title", "Restore")
t.state="maximized" //indicate the state of the window as being "maximized"
t.contentarea.style.display="block"
t.statusarea.style.display="block"
t.style.height=
t.style.width="100%"
t.style.top="-3px"
t.style.left="-3px"
tracker=2
},


I got the maximize button working, incorrectly, but working.

I have a small (quite big problem) trying to figure out how to make the icons switch individually.

[EISD]

minimize:function(button, t){
dhtmlwindow.rememberattrs(t)
button.setAttribute("src", dhtmlwindow.imagefiles[2])
button.setAttribute("title", "Restore")
t.state="minimized" //indicate the state of the window as being "minimized"
t.contentarea.style.display="none"
t.statusarea.style.display="none"
if (typeof t.minimizeorder=="undefined"){ //stack order of minmized window on screen relative to any other minimized windows
dhtmlwindow.minimizeorder++ //increment order
t.minimizeorder=dhtmlwindow.minimizeorder
}
t.style.width="175px"
var windowspacing=t.minimizeorder*185 //spacing (gap) between each minmized window(s)
t.style.top=96.3+"%"
t.style.left=windowspacing-t.minimizeorder-240+"px"
},

maximize:function(button, t){
dhtmlwindow.rememberattrs(t)
button.setAttribute("src", dhtmlwindow.imagefiles[2])
button.setAttribute("title", "Restore")
t.state="maximized" //indicate the state of the window as being "maximized"
t.contentarea.style.display="block"
t.statusarea.style.display="block"
t.style.height=dhtmlwindow.docheight-t.handle.offsetHeight-40+"px"
t.style.width="100%"
t.style.top="-3px"
t.style.left="-3px"
},

restore:function(button, t){
if(t.state=="maximized"){
dhtmlwindow.getviewpoint()
button.setAttribute("src", dhtmlwindow.imagefiles[3])
button.setAttribute("title", "Maximize")
t.state="fullview" //indicate the state of the window as being "fullview"
t.style.display="block"
t.contentarea.style.display="block"
if (t.resizeBool) //if this window is resizable, enable the resize icon
t.statusarea.style.display="block"
t.style.left=parseInt(t.lastx)+dhtmlwindow.scroll_left+"px" //position window to last known x coord just before minimizing
t.style.top=parseInt(t.lasty)+dhtmlwindow.scroll_top+"px"
t.style.width=parseInt(t.lastwidth)+"px"
}
else if(t.state=="minimized"){
dhtmlwindow.getviewpoint()
button.setAttribute("src", dhtmlwindow.imagefiles[0])
button.setAttribute("title", "Minimize")
t.state="fullview" //indicate the state of the window as being "fullview"
t.style.display="block"
t.contentarea.style.display="block"
if (t.resizeBool) //if this window is resizable, enable the resize icon
t.statusarea.style.display="block"
t.style.left=parseInt(t.lastx)+dhtmlwindow.scroll_left+"px" //position window to last known x coord just before minimizing
t.style.top=parseInt(t.lasty)+dhtmlwindow.scroll_top+"px"
t.style.width=parseInt(t.lastwidth)+"px"
}

},

having minor problems getting the icons to reset when window is maximized and you minimize, it will show a restore button for both the minimize and maximize.

[EISD]

still need help fixing the control buttons, they behave randomly depending on what you click first :(

also still working on removing the move function while the dhtmlwindow is minimized

the current script in its current buggy glory can be seen live at:

http://80.221.7.8/

note: to save on space i had to strip the
// -------------------------------------------------------------------
// DHTML Window Widget- By Dynamic Drive, available at: http://www.dynamicdrive.com
// -------------------------------------------------------------------

on the txt file

[ddadmin]

Do you have an online example of what you have so far? As far as recreating the minimize dock you cited in that other link, it is a rather big change, so it's unlikely I'll be able to help you create it from scratch. Depending on what you have so far already though, I may be able to help you with issues you're having with the changes.

p.s: Please don't start multiple threads on the same question, it just makes it harder for others to help you. I'm referring to this thread: http://www.dynamicdrive.com/forums/showthread.php?t=45711

[EISD]

sorry about that. i'm kind of desperate to get this working - my way - :D

uhm i have a test server runing at the following address: http://80.221.7.8/

there you can see a stable script so to speak.

I'm trying to mod the DD script to behave like OS windows.

[EISD]

so anyone have any ideas?

[ddadmin]

It's hard to know where to start as far as extending what you have so far with what you have in mind, since based on your page I don't see any of the dock being implemented yet. In other words, it seems like you're asking for basically help on creating the interface from scratch. The scope of what you're asking probably makes this request much more realistic as a Paid Projects request (http://www.dynamicdrive.com/forums/forumdisplay.php?f=29).

[EISD]

the script does the positioning of the minimized window. in my mind it seems obvious there should be a way to dissable the move function while the window is minimized. if that happened and i got a way to make the windows minimize and use a proper t.style.top=docheight - x pixels. to minimize into the "dock" thats made by the "menu bar". its should be an optical illusion that works well.

[EISD]

any way i managed to make the things minimize and not move with a simple if(t.state!="minimized"){(move:function)}

now i'd just like help getting all the other things debugged if anyone wants to have a learning experience with me then by all means i'd like your help.

you're able to see the script in action at: http://80.221.7.8/

and if anyone can help me figure out why it's not working with firefox that would be also of help.

thanks,
EISD

[EISD]

need a little help debugging the attatched script. particularly with:



minimize:function(button, t){
dhtmlwindow.rememberattrs(t)
if(t.state!="maximized"){
button.setAttribute("src", dhtmlwindow.imagefiles[2])
button.setAttribute("title", "Restore")
t.state="minimized"
t.contentarea.style.display="none"
t.statusarea.style.display="none"
if (typeof t.minimizeorder=="undefined"){
dhtmlwindow.minimizeorder++
t.minimizeorder=dhtmlwindow.minimizeorder
}
//t.controls.style.visibility="hidden"
t.style.width="175px"
var windowspacing=t.minimizeorder*185
t.style.top=96.2+"%" // need to use something like documentheight - 40 pixels
t.style.left=windowspacing-t.minimizeorder-240+"px"
}
},

maximize:function(button, t){
dhtmlwindow.rememberattrs(t)
if(t.state!="minimized"){
button.setAttribute("src", dhtmlwindow.imagefiles[2])
button.setAttribute("title", "Restore")
t.state="maximized"
t.contentarea.style.display="block"
t.statusarea.style.display="none"
t.contentarea.style.height=dhtmlwindow.docheight-t.handle.offsetHeight-45+"px" //is buggy
t.style.width="100%"
t.style.top="-3px"
t.style.left="-3px"
}
},

restore:function(button, t){ //this while thing needs to be revised by a javascript pro
if(t.state=="maximized"){
dhtmlwindow.getviewpoint()
button.setAttribute("src", dhtmlwindow.imagefiles[3])
button.setAttribute("title", "Maximize")
t.state="fullview"
t.style.display="block"
t.contentarea.style.display="block"
if (t.resizeBool)
t.statusarea.style.display="block"
t.style.left=parseInt(t.lastx)+dhtmlwindow.scroll_left+"px"
t.style.top=parseInt(t.lasty)+dhtmlwindow.scroll_top+"px"
t.style.width=parseInt(t.lastwidth)+"px"
}
else if(t.state=="minimized"){
dhtmlwindow.getviewpoint()
button.setAttribute("src", dhtmlwindow.imagefiles[0])
button.setAttribute("title", "Minimize")
t.state="fullview"
t.style.display="block"
t.contentarea.style.display="block"
if (t.resizeBool)
t.statusarea.style.display="block"
t.style.left=parseInt(t.lastx)+dhtmlwindow.scroll_left+"px"
t.style.top=parseInt(t.lasty)+dhtmlwindow.scroll_top+"px"
t.style.width=parseInt(t.lastwidth)+"px"
}
},

[EISD]

If anybody can take a look at the code in the zip file and help me figure out how to get the minimized dhtml window to stay at 3002 z-index when minimized.

the current bug i have is when i set it to t.style.zIndex=3002 without a while (t.state == "minimized"){ t.style.zIndex=3002} is that when the minimized "handle" is clicked it reverts to another z-index. and if i use the white statement it runs down the browser.

any and all help is appreciated!

[EISD]

damn i had an epiphany!!!!!!



setfocus:function(t){
if (t.state != "minimized"){
this.zIndexvalue++
t.style.zIndex=this.zIndexvalue
t.isClosed=false
this.setopacity(this.lastactivet.handle, 0.5)
this.setopacity(t.handle, 1)
this.lastactivet=t
}
else if(t.state == "minimized"){
t.style.zIndex=3002
t.isClosed=false
this.setopacity(this.lastactivet.handle, 0.5)
this.setopacity(t.handle, 1)
this.lastactivet=t
}
},


that fixes the zindex problem!

[EISD]

now all i need is help with the min,max,restore functions they're quite buggy.


minimize:function(button, t){
dhtmlwindow.rememberattrs(t)
if(t.state!="maximized"){
button.setAttribute("src", dhtmlwindow.imagefiles[2])
button.setAttribute("title", "Restore")
t.state="minimized"
t.contentarea.style.display="none"
t.statusarea.style.display="none"
if (typeof t.minimizeorder=="undefined"){
dhtmlwindow.minimizeorder++
t.minimizeorder=dhtmlwindow.minimizeorder
}
t.handle.style.cursor="arrow"
t.controls.style.visibility="visible"
t.style.width="175px"
var windowspacing=t.minimizeorder*185
t.style.left=windowspacing-t.minimizeorder-240+"px"
t.style.top="3px"
t.style.zIndex=3002
}
},

maximize:function(button, t){
dhtmlwindow.rememberattrs(t)
if(t.state!="minimized"){
button.setAttribute("src", dhtmlwindow.imagefiles[2])
button.setAttribute("title", "Restore")
t.state="maximized"
t.contentarea.style.display="block"
t.statusarea.style.display="none"
t.contentarea.style.height=dhtmlwindow.docheight-t.handle.offsetHeight+"px"
t.style.width="100%"
t.style.top="30px"
t.style.left="-2px"
t.controls.style.visibility="visible"
}
},

restore:function(button, t){
if(t.state=="maximized"){
dhtmlwindow.getviewpoint()
button.setAttribute("src", dhtmlwindow.imagefiles[3])
button.setAttribute("title", "Maximize")
t.state="fullview"
t.style.display="block"
t.contentarea.style.display="block"
if (t.resizeBool)
t.statusarea.style.display="block"
t.style.left=parseInt(t.lastx)+dhtmlwindow.scroll_left+"px"
t.style.top=parseInt(t.lasty)+dhtmlwindow.scroll_top+"px"
t.style.width=parseInt(t.lastwidth)+"px"
t.controls.style.visibility="visible"
}
else if(t.state=="minimized"){
dhtmlwindow.getviewpoint()
button.setAttribute("src", dhtmlwindow.imagefiles[0])
button.setAttribute("title", "Minimize")
t.state="fullview"
t.style.display="block"
t.handle.style.cursor="move"
t.contentarea.style.display="block"
if (t.resizeBool)
t.statusarea.style.display="block"
t.style.left=parseInt(t.lastx)+dhtmlwindow.scroll_left+"px"
t.style.top=parseInt(t.lasty)+dhtmlwindow.scroll_top+"px"
t.controls.style.visibility="visible"
t.style.zIndex=100
}
},

[EISD]

http://onestudio.webs.com/test/index.html

[EISD]

rememberattrs:function(t){
this.getviewpoint()
t.lastx=parseInt((t.style.left || t.offsetLeft))-dhtmlwindow.scroll_left
t.lasty=parseInt((t.style.top || t.offsetTop))-dhtmlwindow.scroll_top
t.lastwidth=parseInt(t.style.width)
t.lastheight=parseInt(t.style.height)
},

move:function(t, e){
if(t.state!="minimized"){
t.style.left=dhtmlwindow.distancex+dhtmlwindow.initx+"px"
t.style.top=dhtmlwindow.distancey+dhtmlwindow.inity+"px"
}

},
resize:function(t, e){
t.style.width=Math.max(dhtmlwindow.width+dhtmlwindow.distancex, 150)+"px"
t.contentarea.style.height=Math.max(dhtmlwindow.contentheight+dhtmlwindow.distancey, 100)+"px"
},

enablecontrols:function(e){
var d=dhtmlwindow
var sourceobj=window.event? window.event.srcElement : e.target
if (/Minimize/i.test(sourceobj.getAttribute("title")))
d.minimize(sourceobj, this._parent)
else if (/Restore/i.test(sourceobj.getAttribute("title")))
d.restore(sourceobj, this._parent)
else if (/Maximize/i.test(sourceobj.getAttribute("title")))
d.maximize(sourceobj, this._parent)
else if (/Close/i.test(sourceobj.getAttribute("title")))
d.close(this._parent)
return false
},

minimize:function(button, t){
dhtmlwindow.rememberattrs(t)
if(t.state!="maximized"){
button.setAttribute("src", dhtmlwindow.imagefiles[2])
button.setAttribute("title", "Restore")
t.state="minimized"
t.contentarea.style.display="none"
t.statusarea.style.display="none"
if (typeof t.minimizeorder=="undefined"){
dhtmlwindow.minimizeorder++
t.minimizeorder=dhtmlwindow.minimizeorder
}
t.handle.style.cursor="arrow"
t.controls.style.visibility="visible"
t.style.width="175px"
var windowspacing=t.minimizeorder*185
t.style.left=windowspacing-t.minimizeorder-240+"px"
t.style.top="3px"
t.style.zIndex=3002
}
},

maximize:function(button, t){
dhtmlwindow.rememberattrs(t)
if(t.state!="minimized"){
button.setAttribute("src", dhtmlwindow.imagefiles[2])
button.setAttribute("title", "Restore")
t.state="maximized"
t.contentarea.style.display="block"
t.statusarea.style.display="none"
t.contentarea.style.height=dhtmlwindow.docheight-t.handle.offsetHeight+"px"
t.style.width="100%"
t.style.top="30px"
t.style.left="-2px"
t.controls.style.visibility="visible"
}
},

restore:function(button, t){
if(t.state=="maximized"){
dhtmlwindow.getviewpoint()
button.setAttribute("src", dhtmlwindow.imagefiles[3])
button.setAttribute("title", "Maximize")
t.state="fullview"
t.style.display="block"
t.contentarea.style.display="block"
if (t.resizeBool)
t.statusarea.style.display="block"
t.style.left=parseInt(t.lastx)+dhtmlwindow.scroll_left+"px"
t.style.top=parseInt(t.lasty)+dhtmlwindow.scroll_top+"px"
t.style.width=parseInt(t.lastwidth)+"px"
t.style.height=parseInt(t.lastheight)+"px"
t.controls.style.visibility="visible"
}
else if(t.state=="minimized"){
dhtmlwindow.getviewpoint()
button.setAttribute("src", dhtmlwindow.imagefiles[0])
button.setAttribute("title", "Minimize")
t.state="fullview"
t.style.display="block"
t.handle.style.cursor="move"
t.contentarea.style.display="block"
if (t.resizeBool)
t.statusarea.style.display="block"
t.style.left=parseInt(t.lastx)+dhtmlwindow.scroll_left+"px"
t.style.top=parseInt(t.lasty)+dhtmlwindow.scroll_top+"px"
t.style.width=parseInt(t.lastwidth)+"px"
t.controls.style.visibility="visible"
t.style.zIndex=100
}
},


t.lastheight gives an error for some reason even though it looks like it should work.

if anyone wants to help me figure out how to get the restore function to work properly on remember last known height before maximize/close.