Moon said:
Seems I still haven't got the hang of all those window generating code
in Javascript. I've got a page with about 15 photo thumbnails. When you
click on a thumbnail a new window pops up which shows the enlarged
version of said thumbnail. This works fine on all current browsers I've
tested.
Is there a particular reason why you did not provide an url for that
page? ... for checking, testing purposes?
However, in case I do not close the popup but click on another thumbnail
instead, only IE replaces the enlarged pic by the new one, Firebird and
Opera keep the old picture. Only after closing the popup window and
clicking on the new thumbnail, the popup comes up with the new enlarged
version.
I'm quite sure this is because of some flaw in my code. Maybe you can
point me to it. Please note that I load the picture as a backround image
of the new window to make sure it takes up the whole window without any
margins, so this is already a workaround.
What's wrong with a margin between an image and the browser window
frames? Margins around content (like an enlarged image) is not some kind
of nasty gap to get rid off; documents all have browser default margin
values for a reason. Such "white space" gap surrounding an image help
delineate the real size of the image (even there, the user could be
fooled by automatic image resizing feature in MSIE and Mozilla; removing
that "white space" gap from the file could make the image smaller than
its real dimensions, smaller than it should because of automatic image
resizing feature in those browsers) and the window frame. For blocks of
text, such gap is more important to help reading.
function enlarge(chooseImg) {
mywin =
window.open("","enlarged","width=500,height=347,left=20,top=20")
Your window object reference (mywin in your code) should be initialized
to null and then explicitly declared as a global variable. Not a mistake
but it is much more advisable. You could also use "about:blank" as the
initial document. I personally do not like creating enlarged image
window from non-existent document and then resorting to document.write
calls.
IMO, there are other better, more efficient, less cpu and RAM-demanding
and easier-to-maintain ways to achieve your goals.
Your window.open call will prevent the popup to be resizable and to have
scrollbars if needed, if content overflows requested window dimensions:
none of this is recommendable from an accessibility and usability
perspectives. Not providing reasonable fall-back mechanisms nor
providing normal, standard browser window features is bad.
mywin.document.open()
mywin.document.write("<HTML><HEAD><TITLE>Enlarged view of thumbnails
</TITLE></HEAD><BODY BGCOLOR=\"#000000\" Background=\"img/" + chooseImg
+ ".jpg\"></BODY></HTML>")
- every occurences of / should be escaped so that the HTML parser does
not get confused.
- background is an invalid HTML attribute
- there is absolutely nothing wrong with simply creating a secondary
window with the enlarged image:
WindowObjectReference = window.open("path/filename.jpg",
"EnlargedImage",
"width=500,height=347,left=20,top=20,resizable,scrollbars,status");
alling the window.open inserting the img in an already existing file
like "about:blank" or
- You need to close the document stream here with
mywin.document.close();
"Closes a document stream opened by open() and forces rendering."
http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-98948567
- why give focus to the window which was just created a msec. ago?
- as coded your code will not reuse the already opened enlarged image
window if the user clicks on another thumbnail. You need to make major
adjustements to your code. (I see other difficulties and deficiencies
with your code.)
What might be happening in MSIE is that you're actually closing the
already opened window and then re-creating and opening a new window from
scratch.
}
And in the HTML my link looks like this:
<a href="javascript:enlarge('pic1_large')"><img src="img/pic1
_thumb.jpg" alt="Pic 1" width="149" height="104" border="0"></a>
It's widely known and documented that resorting to "javascript:"
pseudo-protocol in href attribute values is wrong, incorrect, invalid
and bound to just create problems for users. If the user has javascript
turn off, your enlarged picture won't be accessed in the opener nor in
the popup window when it should. Having "javascript:" in the href value
prevents user from choosing, say, open in a tab with their right-click
context menu or to get trustworthy, reliable info on the link
properties. Etc..
Here, you would need several code adjustements and corrections.
Among several documents:
http://jibbering.com/faq/#FAQ4_24
Finally you can compare what I preach with what I practice:
Enlarged image in a single re-usable secondary window
http://www10.brinkster.com/doctorunclear/HTMLJavascriptCSS/EnlargeThumbnail.html
Create a sub-window and dynamically DOM-insert an image
http://www10.brinkster.com/doctorunclear/HTMLJavascriptCSS/DynamicInsertionDOMImageInPopup.html
Popup windows and Netscape 7: interactive demos
http://www10.brinkster.com/doctorunclear/Netscape7/Popup/PopupAndNetscape7.html
DU
--
Javascript and Browser bugs:
http://www10.brinkster.com/doctorunclear/
- Resources, help and tips for Netscape 7.x users and Composer
- Interactive demos on Popup windows, music (audio/midi) in Netscape 7.x
http://www10.brinkster.com/doctorunclear/Netscape7/Netscape7Section.html