DHTML Window widget - OnHide Event & Open Hidden

1) Script Title:
DHTML Window widget

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

3) Describe problem:

I have a page that I load via this GREAT tool/script but the page is a little heavy so ... I wanted to just load it once and then use hide/show when it is needed. I would use the existing method to refresh its contents prior to showing it but I do not see how to load it the first time with it already being hidden. Is there a way to do that?

Also, there is a way to be able to execute a function when the window closes which is great but is there a way to do the same when the window is hidden?

Thank you very much for any help!

You can easily overwrite the default behavior of "close" in DHTML window so it acts like hide instead. On the top of your page after the reference to dhtmlwndow.js, add the below code in red:

Code:

---

<script type="text/javascript" src="windowfiles/dhtmlwindow.js">

/***********************************************
* DHTML Window Widget- © Dynamic Drive (www.dynamicdrive.com)
* This notice must stay intact for legal use.
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

</script>

<script type="text/javascript">

dhtmlwindow.close=function(t){
        var closewinbol=t.onclose()
        if (closewinbol)
                t.hide()
}

</script>

---

Now clicking on the "x" icon will hide the window instead of actually close it, so you can revive it with the method show(). Also, the action still invokes the onclose() custom event handler.

Thanks! I will try it.

Is there any way to load it "hidden" by default? Also, can the page (window) tell when it is being shown again?

Thanks for all of your help!

You could just call hide() immediately after opening a DHTML window to hide it, such as:

Code:

---

var googlewin=dhtmlwindow.open("googlebox", "iframe", "http://images.google.com/", "#1: Google Web site", "width=590px,height=350px,resize=1,scrolling=1,center=1")
googlewin.hide()

---

If if you want the DHTML window to be "truly" hidden from the get go until show() is called, you'll need to modify inside dhtmlwindow.js the line in red:

Code:

---

        t.isResize(getValue("resize")) //Set whether window is resizable
        t.isScrolling(getValue("scrolling")) //Set whether window should contain scrollbars
        t.style.visibility="visible"
        t.style.display="block"

---

Change "block" to "none".

Quote:

---

Also, can the page (window) tell when it is being shown again?

---

Well, one way is just to test whether the DHTML window's "display" property is set to "block". If so, it means it's shown. So for example:

Code:

---

var googlewin=dhtmlwindow.open("googlebox", "iframe", "http://images.google.com/", "#1: Google Web site", "width=590px,height=350px,resize=1,scrolling=1,center=1")
googlewin.show()
alert(googlewin.style.display) //"none"
googlewin.hide()
alert(googlewin.style.display) //"block"

---

First of all ... thank you very much for your help ... really.

The one thing that I think you misunderstood was ... I wanted to know if there is a way for the page that is being displayed in the window to know when it is being shown again so that it can take action. Alternativly if the parent page can reach down into the child it could potentially force an action.

The page that I want to display is rather "heavy" (that is why I do not want to reload it) and when it gets shown again I want to be able to make it refresh itself from a database. This I can do but I do not know how it can tell that it is being shown again.

If I understood you correctly then, basically you want to reload the page contained inside the DHTML Window whenever show() is called. Assuming the window is IFRAME mode based, inside dhtmlwindow.js file, add to the default code the part in red:

Code:

---

show:function(t){
        if (t.isClosed){
                alert("DHTML Window has been closed, so nothing to show. Open/Create the window again.")
                return
        }
        if (t.lastx) //If there exists previously stored information such as last x position on window attributes (meaning it's been minimized or closed)
                dhtmlwindow.restore(t.controls.firstChild, t) //restore the window using that info
        else
                t.style.display="block"
        this.setfocus(t)
        t.state="fullview" //indicate the state of the window as being "fullview"
        alert(window.frames["_iframe-"+t.id].document.body.innerHTML)
        window.frames["_iframe-"+t.id].location.reload()
},

---

What this does is that whenever you call dhtmlwindowinstance.show(), you'll now get an alert of the full contents of the page contained inside the window (for illustration purposes), then the page reloads. Let me know if that answers the question.

Almost ... what I am trying to do is cause the page to postback on a show so that it refreshes itself when the show happens based on a new ID value.

What I was thinking was to have a hidden field on the page that holds the ID of the record I want to get and then when the page refreshes it woudl read that hidden field and then get the data etc.

With what you describe I get the feeling that the page will simply reload based on the URL that it was set to. Right?

Sure, what I had posted was mainly to illustrate how the concept works. You can transform it to an actual postback function by replacing the two lines in red I had posted earlier inside function show() with the below instead:

Code:

---

googlewin.onshow=function(winpage){
        alert(winpage.document.getElementById("myname").value)
}

---

This creates a postback onshow() function similar to onclose() that is executed whenever show() is called, and is passed a parameter that references the window object of the page contained in the DHTML window. With that said, the below example alerts the value of a form field inside the DHTML window whenever show() is called:

Code:

---

var googlewin=dhtmlwindow.open("googlebox", "iframe", "test.htm", "#1: Google Web site", "width=590px,height=350px,resize=1,scrolling=1,center=1")

googlewin.onclose=function(){ //Run custom code when window is being closed (return false to cancel action):
return window.confirm("Close window 1?")
}

googlewin.onshow=function(winpage){
        alert(winpage.document.getElementById("myname").value)
}

---

Script Title: DHTML Window Widget (v1.1)

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

I have a page which is a little heavy and takes some time to load.

I want the DHTML Window widget to apper as a popup after the page completely loaded successfuly.

Or

I want the DHTML Window widget to appear as a popup after a delay of 10 seconds.

Is there a way to do this?

davidjohny, please repost your question as a new thread, since you're asking a question of your own.