DHTML Window Widget Internal Close Text or Button [Archive]

View Full Version : 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/dynamicindex8/dhtmlwindow/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:

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/store/proddetail.php?prod=FlaxSUMMER2009-TieCoverUp

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

<!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:

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:

<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.

dmwhipp

02-02-2009, 09:54 PM

I gave it a shot here:
https://www.gidgetsclothing.com/store/proddetail.php?prod=FlaxSUMMER2009-TieCoverUp

It doesn't work in IE6 or FireFox3.0 and causes an error in IE6. I also tried center instead of middle with the same effect.

ddadmin

02-03-2009, 08:24 AM

Ok, try calling the moveTo() function explicitly after you've opened the DHTML window. This should work for sure (code in red is new):

<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'); gidgets.moveTo('middle', 5); return false">

dmwhipp

02-03-2009, 02:29 PM

It works perfectly, but gives and error in IE6. I had posted separately about the issues of the window widget appearing beneath the menu and select element in a separate thread: http://www.dynamicdrive.com/forums/showthread.php?t=41298

jscheur1 helped me figure out the z-index settings to correct this and came up with this solution - adding it to my proddetail.php page - for IE6 which keeps the window widget away from the select element:



Since my client's site is retail, I'll stick with that as I don't want any page errors to cause worries to potential customers.

I know xhtml well and am pretty good at the aesthetic aspect of design, but at this point don't know the first thing about writing scripts. It's pretty amazing that you not only offer free scripts for webmasters here that you take the time and trouble to test in major browsers, but that you additionally spend so much time helping people like myself implement them and get them working. Do you have a link where I can make a small donation to show my thanks?

Deborah

ddadmin

02-04-2009, 03:30 AM

Hi:
Are you saying the last code I posted above throws an error in IE6 for you? Firing up your page in IE6 and launching a window, I get no errors btw.

Thanks, we just like helping out people and tackling coding issues. If you want to give back, please make a donation to WWF (http://www.wwf.org/) (or your favorite charity).

dmwhipp

02-04-2009, 05:06 PM

Hi,
I was going to create another test page to show you the IE6 error, but don't know how to since it's a php created by the shopping cart and I would have to remove the css that is making it work correctly right now.

I believe the error was "object 'gidgets' not found"

But with all the help I got here, my client is very pleased with the solution and getting very positive feedback on the new site design and this feature in particular.

I'll be stopping by SecondHarvest.org.

Thanks again,
Deborah