Colin Boorman

Navigation

Skip navigation.

Search

Site navigation

Email conversation

FromColin Boorman
ToMe
Subjecthowtocreate.co.uk script closePopImage.js
Date2 June 2008 17:44
Hello Tarquin

Great site. Perhaps it's too good as It gave me the confidence to try to
incorporate the above script (closePopImage.js) into my web site

I took the script and made a few modifications and everything seemed to be
working, but have one or two problems, which I hope you can assist with.

At present all (?) I want to do is to open a popup window with an image and
give the user a chance to close it. Ideally I want them to be able to
reposition the window on their screen to somewhere convenient, then when
they open another image it should also open in the same window in the same
place. Sounded easy to me until I started

As I know the size of the image, I added the parameters Wide and High to the
html file which is given for each image
The modified javascript file is located at
[URL]
This is accessed at present only from the page
[URL]
which is not accessible from the main index page
There are 4 images on this page, which all should click through to a pop up
window named picture . The top one (file.jpg) is a different size to the
others on the popup. I intend to access this script from all of the gallery
pages within the site.

What I have found is that each browser works in different ways - this is
also true of other links on your page
http://www.howtocreate.co.uk/perfectPopups.html and none of them do exactly
what I want - I suppose Opera is the closest but I can't get all my users /
visitors to use Opera

The browsers I have used and the results are

Internet Explorer v6.0.2800.1106
This resizes the different sized popup windows, but always at the same place
i.e. x=400, y=200

SeaMonkey v1.1.9 (my preferred and normal browser)
Allows the popup window to be positioned anywhere on screen, holds that
position, but doesn't resize

Opera v9.27 (never previously used but not bad on first impressions,
although I didn't like the effect of not being able to site a window outside
the main window)
Allows the popup window to be positioned anywhere within the Opera window
(not the screen), holds that position and resizes.
When I closed Opera and then restarted it the same page loaded in both the
main screen and the popup window.

Safari v3.1.1 (never heard of before)
Allows the popup window anywhere on screen and holds that position, but
doesnt resize, and doesn't stay in focus or come in focus. It also doesn't
accept the window heading. Also doesn't close the popup window when closing
the main screen and application

I suppose the main thing I am after is for a defined popup window (name =
picture) to be created and for me to define the size of that window for each
image
The user can then move that popup window to a convenient place on screen.
If he then clicks to open up another image that image should be directed to
the existing popup window which is resized for that particular image and
stays in the same position on screen that the user left it.

I can see no script error messages in any of the browsers


Many thanks for your assistance in advance

Colin Boorman
FromColin Boorman
ToMe
SubjectRe: howtocreate.co.uk script closePopImage.js
Date3 June 2008 09:38
Hello Tarquin

Just an update on this

I saw your reply to Corne Steenvoorden dated 01/11/2007 and removed the if (
!window.opera ) line from the script. I had already renamed _blank to
picture, and already set autoclose to false

It now works perfectly under IE

In Sea Monkey / Firefox I had not allowed the script to "Move or resize
existing windows" so that is now resizing, and now works perfectly

In Opera it is working (in Operas way of doing things)

However, in Safari it still allows the popup window anywhere on screen and
holds that position which is good, but doesnt resize, and doesn't stay in
focus or come into focus when loading a new image into the window. It also
doesn't accept the window heading.

As I said I had never heard of Safari, but would like to get this working
for this browser as well

In the meantime I have now published the pages on [URL] and the script is
at [URL]. I will be accessing the script from all other pages where a popup
is required.

Many thanks for a great site and I totally agree with your comments on IE
(it is crap)

[Off topic]

I notice you recommend using a text editor only for web pages, but are there
any graphical web design packages you have used that are close to
acceptable. I found that when I edited my pages in Sea Monkey and added your
script within a page, when I saved it the stupid program had overwritten my
head with your script 'it had followed the imgWin.document.write bit and
overwritten most of the top of my html file. I also tend to use FrontPage
mainly for ease of making image maps and would be grateful for any
alternatives you have found / use

