Erasing border and padding in javascript window

[Eva]

Hi,

I'm really really really new to javascripts and so i couldn't really
comprehend thoroughly on the the previous posts regarding this issue.

Anyways, I'm setting up a picture album site. When i click on a
thumbnail or a picture, a larger picture pops up in a javascript
window. But it has a space on the top and on the left of my larger pic
in the pop-up window. How do i get rid of that? Also, i want the
window to fit my my pic so there's no space whatsoever around it.

Here is what i have:

<table height="333" border="0" align="center" cellspacing="0" >
<tr valign="bottom" >
<td align="center"> <SCRIPT language="JavaS cript">
<!--
function my_win()
{
window.open('pi cturealbum/MattMe%20Thumbn ails/images/MattMe1_jpg.jpg ','mywindow','w idth=306,height =257,border=0,p adding=0');
}
//-->
</SCRIPT> <A HREF="javascrip t:my_win()"><IM G
SRC="picturealb um/MattMe%20Thumbn ails/thumbnails/MattMe1_jpg.jpg "
border="0"></A></td>
<td align="center"> <a
href="pictureal bum/MattMe%20Thumbn ails/images/MattMe10_jpg.jp g"><img
src="picturealb um/MattMe%20Thumbn ails/thumbnails/MattMe10_jpg.jp g"
border="0"></a>
</td>

[Andrew Thompson]

Re: Erasing border and padding in javascript window

On 17 Nov 2004 00:23:38 -0800, Eva wrote:
[color=blue]
> When i click on a
> thumbnail or a picture, a larger picture pops up in a javascript
> window. But it has a space on the top and on the left of my larger pic
> in the pop-up window. How do i get rid of that?[/color]

CSS. (JS is not needed for this one)

--
Andrew Thompson
http://www.PhySci.org/codes/ Web & IT Help
http://www.PhySci.org/ Open-source software suite
http://www.1point1C.org/ Science & Technology
http://www.LensEscapes.com/ Images that escape the mundane

[Eva Lean]

Re: Erasing border and padding in javascript window

Thanks. But what do insert and where in my coding do i insert it?



*** Sent via Developersdex http://www.developersdex.com ***
Don't just participate in USENET...get rewarded for it!

[Michael Winter]

Re: Erasing border and padding in javascript window

On Wed, 17 Nov 2004 08:35:53 GMT, Andrew Thompson <SeeMySites@www .invalid>
wrote:
[color=blue]
> On 17 Nov 2004 00:23:38 -0800, Eva wrote:
>[color=green]
>> [...] it has a space on the top and on the left of my larger pic in the
>> pop-up window. How do i get rid of that?[/color]
>
> CSS. (JS is not needed for this one)[/color]

I don't think that's feasible here. In the OP, the contents of the new
window is an image by itself. CSS would have no application here.

I'm not sure if there is a solution. If a browser decides to pad the
viewport when displaying an image, I doubt you can persuade it otherwise.

Mike

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.

[Andrew Thompson]

Re: Erasing border and padding in javascript window

On 17 Nov 2004 08:45:45 GMT, Eva Lean wrote:

(no norder in image page)

(A.T.)
CSS. (JS is not needed for this one)
[color=blue]
> Thanks. But what do insert and where in my coding do i insert it?[/color]

(Please quote a little of what you are replying to, Eva, to
give it a context. Copy/paste if necessary.)

1st, the best group for advice on CSS is not one that discusses JS.

You are currently posting to
<http://groups.google.c om/groups?as_ugrou p=comp.lang.jav ascript>
...whereas those CSS answers are found on..
<http://groups.google.c om/groups?as_ugrou p=comp.infosyst ems.www.authori ng.stylesheets>

Do a search on the latter group and read some of the posts.
If that does not sort the problem, make a post.

HTH

--
Andrew Thompson
http://www.PhySci.org/codes/ Web & IT Help
http://www.PhySci.org/ Open-source software suite
http://www.1point1C.org/ Science & Technology
http://www.LensEscapes.com/ Images that escape the mundane

[Andrew Thompson]

Re: Erasing border and padding in javascript window

On Wed, 17 Nov 2004 09:20:34 GMT, Michael Winter wrote:
[color=blue]
> On Wed, 17 Nov 2004 08:35:53 GMT, Andrew Thompson <SeeMySites@www .invalid>
> wrote:
>[color=green]
>> On 17 Nov 2004 00:23:38 -0800, Eva wrote:
>>[color=darkred]
>>> [...] it has a space on the top and on the left of my larger pic in the
>>> pop-up window. How do i get rid of that?[/color]
>>
>> CSS. (JS is not needed for this one)[/color]
>
> I don't think that's feasible here. In the OP, the contents of the new
> window is an image by itself. CSS would have no application here.[/color]

