473,685 Members | 2,581 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

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

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(chooseI mg) {
mywin =
window.open("", "enlarged","wid th=500,height=3 47,left=20,top= 20")
mywin.document. open()
mywin.document. write("<HTML><H EAD><TITLE>Enla rged view of thumbnails
</TITLE></HEAD><BODY BGCOLOR=\"#0000 00\" Background=\"im g/" + chooseImg
+ ".jpg\"></BODY></HTML>")
mywin.focus()
}

And in the HTML my link looks like this:

<a href="javascrip t:enlarge('pic1 _large')"><img src="img/pic1
_thumb.jpg" alt="Pic 1" width="149" height="104" border="0"></a>
Jul 20 '05 #1
2 4369
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(chooseI mg) {
mywin =
window.open("", "enlarged","wid th=500,height=3 47,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:blan k" 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><H EAD><TITLE>Enla rged view of thumbnails
</TITLE></HEAD><BODY BGCOLOR=\"#0000 00\" Background=\"im g/" + 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:
WindowObjectRef erence = window.open("pa th/filename.jpg",
"EnlargedImage" ,
"width=500,heig ht=347,left=20, top=20,resizabl e,scrollbars,st atus");
alling the window.open inserting the img in an already existing file
like "about:blan k" 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="javascrip t: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
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

2
1622
by: Sharon | last post by:
Hi y'all, I'm trying to create a customized context menu using the DHTML Popup object. The HTML that makes up the body of the popup is created in a variable named 'popCode'. Works like a charm, except when I call a function in an onclick it gives an 'object expected' error. Here's the popup function (dopopup) and the function I'm calling (renderData): function dopopup(Value,Field,x,y) { popCode=''; popCode+='<html>\n<head>\n';
13
6256
by: ldan | last post by:
Hi everybody, I would not consider myself an expert in javascript - but so far whatever I know, helped me reaching my goals. Recently I started to experience a lot of javascript errors related to opening up a popup window in an application I wrote. The error messages are quite diverse: "Object doesn't support this property or method" or "Unspecified error." or "The callee (server ) is not available and disappeared; all connections are...
1
1601
by: Laphan | last post by:
First of all, my apologies for the xpost. I realise the netiqute, but this query seems to cross the boundaries of both these groups. Basically I have created a small ASP site that allows a user to upload their own pics via ASPupload so that they can be used on their site. I use a very simple form with a INPUT file box to allow them to browse, select and upload the picture. I then use ASPupload to save the file, get the file params and...
4
4616
by: jm | last post by:
<asp:HyperLinkColumn runat="server" HeaderText="To" DataNavigateUrlField="calTo" DataNavigateUrlFormatString="JavaScript:varwin=window.open('/MoreInfo.aspx?ID={0}',null,'width=400,height=400,location=no');" DataTextField="calTo" DataTextFormatString="{0}" /> gives the popup desired, but it also gives a blank page; taking the target out(like above) navigates to a blank window; taking out the varwin above gives a blank page with . All...
3
4786
by: RahimAsif | last post by:
I am writing an application that requires the a portion of the main menu to be dynamic. The menu has file, panels, view files and help across the top. The view files sub menu needs to be dynamically generated, and the dynamic generation needs to occur right when the user selects this menu item (that is on the Popup event handler). However, everytime I put following code on the Popup event handler (of the View Files menuitem) to dynamically...
1
12672
by: gvrajkumar | last post by:
Hi Popup window is opened and after some time session has expired. After session expire, if the user tries to make any actions on the popup page the user is redirected to login.jsp page. What I want is when the user tries to make any actions on the expired popup I want the popup window to be closed and parent window to be refreshed with the login.jsp page. Basically I want identify the popup window.
3
2774
by: cmo | last post by:
Well I hope I this isn't too nebulous of a problem. The problem I currently have is this: I have a button in a form that opens up a javascript/css poup that has an input field and two ahref links for ok and cancel, both of which call the popup's toggle() method (same thing that is called from the button). The form that this button is in has fields that can be added or removed by the user. Everything works great in firefox and netscape,...
1
1252
parshupooja
by: parshupooja | last post by:
Hello, I am using ASp.NEt C# and javascript I have a Datalist control on my page which has3 columns name , image and description. i have around 40 items in it. I want user to click on Image to open an enlarged Image. Enlarged Image path is not in database. Images are saved in diffrent folder but exactly with the same name as small image in datalist. I have written this function function Enlarge() {
0
8512
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
9048
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
8774
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
7591
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
1
6436
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
4303
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
0
4525
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
2
2199
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
1931
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.