Once again many thanks for a great site


Colin Boorman
FromColin Boorman
ToMe
Subjectscript closePopImageResize.js possible bug?
Date7 June 2008 13:19
Hello Tarquin

Following to my previous 2 emails regarding closePopImage.js

I have downloaded the closePopImageResize.js script and have that
working after a fashion

This is called from [URL]

I modified the '_blank' to 'picture'
I had to move the var extraHTML line to inside the script so that it now
reads (which I had to do with the closePopImage.js script as well).

//don't touch (except to modify the window contents)
function popImageExtra(imageURL,imageTitle,AutoClose,oTimeClose,extraHTML){
var extraHTML = '<br><a href="javascript:window.close()"
style="text-decoration:none;color:#777;background-color:#bbb;
font-weight:bold;border-left:2px solid #000;" class="makeright">Close<\/a>';
var imgWin etc

When I call this script I am using the html

<a href="tiger4_x.jpg" onclick="return popImageExtra(this.href,'Perhaps
it was worth it after all',false,0);">

I want to incorporate 800 wide pictures so experimented with the
closePopImageResize.js script so that a smaller image was presented on
the smaller screens but the larger image was able to be toggled

Using the resize script, when the popup is called the image loads and
can be toggled, but if you click on close it doesn't close but brings up
the scrollbars and you then have to click close again.

This was using SeaMonkey (Firefox).
In Opera and I.E it seems ok, and also in Safari although here (as
already detailed in my last email - the popups remain out of focus) and
when closing the window if you try to open another popup window, you
have to try twice.

This also happens on your web site
http://www.howtocreate.co.uk/perfectPopups.html and the link
<a href="chess.png" onclick="return popImageExtra(this.href,'Toggle
image size demo',false,0,extraHTML);">open an image popup with togglable
size</a>.</p>
Here once you have toggled to full screen the Close works but if you are
in the original screen by clicking close, the scroll bars appear (and
you have to click close again).


The main purpose for trying the closePopImageResize.js script was for
people using 800x600 or 1024 x 768 screens, otherwise closePopImage.js
is fine. This can be checked on [URL] which simply calls
up 640 wide pictures

Here the popups are correct (in Firefox, IE, Opera and Safari (apart
from the non focus in Safari)) and the window closes

Thanks

Colin Boorman
FromMe
ToColin Boorman
SubjectRe: howtocreate.co.uk script closePopImage.js
Date14 June 2008 16:21
Colin,

> However, in Safari it still allows the popup window anywhere on screen and
> holds that position which is good, but doesnt resize, and doesn't stay in
> focus or come into focus when loading a new image into the window. It also
> doesn't accept the window heading.

These seem to be bugs in Safari on Windows only, and there is no way for me
to work around them. It works properly in Safari on Mac. Safari is the
default browser on Mac, and seems to be intended to be used only as a
testing platform on Windows. Therefore you can ignore its response on
Windows. It works on the platform it is designed for.

> are  there any graphical web design packages you have used that are
> close to acceptable.

http://www.howtocreate.co.uk/emails/DavidWilson.html

> if you click on close it doesn't close but brings up
> the scrollbars and you then have to click close again.

This turns out to be a bug in Gecko (the engine used by Forefox and
Seamonkey). When a link is focused, they use a dotted outline to highlight
it. According to the CSS spec, outline should never influence the size of
any other layout boxes. In Gecko, it influences the size of the viewport,
causing it to need scrollbars, even though scrollbars should never appear
even if you create a 1000000px outline.

It's fairly simple to solve. Just make sure that the link cannot receive an
outline (ignore the linebreaks - just add the outline style):

var extraHTML = '<br><a href="javascript:window.close()"
style="text-decoration:none;color:#777;background-color:#bbb;
font-weight:bold;border-left:2px solid #000;outline:none !important"
class="makeright">Close<\/a>';


Mark 'Tarquin' Wilton-Jones - author of http://www.howtocreate.co.uk/
This site was created by Mark "Tarquin" Wilton-Jones.
Don't click this link unless you want to be banned from our site.