Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Westi on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Popups without margins

Status
Not open for further replies.
Volk359

Volk359

Technical User
Jun 30, 2004
395
US
Hello,

I'm creating a popup to display some photos using the following code:

Code: 
<a href="#" onClick="MyWindow=window.open('mypic.jpg','MyWindow','toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no,width=100,height=150'); return false;">Link to pic</a>

The popups have a white border along the top and left side and for the life of me I can't get rid of them. I've tried inserting margin:0, topmargin=0 and setting a style and nothing seems to work.

I figure either I'm using the wrong settings or the right ones and putting them in the wrong place.

Can anyone help?
 
Sort by date Sort by votes
make a page that holds that picture and set its leftmargin and topmargin to 0

--------------------------
"two wrongs don't make a right, but three lefts do" - the unknown sage
 
Upvote 0 Downvote
Well, by default an html page has top and left margins. To rid of this completely you'd have to open an actual html file rather than renedering one on the fly by using a .jpg in the window.open event.

Here is one way around it:

Code: 
function doIt(i) {
    var p = 'toolbar=no,location=no,directories=no,';
    var p += 'status=no,menubar=no,scrollbars=no,';
    var p += 'resizable=no,width=100,height=150';
    var w = window.open('', 'mw', p);
    w.writeln('<html><head><title>');
    w.writeln(i + '</title></head><body style="margin: 0;">');
    w.writeln('<img src="' + i + '">');
    w.writeln('</body></html>');
}

...

<a href="#" onclick="doIt('mypic.jpg');">Link to pic</a>

*cLFlaVA
----------------------------
Lois: "Peter, you're drunk!"
Peter: "I'm not drunk, I'm just exhausted from stayin' up all night drinking!
 
Upvote 0 Downvote
I'd rather not make a page for EVERY photo I've got.

cLFlaVA,

I'm not familiar with this coding, where does it go? Does it need to be inside <>? I put it in the body and the head with strange results.
 
Upvote 0 Downvote
In the head:

Code: 
<script type="text/javascript">
<!--

// From cLFlaVA:

function doIt(i) {
    var p = 'toolbar=no,location=no,directories=no,';
    var p += 'status=no,menubar=no,scrollbars=no,';
    var p += 'resizable=no,width=100,height=150';
    var w = window.open('', 'mw', p);
    w.writeln('<html><head><title>');
    w.writeln(i + '</title></head><body style="margin: 0;">');
    w.writeln('<img src="' + i + '">');
    w.writeln('</body></html>');
}

// -->
</script>

--Chessbot

"See the TURTLE of enormous girth!"
-- Stephen King, The Dark Tower series
 
Upvote 0 Downvote
Thanks, but it doesn't appear to be doing anything. (click the link and nothing happens) I'm doing this from my desktop at work and the setup here doesn't let java work all the time.

I'll give it a try tonight at home.
 
Upvote 0 Downvote
Yup, same thing that was happening at work. Nothing happens when you click on the link except the address reads "file:///C:/Documents..." and from the website nothing except the errors on page message in the LL corner.
 
Upvote 0 Downvote
Volk359-

Feel free if you'd like to send out an assassin to get me. This code works for me:

Code: 
<script type="text/javascript">
<!--

// From cLFlaVA:

function doIt(i) {
    var p = 'toolbar=no,location=no,directories=no,';
    p += 'status=no,menubar=no,scrollbars=no,';
    p += 'resizable=no,width=100,height=150';
    var w = window.open('', 'mw', p);
    w.document.writeln('<html><head><title>');
    w.document.writeln(i + '</title></head><body style="margin: 0;">');
    w.document.writeln('<img src="' + i + '">');
    w.document.writeln('</body></html>');
}

// -->
</script>

Note: you'll have to change height/width to suit your needs.

*cLFlaVA
----------------------------
Lois: "Peter, you're drunk!"
Peter: "I'm not drunk, I'm just exhausted from stayin' up all night drinking!
 
Upvote 0 Downvote
Many thanks cLFlaVA it works like a charm now. No harm done! [thumbsup]

It's a pretty simple code but am I correct to assume this won't work if a user has their java disabled? Would this be an issue for Mac users?
 
Upvote 0 Downvote
That is correct - if JS is disabled, it won't work.

One way around this is the following:

Code: 
<a target="_blank" href="mypic.jpg" onclick="doIt('mypic.jpg'); return false;">Link to pic</a>

Translation:

If JavaScript is enabled, it will open the new window using the function I provided you, then return false (meaning it won't open the link associated with the href).

If JavaScript is disabled, the JavaScript function obviously won't be called, however, because I've put target="_blank" and the href="mypic.jpg", the picture will still open in a new window. It won't be pretty (there will be whitespace) but at least the user will be able to see the image.

Hope this helps.

*cLFlaVA
----------------------------
Lois: "Peter, you're drunk!"
Peter: "I'm not drunk, I'm just exhausted from stayin' up all night drinking!
 
Upvote 0 Downvote
Way cool! BTW, I've got a long list of pics that run down below the bottom of the frame. When one of the pics from down under is picked the browser window resets itself to the top of the page, i.e. after viewing the pic you have to scroll down agin to get to the next one.

Is there a way around it?
 
Upvote 0 Downvote
You sure you have return false; as the last thing in your onclick event?

*cLFlaVA
----------------------------
Lois: "Peter, you're drunk!"
Peter: "I'm not drunk, I'm just exhausted from stayin' up all night drinking!
 
Upvote 0 Downvote
Sorry, didn't try the new coding yet. Works fine and many thanks for your help!!
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

PCHomepage
  • Locked
  • Question
iFrame Scrolling Without Body Scrolling
Replies
8
Views
1K
PCHomepage
PCHomepage
Scorpionkingct
  • Locked
  • Question
HTML: Refresh Page without the flicker
Replies
3
Views
510
ChrisHirst
ChrisHirst
aich69
  • Locked
  • Question
Page position with/without vertical scroll bar.
Replies
2
Views
118
aich69
aich69
gsmartin2
  • Locked
  • Question
framesets and margins 1
Replies
2
Views
99
gsmartin2
gsmartin2
rastaIT34
  • Locked
  • Question
formating without tables 1
Replies
6
Views
152
rastaIT34
rastaIT34

Part and Inventory Search

Sponsor

Back
Top