Oops! My bad. I glanced at the original post and saw HTML
tables and stuff and jumped to the wrong conclusion that it
was the image page.

OTOH, instead of 'showing a raw image' in a window, the OP
could 'show the image page' in the new window, and give it
the image path/name as a parameter in the URL.

(Which would then bring us back to CSS as the solution)

--
Andrew Thompson
http://www.PhySci.org/codes/ Web & IT Help
http://www.PhySci.org/ Open-source software suite
http://www.1point1C.org/ Science & Technology
http://www.LensEscapes.com/ Images that escape the mundane

[Michael Winter]

Re: Erasing border and padding in javascript window

On Wed, 17 Nov 2004 09:53:51 GMT, Andrew Thompson <SeeMySites@www .invalid>
wrote:

[snip]
[color=blue]
> OTOH, instead of 'showing a raw image' in a window, the OP
> could 'show the image page' in the new window, and give it
> the image path/name as a parameter in the URL.[/color]

You could.

You could also not use a new window, avoiding the problem entirely. :)

Mike

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.

[Andrew Thompson]

Re: Erasing border and padding in javascript window

On Wed, 17 Nov 2004 10:01:01 GMT, Michael Winter wrote:
[color=blue]
> You could also not use a new window, avoiding the problem entirely. :)[/color]

...best suggestion that has come up in this thread so far.

It will also save the site owners money in support
'I just installed [IE SP2, Google Toolbar..] now your site is
broken! I clicked a link and nothing happened.. '

--
Andrew Thompson
http://www.PhySci.org/codes/ Web & IT Help
http://www.PhySci.org/ Open-source software suite
http://www.1point1C.org/ Science & Technology
http://www.LensEscapes.com/ Images that escape the mundane

[RobB]

Re: Erasing border and padding in javascript window

Andrew Thompson <SeeMySites@www .invalid> wrote in message news:<1ux6k2x7k ajkj.1u0att268t e2c$.dlg@40tude .net>...[color=blue]
> On Wed, 17 Nov 2004 10:01:01 GMT, Michael Winter wrote:
>[color=green]
> > You could also not use a new window, avoiding the problem entirely. :)[/color]
>
> ..best suggestion that has come up in this thread so far.
>
> It will also save the site owners money in support
> 'I just installed [IE SP2, Google Toolbar..] now your site is
> broken! I clicked a link and nothing happened.. '[/color]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>foo</title>
<base href="http://www.maineviews. com/albums/album11/" />
<style type="text/css">

img {
display: block;
margin: 12px;
border: none;
}

</style>
<script type="text/javascript">

var picwin = null;
var filepath = 'http://www.maineviews. com/albums/album11/';
var sHTML = '';

function getHTML()
{
return sHTML;
}

function pw(src, w, h, title, BG)
{
if (null != picwin && !picwin.closed)
picwin.close();
src = (filepath || '').concat(src) ;
var l = (screen.availWi dth - w - 10) * .5;
var t = (screen.availHe ight - h) * .5;
var config = 'width=' + w + ',height=' + h + ',left=' + l + ',top=' +
t + ',status=0';
title = title || 'Picture Window'
BG = BG || '#000';
sHTML = '';
sHTML += '<html><head><t itle>' + title + '</title></head>' +
'<body style="margin:0 ;background:'+B G+';' +
' onblur="setTime out(function(){ self.focus()},2 00)"' +
' onclick="self.c lose()"><img style="border-width:0;cursor: pointer;"'
+
' title="click to close" src="' + src + '"></a></body></html>';

picwin = open('javascrip t:opener.getHTM L()', 'picwin', config);
if (null != picwin && !picwin.closed)
picwin.focus();
return false;
}

</script>
</head>
<body>
<a href="#null" onclick="return pw('sugarshaker s.sized.jpg', 640, 424,
'Sugar Shakers')">
<img src="sugarshake rs.thumb.jpg" />
</a>
<a href="#null" onclick="return pw('threeviews. sized.jpg', 640, 154,
'Three Views')">
<img src="threeviews .thumb.jpg" />
</a>
<a href="#null" onclick="return pw('simplefruit _finished.sized .jpg',
640, 459, 'Simple Fruit')">
<img src="simplefrui t_finished.thum b.jpg" />
</a>
</body>
</html>

[RobB]

Re: Erasing border and padding in javascript window

