By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,851 Members | 1,110 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,851 IT Pros & Developers. It's quick & easy.

Replacing enlarged pics in popup works in IE only. What gives?

P: n/a
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.

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.
function enlarge(chooseImg) {
mywin =
window.open("","enlarged","width=500,height=347,le ft=20,top=20")
mywin.document.open()
mywin.document.write("<HTML><HEAD><TITLE>Enlarged view of thumbnails
</TITLE></HEAD><BODY BGCOLOR=\"#000000\" Background=\"img/" + chooseImg
+ ".jpg\"></BODY></HTML>")
mywin.focus()
}

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>
Jul 20 '05 #1
Share this Question
Share on Google+
2 Replies


P: n/a
DU
Moon wrote:
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,le ft=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,scr ollbars,status");
alling the window.open inserting the img in an already existing file
like "about:blank" or
mywin.focus()
- 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-HTM...ml#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/doctorunc...Thumbnail.html

Create a sub-window and dynamically DOM-insert an image
http://www10.brinkster.com/doctorunc...geInPopup.html

Popup windows and Netscape 7: interactive demos
http://www10.brinkster.com/doctorunc...Netscape7.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/doctorunc...e7Section.html

Jul 20 '05 #2

P: n/a
DU wrote:
Is there a particular reason why you did not provide an url for that
page? ... for checking, testing purposes?
Yep, the page wasn't up and now that it's up it's not always reachable
cause we currently have to put it on a friend's server at home.

http://magnum.homedns.org/jga.html
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;
Your window.open call will prevent the popup to be resizable and to have
scrollbars if needed, if content overflows requested window dimensions:
It's wrong in such a way that I prefer having only the picture 'framed'
by the browser window and nothing else. Since the picture's always the
same size there should be no trouble and no need for scrollbars.
You need to make major adjustements to your code. (I see other
difficulties and deficiencies with your code.)
I guessed that, that's why I posted here.
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.
Seems that is what's happening, still I see no real problem with it
though it may not be very elegant. I would hate to add a more complex
function that had to verify whether a window is already open or not.
Since I want only one enlarged window open at a time I think this is an
appropriate behaviour. I'm more concerned about the other browsers NOT
showing the new picture.
Here, you would need several code adjustements and corrections.


Gonna check em out. Thanks.
Jul 20 '05 #3

This discussion thread is closed

Replies have been disabled for this discussion.