DHTML Widget 1.03 - Resize to content size?

[froded]

1) Script Title: DHTML Window widget (v1.03)

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

3) Describe problem: Hi. First thank you for a great script to show inline popup windows ! I was up and running in no time.

I'm using the Widget to show a full size JPEG picture in a iframe popup triggered by a mouseover event on a thumbnail image. Is there any way to resize the DTML window to the content so that the whole picture is viewed without scroll bars?

I'm having trouble referencing the correct object using only the window handle. I really miss a ".contentDoc" reference to the popup window content. Here is what I got so far:

// global variables for inline popup
var picturewin; //reference to the new inline popup window
var already_open=0; //global variable to show whether an new popup window should be created or an old reused

function ShowPopImage(url, headertext){
if (already_open>0){
// only refresh content
// alert("already open");
picturewin.load("iframe", url, headertext);
var target=window.frames["_iframe-"+picturewin.id].document.body
if (target) {
// this works in IE7 ...
// alert(target.scrollHeight + target.offsetHeight - target.clientHeight)
picturewin.setSize( (target.scrollWidth + target.offsetWidth - target.clientWidth),(target.scrollHeight + target.offsetHeight - target.clientHeight));
}
else {
//alert("not a object")
}
}
else {
// first time setup
already_open=1;
//alert("first time open");
picturewin=dhtmlwindow.open("PictureView", "iframe", url, headertext, "width=590px,height=350px,top=40px,left=300px,resize=1,scrolling=1,center=0")
picturewin.onclose=function(){already_open=0; return true;} // set our global variable to false to show window is no longer open
picturewin.setSize(300, 400);
picturewin.moveTo(320, 20);
picturewin.show();
}
}

While this works to some degree, it's limited to IE7 and only calculates the size of the iframe, not the whole popup. Some scrollbars occur on the first resize, but may be ok on the next... Seems to me the page content must be fully loaded before a resize can be triggered, and in this case also it needs several iterations.

Hope you can give me some ideas on how to do this correctly. Do I need to read the size of the main div in the widget, and if so how to reference it ?

Maybe the needed "ResizeToContentSize" code could be added to the Widget features in the future? You already wrote a better iframe resize script : http://www.dynamicdrive.com/dynamicindex17/iframessi2.htm. Hope you can include this into the Widget.


Best regards
Frode Dragland

[ddadmin]

If you're trying to resize the DHTML window to fit the image contained inside its iframe, what you actually want is the dimensions of this image, not document.body. Off the top of my head, try something like:


googlewin.onclose=function(){ //Run custom code when window is being closed (return false to cancel action):
var iframeimage=window.frames["_iframe-"+"googlebox"].document.body.getElementsByTagName("img")[0]
alert(iframeimage.offsetWidth+" "+iframeimage.offsetHeight)
return false
}

The complication comes from the fact that you need to wait until the image has fully loaded before getting its dimensions and resizing the DHTML window accordingly. The image element does support the onload event handler, so that's probably what you'll need to use.

[froded]

Hi, and thank you for the reply.

I do not quite see why I should use the .onclose function to do this.

Is this a way to send the onload event trigger of the inline popop back to the main window or do I have to modify the code in the widget .js file? I'm not a JavaScript guru in any way :)

Best regards
Frode D

[ddadmin]

Hi:
The onclose portion in my code is just for demo purposes to show how/when to get the image dimensions.

To answer your question, assuming the page within the iframe is on the same domain as the page launching the window, you can invoke code when this iframe page has fully loaded by doing something like:


var iframe=window.frames["_iframe-"+"googlebox"]
iframe.onload=function(){
var iframeimage=window.frames["_iframe-"+"googlebox"].document.body.getElementsByTagName("img")[0]
alert(iframeimage.offsetWidth)
}

In this case, the width of the first image within the page is alerted when it's fully loaded.