Andrew Thompson <SeeMySites@www .invalid> wrote in message news:<1ux6k2x7k ajkj.1u0att268t e2c$.dlg@40tude .net>...[color=blue]
> On Wed, 17 Nov 2004 10:01:01 GMT, Michael Winter wrote:
>[color=green]
> > You could also not use a new window, avoiding the problem entirely. :)[/color]
>
> ..best suggestion that has come up in this thread so far.
>
> It will also save the site owners money in support
> 'I just installed [IE SP2, Google Toolbar..] now your site is
> broken! I clicked a link and nothing happened.. '[/color]

Oops. Sorry, typo...

sHTML += '<html><head><t itle>' + title + '</title></head>' +
'<body style="margin:0 ;background:'+B G+';"' +
' onblur="setTime out(\'self.focu s()\',100)"' +
' onclick="self.c lose()"><img style="border-width:0;cursor: pointer;"' +
' title="click to close" src="' + src + '"></a></body></html>';

[Andrew Thompson]

Re: Erasing border and padding in javascript window

On 17 Nov 2004 11:11:27 -0800, RobB wrote:
[color=blue]
> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
> "http://www.w3.org/TR/html4/loose.dtd">[/color]
(snip)

That seems to do the trick. (Well, in IE in any case.)

Nice pics too, but is there any chance of you supplying
at least one without a border? I had to look closely
at the pop-up window before I could convince myself the
image filled the entire window (as opposed to simply having
a page BG color that matched the edge color).

--
Andrew Thompson
http://www.PhySci.org/codes/ Web & IT Help
http://www.PhySci.org/ Open-source software suite
http://www.1point1C.org/ Science & Technology
http://www.LensEscapes.com/ Images that escape the mundane

[Andrew Thompson]

Re: Erasing border and padding in javascript window

On 17 Nov 2004 11:43:27 -0800, RobB wrote:
[color=blue]
> Oops.[/color]

<shaking clenched fist in air>
*Damn* you!
</shaking clenched fist in air>
[color=blue]
> ..Sorry, typo...[/color]

Ohh.. (mellows) well in that case I'll just demand a full refund. ;-)

[Michael Winter]

[OT] Re: Erasing border and padding in javascript window

On 17 Nov 2004 11:11:27 -0800, RobB <ferndoc9@hotma il.com> wrote:

[snip]

My first remark is: what on Earth does this have to do with Andrew's post?
Please follow-up to the appropriate location.
[color=blue]
> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
> "http://www.w3.org/TR/html4/loose.dtd">[/color]

Why not Strict?

[snip]
[color=blue]
> var filepath = 'http://www.maineviews. com/albums/album11/';[/color]

Unnecessary.
[color=blue]
> var sHTML = '';
>
> function getHTML()
> {
> return sHTML;
> }[/color]

All of that is totally pointless.

[snip]
[color=blue]
> src = (filepath || '').concat(src) ;[/color]

Soon to be obsolete.
[color=blue]
> var l = (screen.availWi dth - w - 10) * .5;
> var t = (screen.availHe ight - h) * .5;[/color]

That will piss some people off. It's also useless for tabbed browsers.
[color=blue]
> var config = 'width=' + w + ',height=' + h + ',left=' + l + ',top=' +
> t + ',status=0';[/color]

You should never remove the status bar, beside it's not possible in decent
browsers (even IE). At minimum, the specified features should be

'status,scrollb ars,resizable'

[snip]
[color=blue]
> '<body style="margin:0 ;background:'+B G+';' +
> ' onblur="setTime out(function(){ self.focus()},2 00)"' +[/color]

Well, won't that annoy people...
[color=blue]
> ' onclick="self.c lose()">[/color]

....and that may confuse.

[snip]
[color=blue]
> <a href="#null" onclick="return pw('sugarshaker s.sized.jpg', 640, 424,
> 'Sugar Shakers')">[/color]

The sensible thing would be to link to the actual image. You can then use

return pw(this.href, ...);

to open the image. This would remove any dependancy to Javascript.
[color=blue]
> <img src="sugarshake rs.thumb.jpg" />[/color]

That's invalid for two reasons:

1) The alt attribute is required.
2) "Empty" HTML elements do not end with />. That's XHTML.

[snip]

Mike

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.

[Eva Lean]

Re: Erasing border and padding in javascript window


Sorry guys, thanks for all your help. I'm still having problems with
this...

This is my coding so far. remember that im doing a picture album site
with all these thumbnails to popup in new javascript windows with no
borders. I want the window to appear around the image & thats it.

