DHTML Window Widget: Internal close button

[guvenck]

1) Script Title: DHTML Window Widget

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

3) Describe problem:

Great script you have here. I chose the iframe option for my site and it works great with my site. You are definately my No.1 DHTML site on the web!

How can I add a close button to the page inside the window (after my iframe has been processed) internally?

Like: Your data has been processed. Click the button below to close this window.

I tried window.close, myuniquevar.close even myuniqueid.close but none of them worked.

<input type="button" value="Close" onClick="?.close()">

[jscheuer1]

There is at least one typo in the instructions for this on the demo page. It is not close() (that is a reserved function) it is hide() - like so:

myuniquevar.hide()

[guvenck]

I use the iframe method and I get following JS Console error: "myuniquevar is not defined." That's because I define the variable

myuniquevar = dhtmlwindow.open(...)

in opener window and the file in iframe does not know this variable.

[jscheuer1]

Try:

parent.myuniquevar.hide();

[guvenck]

Aah That worked Wouldn't it be nice to add this info to the script page?

[guvenck]

Hi, I have another question about DHTML Window Widget. I use the iframe method and the page I am loading is a PHP file that brings some dynamic content from MySQL database.

I load the opener page, click the link and my dhtml window appears perfect, I have a form there, I submit it and it gets processed, giving me a thank you message and I close the dhtml windows with parent.myuniquevar.hide()

Then, when I click that link again, as the link refers to same uniqueID's, I see that previous page has been somehow cached. I wait for the new dynamic page to load and it overrides the "cached one". I don't want the visitor to see this cached one page and want to show him directly the fresh dynamic page. So, somehow, I need to reset the previous data. Hope I could explain what I mean.

2- Can the contents be seen when dragging the window?

3- Can dragging be disabled?

[cjpopp]

Ok.. I'm a humble beginner.. where would I put this code change to make it so I can close the window from within the iframed content?

[ddadmin]

Please start a new thread when asking a new question, even for the same script. This makes it easier for people reading and responding.

I'll try and get to a few of the new questions above here.

2) There's actually a reason the script hides the iframe content while the window is being dragged- it makes the dragging process more smooth in some browsers. But to disable it, just delete these two lines inside the .js file:

t.style.backgroundColor="#F8F8F8" //colorize and hide content div (while window is being dragged)
t.contentarea.style.visibility="hidden"

3) Sure, just find the three lines inside the .js file, and delete the highlighted portion in red:

if (etarget.className=="drag-handle") //if target element is "handle" div
d.move(etarget._parent, e)
else if (etarget.className=="drag-resizearea") //if target element is "resize" div

That should do it.

Cjppop, sure, a button within the iframe page to close the popup window would look something like:

<input type="button" value="Ok" name="B1" onClick="parent.mywindow.hide()" /></p>

where "mywindow" is the unique variable you assigned to dhtmlwindow.open() when invoking it.

[guvenck]

Hi ddadmin, many thanks for your answer!

I uncommented the two lines to enable visible content when dragging. However, this caused a strange behaviour when trying to resize.

I use Mozilla Firefox 1.5.0.9.

opened the DHTML Window via onClick. Everything looks fine when dragging.
Then, using the minimize button, minimized the DHTML Window.
Using the restore button, restored the window again > Something doesn't look nice with the lower handle of the window where the resize gadget is.
Try to resize the window > Mouse gets sticky and resizes without clicking the left mouse button. Then it releases itself.

You may want to try for yourself.

[ddadmin]

Ah looks like there's another good reason to hide the iframe when it's being dragged- basically, if not hidden and when resizing the window, if your mouse inadvertantly moves into the iframe content, the script stops registering the resize action, and the window acts "sticky". This is because the iframe content, such as Google.com, is an external domain, and JavaScript from your page cannot cross over to another domain.

There may be a way around this, but right now I don't see a quick one to it.

Edit: BTW, regarding disabling dragging of a window, I've updated my post above on it. There was a slight error with the changes I posted.