Member Avatar for fieryidris

i signed up to daniweb a few weeks ago when i was having problems with visual basic which after a lot of searching on google i managed to solve for myself. i am now having a go at building a website and have been using dreamweaver which makes things very simple to achieve while i'm still learning how to html works.
i have put some of my photos on one of the pages and i have been trying to go from clicking on a thumbnail to opening a new small window containing a bigger picture. i realised from studying the source code of other websites that do this that i needed to use javascript but i have been having trouble finding something that works properly in firefox and ie (i am using ie7 if it matters). when you click on one of the thumbnails eg: the picture of a lorry on the new window opens with the bigger picture but then continues 'thinking' even when all of the picture is loaded.
i lifted the javascript code from another website so i don't completely understand it ,i can see that it is controlling the size and appearance of the new window , but there is also a random math bit i'm not sure what that does?
is there something i need to add to the javascript code to make the new window stop saying 'transferring data from ' or have i used some rubbish javascript and need to use a different javascript?

  • 2 Contributors
  • 6 Replies
  • 226 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by fieryidris

Dani AI

Generated

Nice catch by and good verification by — the visible "transferring data" state comes from leaving the popup's document stream open. When you open a window and then use document.write(), the browser keeps the load stream active until you call document.close(), so explicitly closing the document is what stops the browser's activity indicator.

A few practical tips to avoid the problem and improve the behavior:

  • Do not open the popup with the image URL as the first argument to window.open. That starts a direct resource load and can compete with the scripted document write. Open a blank window ('' or 'about:blank'), write your HTML into it, then call document.close().
  • Avoid using eval to build and run the open/write sequence; build strings or DOM nodes and call the API directly for readability and security. Carefully escape the image URL when concatenating into HTML.
  • If you want the popup sized to the image, preload the image (new Image()) and use its onload to read naturalWidth/naturalHeight so you can open the window with appropriate width/height (add a few pixels for window chrome). Alternatively, use CSS (max-width/max-height) so the image scales on different devices.

If the indicator still shows after document.close(), open the browser developer tools' network tab to see which resource is pending (external scripts, analytics, or a slow image can keep the transfer active). Note that modern browsers often block popups; for a better, more future-proof UX consider an in-page lightbox/modal instead of separate windows.

Example pattern (preload, open blank, write, close):

var img = new Image();
img.onload = function(){
  var w = window.open('', 'imgwin', 'width=' + (img.width + 20) + ',height=' + (img.height + 20) + ',resizable=1');
  var html = '<!doctype html><html><head><meta charset="utf-8"><style>body{margin:0}</style></head><body><img src="' + img.src + '"></body></html>';
  w.document.open();
  w.document.write(html);
  w.document.close();
  w.focus();
};
img.src = imageUrl;

Recommended Answers

All 6 Replies

Member Avatar for tgreer

Your function needs a "document.close()" statement.

Member Avatar for fieryidris

Your function needs a "document.close()" statement.

thankyou for your reply.
i had found a mention of document.close() somewhere else yesterday evening but i can't work out where i should add it to the javascript?

Member Avatar for tgreer

Add it to the end of the function that writes the HTML into the new window. It can be the next statement after the final document.write().

Member Avatar for fieryidris

i know your probably going to think i'm a right idiot but i keep adding the document.close() to different places at or near the end of the javascript and i still can't get it right, it seems to work fine inside my computer but once it is uploaded to the server it still says 'transferring data from [url]www.fieryidris.co.uk[/url] ' all the time. could you please edit the script below so i can see what it should be?

function imgOpen(imgS, width, height) {
    rand_id='image'+(Math.round(Math.random()*100000));
    outf="<html><head><style>body{margin:0px;}</style></head><body leftmargin=0 topmargin=0><img src=\""+imgS+"\"></body></html>";
    iopen="iwin=self.open('"+imgS+"', '"+rand_id+"', 'width="+width+", height="+height+",toolbar=0,resizable=0');"+
        "iwin.document.write('"+outf+"');"+"iwin.focus();";
    eval(iopen);
}
Edited by TrustyTony because: fixed formatting
Member Avatar for tgreer

function imgOpen(imgS, width, height) {
rand_id='image'+(Math.round(Math.random()*100000));
outf="<html><head><style>body{margin:0px;}</style></head><body leftmargin=0 topmargin=0><img src=\""+imgS+"\"></body></html>";
iopen="iwin=self.open('"+imgS+"', '"+rand_id+"', 'width="+width+", height="+height+",toolbar=0,resizable=0');"+
"iwin.document.write('"+outf+"');iwin.document.close();"+"iwin.focus();";
eval(iopen);
}

Member Avatar for fieryidris

thankyou it is working nicely now.

it was the iwin bit that i had missed out.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.