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 SkipVought on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Pop up problem 1

Status
Not open for further replies.
Christylh8

Christylh8

IS-IT--Management
Jul 14, 2002
25
0
0
US
I have an issue with a pop up code. I wanted a pop up of a larger artwork image from a thumbnail to stay on top, open only one pop up instead of several and be the exact size of each image.

I got the "stay on top" part to work successfully, but the window will not resize itself to the uniquely specified sizes. For example, the first thumbnail I click, the windows sizes itself properly, but the second window maintains the same size of the previous pop up even though it needs to be bigger.

Can anyone help me out? Here's my code. Thanks so much!

Christy

<script language=&quot;JavaScript&quot; type=&quot;text/JavaScript&quot;>

var PicWin = null;

function NewWindow (mypage,myname,w,h) {
LeftPosition = 0;
TopPosition = 0;
settings = 'height='+h+',width='+w+',top='+TopPosition+',left='+LeftPosition+',scrollbars=no,resizable=no';
PicWin = window.open(mypage,myname,settings);
PicWin.focus();
}
</script>

Call:

<td><div align=&quot;center&quot;><a href=&quot;gordon.html&quot; onclick=&quot;NewWindow(this.href,'PicWindow','504','315'); return false&quot;><img src=&quot;Thumbnails/Gordon.gif&quot; alt=&quot;[NASCAR] Jeff Gordon Ribbon&quot; width=&quot;80&quot; height=&quot;82&quot; border=&quot;0&quot;></a></div></td>

<td><div align=&quot;center&quot;><a href=&quot;americana.html&quot; onclick=&quot;NewWindow(this.href,'PicWindow','502','227'); return false&quot;><img src=&quot;Thumbnails/Americana.gif&quot; alt=&quot;[Six Flags] Americana&quot; width=&quot;82&quot; height=&quot;82&quot; border=&quot;0&quot; /></a></div></td>
 
Sort by date Sort by votes
Here's some code I wrote that preloads the image to find its dimensions automatically:
Code: 
<head>
<script language=&quot;JavaScript&quot;>
var lastImage,tmrImg,loopCount=1;
function vwImg(img){
  window.status='Loading Image, Please wait...';
  clearTimeout(tmrImg);
  lastImage= new Image();
  lastImage.src=img;
  vwImg2();
}
function vwImg2(){
  if(loopCount%30==0){
    if(!confirm('This image is having trouble loading. Continue to wait?')){window.status='Cancelled.';return false}
  }
  if(!lastImage.complete){
    loopCount++
    window.status+='.'
    tmrImg=setTimeout(&quot;vwImg2();&quot;, 500)
  }
  else{
    if(window.msg){window.msg.close()}
    w=(screen.width>lastImage.width ? lastImage.width : screen.width);
    h=(screen.height>lastImage.height ? lastImage.height: screen.height);
    canScroll=(w<lastImage.width || h<lastImage.height ? 1:0);
    msg=window.open('','msg','width='+w+',height='+h+',resizable,scrollbars='+canScroll);
    msg.document.write('<html><body leftmargin=0 topmargin=0 marginwidth=0 marginheight=0><img src=&quot;'+lastImage.src+'&quot;></body></html>');
    window.status='Done.'
  }
}
</script>

</head>
<body>
<a href=&quot;1.gif&quot; target=&quot;_blank&quot; onclick=&quot;vwImg('1.gif');return false&quot;>1</a><br>
<a href=&quot;2.jpg&quot; target=&quot;_blank&quot; onclick=&quot;vwImg('2.jpg');return false&quot;>2</a><br>
<a href=&quot;3.jpg&quot; target=&quot;_blank&quot; onclick=&quot;vwImg('3.jpg');return false&quot;>3</a><br>
<a href=&quot;4.jpg&quot; target=&quot;_blank&quot; onclick=&quot;vwImg('4.jpg');return false&quot;>4</a><br>
</body>
 
Upvote 0 Downvote
This is another script I wrote that hides the popup until the image is loaded, then resizes the window to the size of the image automatically. I like this one better than the one above.
Code: 
<head>
<script language=&quot;JavaScript&quot;>
function vwImg(img){
  if(window.msg){window.msg.close()}
  msg=window.open('','msg','width=200,height=200,left=10000,top=0,resizable,scrollbars');
  msg.resizeTo(200,200)
  msg.document.write('<html><body leftmargin=0 topmargin=0 marginwidth=0 marginheight=0><img src=&quot;'+img+'&quot;></body></html>');
  checkImg()
}
function checkImg(){
  if(msg.document.images[0].complete){
    w = 200 - (msg.document.body.clientWidth -  msg.document.images[0].width);
    h = 200 - (msg.document.body.clientHeight -  msg.document.images[0].height);
    w=screen.width>w ? w : screen.width-30;
    h=screen.height>h ? h : screen.height-30;
    msg.resizeTo(w,h)
    msg.moveTo(0,0)
  }
  else{setTimeout('checkImg()',50)}
}
</script>

</head>
<body>
<a href=&quot;1.gif&quot; target=&quot;_blank&quot; onclick=&quot;vwImg('1.gif');return false&quot;>1</a><br>
<a href=&quot;2.jpg&quot; target=&quot;_blank&quot; onclick=&quot;vwImg('2.jpg');return false&quot;>2</a><br>
<a href=&quot;3.jpg&quot; target=&quot;_blank&quot; onclick=&quot;vwImg('3.jpg');return false&quot;>3</a><br>
<a href=&quot;4.jpg&quot; target=&quot;_blank&quot; onclick=&quot;vwImg('4.jpg');return false&quot;>4</a><br>
</body>
 
Upvote 0 Downvote
Adam,

That last script works excellent except for one thing.
When the .jpg images in full pop up, it links back to the main html file and I cannot change the image titles, which is very important.

Is there a script using a window/html instead of vwimg/ popping up an image file?

Thanks so much!
Christy
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

berkshirea
  • Locked
  • Question
Change the Default Pop Up Message 2
Replies
8
Views
133
berkshirea
berkshirea
Krus1972
  • Locked
  • Question
Pop-up Blocker Detecter
Replies
1
Views
52
spamjim
spamjim
amrmnabil
  • Locked
  • Question
React Problem
Replies
0
Views
82
amrmnabil
amrmnabil
bs6600
  • Locked
  • Question
Nested accordion problem
Replies
1
Views
57
bs6600
bs6600
Disskyz
  • Locked
  • Question
New to JavaScript, Having a problem with an array
Replies
2
Views
78
Disskyz
Disskyz

Part and Inventory Search

Sponsor

Back
Top