PDA

View Full Version : resizable popup question

webmarkart
09-22-2002, 07:18 AM
I have a script that dynamically sizes a popup with the measurments I give in the href... here is the code:

<script language="JavaScript">
function newWindow(url, height, width)
{
nameW='feature';
if (navigator.appVersion.indexOf('4') != -1)
{
xTop = screen.width/2 - (width/2); yTop = screen.height/2 - (height/2); window.open(url, nameW, 'height='+height+',width='+width+',scrollbars=0,resizable=0,menubar=0,toolbar=0,status=0,location=0, directories=0,left=' + xTop + ',top=' + yTop + '');
}
else
{
window.open(url, nameW, 'height='+height+',width='+width+',scrollbars=0,resizable=0,menubar=0,toolbar=0,status=0,location=0, directories=0,left=75,top=50');
}
}
</script>


<a href="javascript:newWindow('images/samples/pcr_van.jpg',325,436);">whatever</a>

The script works great except the popup has a default top and left margin that I can't get rid of. I know if I was linking to another page how to change the margins, but I want to link directly to an image. Anyone know how to fix this? Check out the page I'm using it on...www.webmarkart.com/signshop/samples.htm
Spookster
09-22-2002, 08:08 AM
http://www.codingforums.com/showthread.php?s=&threadid=1625
Pooh
09-22-2002, 08:23 AM
A couple I saved from javascript city.......haven't tested them

<HTML>
<HEAD>
<SCRIPT>
var windowFeatures ='resizable=1,scrollbars=1,menubar=1,location=1,toolbar=1,statusbar=1';
function showImage (imgURL) {
var img = new Image();
img.onload = openImageWindow;
img.src = imgURL;
}
function openImageWindow (evt) {
if (window.innerWidth) {
var w = this.width;
var h = this.height;
var win = open('about:blank', '_blank',
'innerWidth=' + w + ',innerHeight=' + h + ',' +
windowFeatures);
var html = '';
html += '<HTML><HEAD>';
html += '<STYLE>';
html +=
'#imgContainer { position: absolute; left: 0px; top: 0px; }';
html += '<\/STYLE>';
html += '<\/HEAD>';
html += '<BODY>';
html += '<SPAN ID="imgContainer">';
html += '<IMG SRC="' + this.src + '">';
html += '<\/SPAN>';
html += '<\/BODY><\/HTML>';
win.document.open();
win.document.write(html);
win.document.close();
}
else if (document.all) {
var w = this.width;
var h = this.height;
var win = open('about:blank', '_blank',
'width=' + w + 'height=' + h + ',' + windowFeatures);
var html = '';
html += '<HTML><HEAD>';
html += '<STYLE>';
html +=
'#imgContainer { position: absolute; left: 0px; top: 0px; }';
html += '<\/STYLE>';
html += '<\/HEAD>';
html += '<BODY>';
html += '<SPAN ID="imgContainer">';
html += '<IMG SRC="' + this.src + '">';
html += '<\/SPAN>';
html += '<\/BODY><\/HTML>';
win.document.open();
win.document.write(html);
win.document.close();
win.resizeBy (w - win.document.body.clientWidth,
h - win.document.body.clientHeight);
win.document.body.scroll = 'no';
}
}

</SCRIPT>
</HEAD>
<BODY>
<A
HREF="http://cagle.slate.msn.com/news/clintonmedia/images/thompson.jpg"
TARGET="_blank",
ONCLICK="showImage(this.href);
return false;"
>
clinton
</A>
|
<A HREF="http://cagle.slate.msn.com/news/statereligion/images/nick.gif"
TARGET="_blank",
ONCLICK="showImage(this.href);
return false;"
>
missile
</A>

</BODY>
</HTML>


******************************************************



<html>
<head>

<SCRIPT LANGUAGE="JavaScript">
<!--

function openPicWin(imageName,imageWidth,imageHeight,alt,posLeft,posTop) {
newWindow = window.open("","newWindow","width="+imageWidth+",height="+imageHeight+",left="+posLeft+",top="+posTop);
newWindow.document.open();
newWindow.document.write('<html><title>'+alt+'</title><body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginheight="0" marginwidth="0" onBlur="self.close()">');
newWindow.document.write('<a href="javascript:window.close()"><img src='+imageName+' width='+imageWidth+' height='+imageHeight+' alt="'+alt+'" border=0><a/>');
newWindow.document.write('</body></html>');
newWindow.document.close();
newWindow.focus();
}

//-->
</SCRIPT>

</head>

<body>

<center>
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>

<!-- The link: -->

<a href="javascript:openPicWin('http://carcino.gen.nz/images/image.php/463c5922/arguing.jpg','500','300','This is cool','20','20')">
<img border="0" src="pic_small.jpg" alt="whatever" width="60" height="36"></a>

</body>
</html>
webmarkart
09-22-2002, 08:31 AM
Thanks Spookster, but I tried that script exactly copying and pasting it into my page and I kept getting an error.

Pooh, I tried the last script you posted and it works great! Thanks, that was exactly what I was looking for. Now maybe I can get to bed sometime before sunrise!
Pooh
09-22-2002, 09:08 AM
:)
Spookster
09-22-2002, 04:59 PM
Originally posted by webmarkart
Thanks Spookster, but I tried that script exactly copying and pasting it into my page and I kept getting an error.

Pooh, I tried the last script you posted and it works great! Thanks, that was exactly what I was looking for. Now maybe I can get to bed sometime before sunrise!

Must be a glitch with copying and pasting it from the board as it works just fine.