PDA

View Full Version : Window widget with Google maps problems



xmoravej
01-06-2008, 10:18 PM
1) Script Title:
DHTML Window widget

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

3) Describe problem:

Hello,
I was so delighted to find the DHTML Window widget on your site and tried to use it with a Google map embedded in a div. There are two problems I observed:

1) The Google map gets show misaligned and is not centered properly. With other window widgets that I tried, it was only necessary to call map.checkResize() to notify the map that its container div has changed its size (visibility). This does not help when the map is used with the DHTML Window widget.

2) The Google map does no react to any mouse events. Also none of the controls inside the map (zooming, map type switching etc.) does not react to any mouse events.

The same code works with other DHTML window widgets (JQuery UI Dialog, subModal etc.) without any problems. I would still want to use your DHTML window widget because it is quite lightweight, it still looks quite good and I can make the window modal (as opposed to the JQuery UI Dialog :(.

Any ideas?

Thanks,
Jan

jscheuer1
01-06-2008, 10:39 PM
Did you try using the iframe method?

xmoravej
01-07-2008, 02:27 PM
Thanks for your response. Yes, the iframe works. The only glitch is that the contents of the iframe disappears when the window is dragged. But I can live with that.

I only had to add code to hide selects in IE <=6 so that they do not interfere with the window. It would be good to add this functionality to the widget code.

This is what I do using jQuery, maybe somebody finds it useful for the meantime.

======
After opening the window:

var hiddenSelects = new Array();

if ( is_ie && !is_ie7up )
{
jQuery('select').each(function()
{
if ( jQuery(this).css('visibility') != 'hidden' )
{
jQuery(this).css('visibility', 'hidden');
hiddenSelects[hiddenSelects.length] = jQuery(this);
}
});
}

After closing/hiding the window:

for ( var i = 0; i < hiddenSelects.length; i++ )
hiddenSelects[i].css('visibility', 'visible');

hiddenSelects.length = 0;
=======

A major issue is that now after switching from dhtmlwindow to dhtmlmodal, the onclose function is no longer called. I will investigate around this and if I do not find a workaround, I will report it in a different thread (unless already reported).

Thanks,
Jan

jblade
01-07-2008, 10:11 PM
What kind of widget platform are you using? If your still running into problems I suggest you consider using Clearspring (http://www.clearspring.com). I was having a similar problem with my widget and their docs (http://www.clearspring.com/docs) really explained their implementation well and helped solve my problem.

xmoravej
01-07-2008, 10:31 PM
Besides my own widgets I have been using - JQuery UI, DD widgets, smartmenu-popup and a few others.

PS: Aren't you employed by clearspring by anychance? :-) I took a brief look on their website and its a lot of words and links and no visual demos. This definitely turns me off. That is why I like JQuery UI and DD pages.

xmoravej
01-07-2008, 10:42 PM
I would just like to post my resolution to the problem.

I managed to get Google Maps work with dhtmlwindow's and dhtmlmodal's 'iframe' and 'ajax' loading style. For some reason the 'div' style does not work. That is kind of weird, because I do not see much difference between 'div' and 'ajax' as 'ajax' also seems to use a 'div', it is only dynamically added. I have not really debugged this to see whether the generated HTML differs.

The advantage of 'ajax' over 'iframe' that I observed is that when using 'ajax', the window's contents does not disappear while the window is being dragged. Also when using 'iframe' the iframe's frame seems to be shown inside the window - visually not very appealing.

Hope this helps.

Jan

xmoravej
01-07-2008, 11:21 PM
For a patch that removes the ugly frame around content loaded thru 'iframe', see http://www.dynamicdrive.com/forums/showthread.php?p=125440.

jscheuer1
01-08-2008, 02:57 AM
Removing an iframe's border is simple. Use the attribute:


frameborder="0"

This has actually been covered before and is not a bug, simply user preference.

xmoravej
01-08-2008, 08:35 AM
You mean that users need to edit their window.js and add this attribute to the following?

if (!t.contentarea.firstChild || t.contentarea.firstChild.tagName!="IFRAME") //If iframe tag doesn't exist already, create it first
t.contentarea.innerHTML='<iframe src="" style="margin:0; padding:0; width:100%; height: 100%" name="_iframe-'+t.id+'"></iframe>'

If that is the case, I do not think this sort of a customization is any good, because everytime a user downloads a new version of the library, they will have to merge in their local changes to the library...

Would not it be better to enable this sort of customizations via dhtmlwindow.open options?

xmoravej
01-08-2008, 10:52 AM
Or maybe even better with using the css stylesheet...