With the css code that was just posted, do i have insert to just the
beginning of my coding or do i insert around every thumbnail?

I'm new at this, so thats why its taking longer for me to understand.
thanks for your patience.

This my coding so far:

<html>
<head>
<title>MattMe </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<style type="text/css">

<!--
BODY {
scrollbar-face-color: #FF99CC;
scrollbar-shadow-color: #3333FF;
scrollbar-highlight-color: #3333FF;
scrollbar-3dlight-color: #3333FF;
scrollbar-darkshadow-color: #3333FF;
scrollbar-track-color: #3333FF;
scrollbar-arrow-color: #000000
}
-->
</style>

<body STYLE="backgrou nd-color: transparent">
<center>
<table height="333" border="0" align="center" cellspacing="0" >
<tr valign="bottom" >
<td align="center"> <SCRIPT language="JavaS cript">
<!--
function my_win()
{
window.open('pi cturealbum/MattMe%20Thumbn ails/images/MattMe1_jpg.jpg ','m
ywindow','width =306,height=257 ');
}
//-->
</SCRIPT> <A HREF="javascrip t:my_win()"><IM G
SRC="picturealb um/MattMe%20Thumbn ails/thumbnails/MattMe1_jpg.jpg "
border="0"></A></td>
<td align="center"> <a
href="pictureal bum/MattMe%20Thumbn ails/images/MattMe10_jpg.jp g"><img
src="picturealb um/MattMe%20Thumbn ails/thumbnails/MattMe10_jpg.jp g"
border="0"></a>
</td>
<td align="center"> <a
href="pictureal bum/MattMe%20Thumbn ails/images/MattMe12_jpg.jp g"><img
src="picturealb um/MattMe%20Thumbn ails/thumbnails/MattMe12_jpg.jp g"
border="0"></a>
</td>
<td align="center"> <a
href="pictureal bum/MattMe%20Thumbn ails/images/MattMe9_jpg.jpg "><img
src="picturealb um/MattMe%20Thumbn ails/thumbnails/MattMe9_jpg.jpg "
border="0"></a>
</td>
</tr>
<tr valign="bottom" >
<td align="center"> <a
href="pictureal bum/MattMe%20Thumbn ails/images/MattMe13_jpg.jp g"><img
src="picturealb um/MattMe%20Thumbn ails/thumbnails/MattMe13_jpg.jp g"
border="0"></a>
</td>
<td align="center"> <a
href="pictureal bum/MattMe%20Thumbn ails/images/MattMe15_jpg.jp g"><img
src="picturealb um/MattMe%20Thumbn ails/thumbnails/MattMe15_jpg.jp g"
border="0"></a>
</td>
<td align="center"> <a
href="pictureal bum/MattMe%20Thumbn ails/images/MattMe2_jpg.jpg "><img
src="picturealb um/MattMe%20Thumbn ails/thumbnails/MattMe2_jpg.jpg "
border="0"></a>
</td>
<td align="center"> <a
href="pictureal bum/MattMe%20Thumbn ails/images/MattMe11_jpg.jp g"><img
src="picturealb um/MattMe%20Thumbn ails/thumbnails/MattMe11_jpg.jp g"
border="0"></a>
</td>
</tr>
<tr valign="bottom" >
<td align="center"> <a
href="pictureal bum/MattMe%20Thumbn ails/images/MattMe5_jpg.jpg "><img
src="picturealb um/MattMe%20Thumbn ails/thumbnails/MattMe5_jpg.jpg "
border="0"></a>
</td>
<td align="center"> <a
href="pictureal bum/MattMe%20Thumbn ails/images/MattMe6_jpg.jpg "><img
src="picturealb um/MattMe%20Thumbn ails/thumbnails/MattMe6_jpg.jpg "
border="0"></a>
</td>
<td align="center"> <a
href="pictureal bum/MattMe%20Thumbn ails/images/MattMe7_jpg.jpg "><img
src="picturealb um/MattMe%20Thumbn ails/thumbnails/MattMe7_jpg.jpg "
border="0"></a>
</td>
<td align="center"> <a
href="pictureal bum/MattMe%20Thumbn ails/images/MattMe8_jpg.jpg "><img
src="picturealb um/MattMe%20Thumbn ails/thumbnails/MattMe8_jpg.jpg "
border="0"></a>
</td>
</tr>
</table>
</center>
</body>
</html>

*** Sent via Developersdex http://www.developersdex.com ***
Don't just participate in USENET...get rewarded for it!

[Eva Lean]

Re: [OT] Re: Erasing border and padding in javascript window

Thanks guys for being patient and helping me. But i dont have any idea
where to insert the previous codnig into my existing coding. Can someone
pls tell me where to put it in my code pls.....I just want to get rid of
the border and padding around the image in a new javascript pop-up
window


<html>
<head>
<title>MattMe </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<style type="text/css">

<!--
BODY {
scrollbar-face-color: #FF99CC;
scrollbar-shadow-color: #3333FF;
scrollbar-highlight-color: #3333FF;
scrollbar-3dlight-color: #3333FF;
scrollbar-darkshadow-color: #3333FF;
scrollbar-track-color: #3333FF;
scrollbar-arrow-color: #000000
}
-->
</style>

<body STYLE="backgrou nd-color: transparent">
<center>
<table height="333" border="0" align="center" cellspacing="0" >
<tr valign="bottom" >
<td align="center"> <SCRIPT language="JavaS cript">
<!--
function my_win()
{
window.open('pi cturealbum/MattMe%20Thumbn ails/images/MattMe1_jpg.jpg ','m
ywindow','width =306,height=257 ');
}
//-->
</SCRIPT> <A HREF="javascrip t:my_win()"><IM G
SRC="picturealb um/MattMe%20Thumbn ails/thumbnails/MattMe1_jpg.jpg "
border="0"></A></td>
<td align="center"> <a
href="pictureal bum/MattMe%20Thumbn ails/images/MattMe10_jpg.jp g"><img
src="picturealb um/MattMe%20Thumbn ails/thumbnails/MattMe10_jpg.jp g"
border="0"></a>
</td>
<td align="center"> <a
href="pictureal bum/MattMe%20Thumbn ails/images/MattMe12_jpg.jp g"><img
src="picturealb um/MattMe%20Thumbn ails/thumbnails/MattMe12_jpg.jp g"
border="0"></a>
</td>
<td align="center"> <a
href="pictureal bum/MattMe%20Thumbn ails/images/MattMe9_jpg.jpg "><img
src="picturealb um/MattMe%20Thumbn ails/thumbnails/MattMe9_jpg.jpg "
border="0"></a>
</td>
</tr>
<tr valign="bottom" >
<td align="center"> <a
href="pictureal bum/MattMe%20Thumbn ails/images/MattMe13_jpg.jp g"><img
src="picturealb um/MattMe%20Thumbn ails/thumbnails/MattMe13_jpg.jp g"
border="0"></a>
</td>
<td align="center"> <a
href="pictureal bum/MattMe%20Thumbn ails/images/MattMe15_jpg.jp g"><img
src="picturealb um/MattMe%20Thumbn ails/thumbnails/MattMe15_jpg.jp g"
border="0"></a>
</td>
<td align="center"> <a
href="pictureal bum/MattMe%20Thumbn ails/images/MattMe2_jpg.jpg "><img
src="picturealb um/MattMe%20Thumbn ails/thumbnails/MattMe2_jpg.jpg "
border="0"></a>
</td>
<td align="center"> <a
href="pictureal bum/MattMe%20Thumbn ails/images/MattMe11_jpg.jp g"><img
src="picturealb um/MattMe%20Thumbn ails/thumbnails/MattMe11_jpg.jp g"
border="0"></a>
</td>
</tr>
<tr valign="bottom" >
<td align="center"> <a
href="pictureal bum/MattMe%20Thumbn ails/images/MattMe5_jpg.jpg "><img
src="picturealb um/MattMe%20Thumbn ails/thumbnails/MattMe5_jpg.jpg "
border="0"></a>
</td>
<td align="center"> <a
href="pictureal bum/MattMe%20Thumbn ails/images/MattMe6_jpg.jpg "><img
src="picturealb um/MattMe%20Thumbn ails/thumbnails/MattMe6_jpg.jpg "
border="0"></a>
</td>
<td align="center"> <a
href="pictureal bum/MattMe%20Thumbn ails/images/MattMe7_jpg.jpg "><img
src="picturealb um/MattMe%20Thumbn ails/thumbnails/MattMe7_jpg.jpg "
border="0"></a>
</td>
<td align="center"> <a
href="pictureal bum/MattMe%20Thumbn ails/images/MattMe8_jpg.jpg "><img
src="picturealb um/MattMe%20Thumbn ails/thumbnails/MattMe8_jpg.jpg "
border="0"></a>
</td>
</tr>
</table>
</center>
</body>
</html>


*** Sent via Developersdex http://www.developersdex.com ***
Don't just participate in USENET...get rewarded for it!