DHTML Window Widget Internal Close Text or Button

**dmwhipp** · 02-01-2009, 05:30 PM

1) Script Title: DHTML Window Widget v1.1

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

3) Describe problem: I would like to add an internal close method, either text or button

I am using Window 4 with div and I've tried to follow the other thread I found on this but could not get it to work and frankly was getting confused.

Here is my window:
http://www.gidgetsclothing.com/test.html

I know I need to add code to the window file to close it (the window here is 2009summer.html), but do I also need to add code to the page calling the window (test.html)?

Thanks,
Deborah

**ddadmin** · 02-02-2009, 03:22 AM

Did you managed to get this to work already? Looking at your page, I see a DHTML window with a working close button inside it.

**dmwhipp** · 02-02-2009, 04:59 AM

Unfortunately no.

This is my first time using this window and I may be missing something basic.

Here is the code I use to open the window:

*****

<a class="swatch" href="#" onclick="gidgetswindow=dhtmlwindow.open('swatchbox', 'ajax', '/windowfiles/windows/2009summer.html', 'FlaxSwatches', 'width=470px,height=260px,center=1,resize=0,scrolling=1'); return false">
<img src="/windowfiles/windows/2009summer_th.jpg" width="275" height="32" border="0" alt="Flax Swatches" /></a><br />
<a href="#" onclick="gidgetswindow=dhtmlwindow.open('swatchbox', 'ajax', '/windowfiles/windows/2009summer.html', 'Flax Swatches', 'width=470px,height=260px,center=1,resize=0,scrolling=1'); return false">
Click to Enlarge Swatches</a></center><br /><br />

*****

And in the window - 2009summer.html - here is the code I inserted to close it:

*****
<input type="button" value="Close" onclick="parent.gidgetswindow.hide()">

*****

It worked great in FF, but did not close and caused an error in IE6 which is, of course, what my client uses.

Do you see any obvious errors?

Thanks,
Deborah

**ddadmin** · 02-02-2009, 06:03 AM

The code looks correct, and should work in IE6 actually. I just tried visiting your page again, but the internal close button is no longer there.

**dmwhipp** · 02-02-2009, 06:59 AM

I just tested it again and it is still throwing an error.

Here is the complete code for the page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Flax Clothes at Gidgets: Flax Swatches</title>
<meta name="description" content="Linen flax swatches." />
<meta name="keywords" content="gidgets,select,flax clothing,swatches,colors,material,view,samples,enlarge," />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="robots" content="all" />
<link rel="stylesheet" type="text/css" href="https://www.gidgetsclothing.com/gidgetcss.css" />
</head>

<body>

<table bgcolor="#ffffff" width="100%" cellpadding="0" cellspacing="0" border="0" align="center">
<tr><td><center>
<h5>Summer Flax 2009</h5>
<font class="linen">
100% Lightweight Linens</font><br /><br />
<img src="https://www.gidgetsclothing.com/windowfiles/windows/2009summer.jpg" width="450" height="200" border="0" alt="Flax Swatch" /><br />
<input type="button" value="Close" onclick="parent.gidgets.close()">

</center>
</td></tr></table>

</body>
</html>

I tried it with close() and hide() and with both I got the following error:

Line: 21
Char: 1
Error: 'parent.gidgets' is null or not an object
Code: 0

Here is the code I'm using to call the window:

<a class="swatch" href="#" onclick="gidgets=dhtmlwindow.open('swatchbox', 'ajax', '/windowfiles/windows/2009summer.html', 'FlaxSwatches', 'width=470px,height=260px,center=1,resize=0,scrolling=1'); return false">
<img src="/windowfiles/windows/2009summer_th.jpg" width="275" height="32" border="0" alt="Flax Swatches" /><br />
Click to Enlarge Swatches</a></center><br /><br />

Since it's still not working in IE, I'm going to have to remove it for now, but will try to create a test page for you to view it on tomorrow if you don't mind helping me figure this out.

Thanks,
Deborah

**ddadmin** · 02-02-2009, 07:36 AM

Ah wait, I didn't realize you're using the Ajax method of opening the window, and not the IFRAME. Only in the later do you have to go up to the parent object first to access close(). So in your case, you should just use:

Code:

gidgets.close()

p,sL Please try and format any code in your post using the CODE tags. It just makes it easier to read.

**dmwhipp** · 02-02-2009, 04:58 PM

Thanks for your help with this. I did a test page and it worked perfectly, but it still is not working on pages called by the shopping cart. I have one product pointing to the page with the close code here:

https://www.gidgetsclothing.com/stor...009-TieCoverUp

Here is the code I'm using to call the window now:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head>
<title>Flax Clothes at Gidgets: Flax Swatches</title>
<meta name="description" content="Linen flax swatches." />
<meta name="keywords" content="gidgets,select,flax clothing,swatches,colors,material,view,samples,enlarge," />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta name="robots" content="all" />
<link rel="stylesheet" type="text/css" href="/windowfiles/dhtmlwindow.css" />
</head>

<body>


<center>
<h5>Summer Flax 2009</h5>
<font class="linen">
100% Lightweight Linens</font><br /><br />
<img src="/windowfiles/windows/2009summer.jpg" width="460" height="200" border="0" alt="Flax Swatch" /><br />

<input type="button" value="Close" onclick="gidgets.close()" />


</center>


</body>
</html>

The error from IE6 for this is:
Line: 21
Char: 1
Error: 'gidgets' is undefined

It works perfectly in FireFox. Does it have something to do with the fact that the code for opening the page is being called by php from my client's shopping cart?

Thanks for all of your help on this.
Deborah

**ddadmin** · 02-02-2009, 07:09 PM

Hmmm it should work in IE, though I can confirm it doesn't on your page. It certainly does in the DHTML window demo for me (Ajax mode, "gidgets" as the variable name, and "gidgets.close()" as the close button code). This is bizzare. It shouldn't have anything to do with how your page is being called, as long as the final output in the page's source is valid JavaScript.

Just throwing things out there, but try changing the variable "gidgets" on both the parent page and inside the close button code to something else, such as "ajaxwin". If that doesn't work, you could always switch to the IFRAME mode of opening up the page, and for your close button, try the code:

Code:

parent.variablename.close()

**dmwhipp** · 02-02-2009, 08:05 PM

I gave that a try and it still didn't work. Freaky, huh? On the bright side, I'm glad I had the coding correct.

Actually, my client is pretty happy with it now except for the positioning. She would like it to be centered horizontally, but at the top of the page. That way it won't cover up as much of the product and also won't interfere with the select element.

Any idea on how to accomplish that?

Thanks!
Deborah

**ddadmin** · 02-02-2009, 08:42 PM

Well, the keyword "middle" can be used when specifying either the left or top properties, so something like:

Code:

<a class="swatch" href="#" onclick="gidgets=dhtmlwindow.open('swatchbox', 'ajax', '/windowfiles/windows/2009summer.html', 'FlaxSwatches', 'width=470px,height=260px,top=15px,left=middle,resize=0,scrolling=1'); return false">

should work.

Thread: DHTML Window Widget Internal Close Text or Button

Thread Tools

Search Thread

DHTML Window Widget Internal Close Text or Button

The Following User Says Thank You to ddadmin For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions