473,378 Members | 1,360 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,378 software developers and data experts.

offset contents in new Mozilla window

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.
Jul 23 '05 #1
7 1654


Jonathan wrote:
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
--

Martin Honnen
http://JavaScript.FAQTs.com/

Jul 23 '05 #2
Martin Honnen wrote:
<snip>
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


I'm not sure what browser you were mentioning, I just tried opening a
new window with just an image using Mozilla Firefox 0.8. It opened an
image sized at width 611 x height 767 px, and displayed the image with
no border or whitespace, using this css in the new window function
(works w/IE6, Netscape 7.1). Did you mean to escape the quotes and
forward slash in the '<style...' line?

body { margin: 0; }
img { border:0; }

Mike

Jul 23 '05 #3
On Sun, 04 Apr 2004 05:26:00 -0700, mscir
<ms***@access4less.com.net.org.uk> wrote:
Martin Honnen wrote:
[snip]
html += '<style type="text/css">html, body { padding: 0; margin:


[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

--
Michael Winter
M.******@blueyonder.co.invalid (replace ".invalid" with ".uk" to reply)
Jul 23 '05 #4
DU
Jonathan wrote:
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
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.

Jul 23 '05 #5
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!
Jul 23 '05 #6
DU
Jonathan wrote:
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 cross-platform.

Thanks!


Jul 23 '05 #7
Michael Winter wrote:
<ms***@access4less.com.net.org.uk> wrote:
Martin Honnen wrote:

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

[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


OK, thanks for explaining that. I still have a lot to learn about this.

Mike

Jul 23 '05 #8

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

3
by: gsb | last post by:
I'd like to get the offset coordinates, top & left, of an embedded Flash movie. <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" ...
4
by: Matt Kruse | last post by:
Let me break down the issue: Ultimate Goal: Building a custom debugger window which shows a function trace in and out of functions as they are called, which can be executed via IE's Context Menu...
6
by: sentinel | last post by:
Hi, I’m trying to modify a DHTML editor that parses a style-sheet via PHP and instead of modifying the tags via execCommand(), find a way of writing inline styles by way of adding <span style=>...
3
by: kj | last post by:
This problem is driving me nuts. The code at the end of this post below works fine with IE, but fails with Mozilla. You can see it in action at http://tinyurl.com/2jvo3 With Mozilla 1.4 and...
12
by: knocte | last post by:
Hello. I have always thought that the eval() function was very flexible and useful. If I use it, I can define functions at runtime!! However, I have found a case where eval() does not work...
1
by: DaveG | last post by:
Hi All I am having a small problem with window.open() obviously something I am or am not doing. This is being fired from a subwindow. Everytime I use just the location.href = "URL" I got a...
1
by: vj | last post by:
How i can populate all fileds dynamically in jsp page based on contents found in xml file? I have written jsp servlets and java class file. i transferred automatic data from jsp to servlet then to...
7
by: Dr J R Stockton | last post by:
I want page <URL:http://www.merlyn.demon.co.uk/js-quick.htmto open, in IE6, IE7, Firefox 2, and wherever else practicable, with the control labelled F.X0 fully visible at the top of the window and...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 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 former...
0
by: ryjfgjl | last post by:
In our work, we often need to import Excel data into databases (such as MySQL, SQL Server, Oracle) for data analysis and processing. Usually, we use database tools like Navicat or the Excel import...
0
by: aa123db | last post by:
Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

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.