offset contents in new Mozilla window

Jonathan · Apr 4, 2004

Hi

I open a new window using a javascript function:

function nw(theURL,winName,features) { //v2.0
window.open(theURL,winName,features);
}

which I call thus:

<a href="javascript:nw('images/st_pauls.jpg','','top=30,left=30,width=733,height=550,scrollbars=no')"

It works fine in Netscape, IE, and Safari, but in Mozilla I always get
a small gap at the top and left, like a table cell with padding on
only two edges. Does anyone know why this is, and what I can do to
fix it?
It shouldn't have any border or padding. Thanks!

One other thing I also noticed was that the Window Name (currently
blank) will not accept spaces in certain browsers, that's why I left
it out. I don't need to do anything with the window once it is open,
so don't see this as a problem.

PS Having looked through the newsgroup messages I realise this may not
be the best way to open a new window (i.e. only using javascript), and
will probably change it to be non-javascript friendly at some later
stage.

Martin Honnen · Apr 4, 2004

Jonathan said:
I open a new window using a javascript function:

function nw(theURL,winName,features) { //v2.0
window.open(theURL,winName,features);
}

which I call thus:

<a href="javascript:nw('images/st_pauls.jpg','','top=30,left=30,width=733,height=550,scrollbars=no')"

It works fine in Netscape, IE, and Safari, but in Mozilla I always get
a small gap at the top and left, like a table cell with padding on
only two edges. Does anyone know why this is, and what I can do to
fix it?
It shouldn't have any border or padding. Thanks!

I don't think this is a JavaScript issue because I think that Mozilla
shows an image loaded into a window that way whether you use JavaScript
to open the window or let the browser do that.
Instead of loading only the image file you could document.write a HTML
page rendering that image without borders or padding
<a href="kiboInside.gif"
target="imageWin"
onclick="showImage(this.href, this.target, 'Kibo inside',
'top=30,left=30,width=89,height=67,resizable');
return false;">Kibo inside image</a>

function showImage (url, windowName, imageDescription, featureString) {
var win = window.open('', windowName, featureString);
var html = '';
html += '<html><head>';
html += '<title>' + imageDescription + '<\/title>';
html +=
'<style type="text/css">html, body { padding: 0; margin: 0}';
html += '<\/style>';
html += '<\/head>';
html += '<body>';
html += '<img src="' + url + '"';
html += ' alt="' + imageDescription + '">';
html += '<\/body>';
html += '<\/html>';
win.document.open();
win.document.write(html);
win.document.close();
}

That example image however is not too suitable to demonstrate the
function as browsers like Netscape or Mozilla have a limit of 100x100
for popup windows

Michael Winter · Apr 4, 2004

Martin Honnen wrote:
[snip]

html += '<style type="text/css">html, body { padding: 0; margin:

Click to expand...

[snip]

Did you mean to escape the quotes and forward slash in the '<style...'
line?

The double quotes are nested inside single quotes, so there is need to
escape them. If one type of quote is nested within the same type, then
escaping the inner set is necessary.

As for code like:

'...<\/style>...'

The backslash isn't escaping the forward slash (forward slashes don't need
to be escaped), it is breaking up the '</' sequence which some browsers
interpret as a closing tag for the SCRIPT element, even if the text was
'</button>'.

Mike

DU · Apr 4, 2004

Jonathan said:
Hi

I open a new window using a javascript function:

function nw(theURL,winName,features) { //v2.0
window.open(theURL,winName,features);
}

which I call thus:

<a href="javascript:nw('images/st_pauls.jpg','','top=30,left=30,width=733,height=550,scrollbars=no')"

For accessibility reasons, the code you have here is not best: you have
turn off window resizability and presence of scrollbar(s) if needed (if
content overflows requested window dimensions). This is not recommendable.

It works fine in Netscape, IE, and Safari, but in Mozilla I always get
a small gap at the top and left, like a table cell with padding on
only two edges. Does anyone know why this is, and what I can do to
fix it?

Every browser adds a default margin or padding to the root element or
body element: even to non-html document. When you load an image in a new
separate window, these are the margin settings:

Mozilla-based browsers: 8px for each of the 4 sides
MSIE 5+: 15px for top and 15px for bottom, 10px for left and 10px for right.
What your code does in the case of MSIE is to give less than image
width/height + 15px/10px and then remove the scrollbars which are
generated. So, you have the impression that MSIE works accordingly but
that's not the case.

It shouldn't have any border or padding. Thanks!

Ask yourself why you need to remove margin/padding for an image. Because
you're trying to remove what is added by all major browser manufacturers
for new windows and content element (body) and they had such for good
reasons IMO.

One other thing I also noticed was that the Window Name (currently
blank) will not accept spaces in certain browsers

MSIE 5+ will refuse a window name with blank space(s). Mozilla will
accept it and, IMO, this is a bug.

, that's why I left

it out.

If you want to reuse and recycle that window, then it would be best to
give a name to such window.

I don't need to do anything with the window once it is open,

so don't see this as a problem.

If a new separate window only needs to be opened once and not be reused
or recycled, then it certainly argues on the relevance of creating a new
secondary window in the first place. I think your webpage decision is
debatable.

DU

Jonathan · Apr 4, 2004

Hi

Thankyou all for your replies!

Someone mentioned (on another discussion group thing) that all
browsers add a default padding to windows for content, which is fair
enough. Now, if I can't easily get rid of the padding, can I make it
so that it has even padding on all sides? I don't particularly want
to include scroll bars as each window is tailored to the image it will
display (in terms of dimensions), and all should easily fit inside an
800x600 monitor resolution (the site is not targeted at people running
less than that); I also don't want to add any white areas to my images
as people may wish to download them (and it would then make them look
silly). Any pointers please? It has to be cross-browser and
cross-platform.

Thanks!

DU · Apr 5, 2004

Jonathan said:
Hi

Thankyou all for your replies!

Someone mentioned (on another discussion group thing) that all
browsers add a default padding to windows for content, which is fair
enough. Now, if I can't easily get rid of the padding,

Not on windows. In documents, you can control margins and padding on
the body element and border on the root element but you can not control
the "padding" on windows. Again, ask yourself why all the browser
manufacturers implement such padding on the windows created because you
are trying to remove these, because you are trying to undo what they
do... and there must be a good reason for all of them to do what they do.

can I make it

so that it has even padding on all sides?

Not even that. MSIE has a 15px "window padding" on both top and bottom
of the window and a 10px "window padding" on both left and right sides.
They become margin on the body node in html documents/webpages.

I don't particularly want

to include scroll bars as each window

You don't understand here. Mozilla does not just add scrollbars or not.
Mozilla will add scrollbars if needed, if content overflows window
requested dimensions. "scrollbars=yes" is very very often misunderstood
as show scrollbars when it should be understood as show scrollbar(s) if
one(they) is(are) needed. In MSIE, it's different as the root element
has an overflow:scroll declaration but this is overridable.
Anyway, here we're talking about loading an image in a window; we're not
talking about an .html page.

is tailored to the image it will

display (in terms of dimensions), and all should easily fit inside an
800x600 monitor resolution (the site is not targeted at people running
less than that);

No, I don't think so. At least, it won't fit in most 800x600 scr. res.
This was your window dimensions in your OP:
top=30,left=30,width=733,height=550
and such will hardly fit into most 800x600 screen res. You ignore
titlebar (height is entirely customizable by the user in windows os),
windows taskbar (usually 28px but could be more - again entirely
user-configurable), other semi-permanent os-dependent applications
reducing the workarea (screen.availHeight value), statusbar presence
entirely under the control of UI advanced pref setting in Mozilla,
user.js setting forcing other toolbars to be present in Mozilla,
proxomitron settings for windows users, etc.
So, at least a part of your window will be off-screen in MSIE; Mozilla
has a security measure to avoid that and compensate+adjust for the
position of the window.

I also don't want to add any white areas to my images

as people may wish to download them (and it would then make them look
silly).

Irrelevant and useless. There are many ways for users to save an image
or to bypass image protection tricks.

DU

Any pointers please? It has to be cross-browser and

How to open a new window	5	Oct 30, 2005
Focus on a recycled window for PDF	0	Aug 9, 2006
open frame in new window	4	Sep 11, 2009
How to Create a random password generator in a separate window	4	May 26, 2022
How do I open a new normal (full sized) browser window form a small "pop-up" window?	17	May 6, 2004
Access denied in javascript when try to see contents of page in javascript opened window	2	Sep 3, 2007
Opening a new html window using javascript	3	Feb 6, 2008
"Member not found" error when opening PDFs in new window	2	Nov 2, 2006

offset contents in new Mozilla window

Jonathan

Martin Honnen

Michael Winter

DU

Jonathan

DU

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads