Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Popup Window Resizes To Fit Image

Posted on 2004-11-02
8
Medium Priority
?
965 Views
Last Modified: 2011-08-18
My page has a bunch of thumbnails. When the user clicks a thumbnail, I use the following function to open a popup window which resizes the window to fit the image:

THUMBS.HTM
----------------
<script language='javascript'>
function PopupPic(sPicURL) {
  window.open( "popup.asp?"+sPicURL, "", "resizable=1,HEIGHT=200,WIDTH=200")
 
}
</script>

<a href="javascript:PopupPic('images/options/topdeckanchorlock.jpg')">

POPUP.ASP
-------------
 <script language='javascript'>
   var arrTemp=self.location.href.split("?");
   var picUrl = (arrTemp.length>0)?arrTemp[1]:"";
   var NS = (navigator.appName=="Netscape")?true:false;

     function FitPic() {
       iWidth = (NS)?window.innerWidth:document.body.clientWidth;
       iHeight = (NS)?window.innerHeight:document.body.clientHeight;
       iWidth = document.images[0].width - iWidth;
       iHeight = document.images[0].height - iHeight;
       window.resizeBy(iWidth, iHeight);
       self.focus();
     };
 </script>

<body onload='FitPic();' topmargin="0" marginheight="0" leftmargin="0" marginwidth="0">

<script language='javascript'>
 document.write( "<img src='" + picUrl + "' border=0>" );
</script>

Question: how can I add and pass along a description in THUMBS.HTM and then write it out on POPUP.ASP?


Thanks!
0
Comment
Question by:yourbudweiser
  • 6
  • 2
8 Comments
 
LVL 30

Expert Comment

by:VirusMinus
ID: 12480040
try this ->

THUMBS.HTM
----------------
<script language='javascript'>
function PopupPic(sPicURL, sPicDesc) {
  window.open( "popup.asp?"+sPicURL+"&"+sPicDesc, "", "resizable=1,HEIGHT=200,WIDTH=200")
 
}
</script>

<a href="javascript:PopupPic('images/options/topdeckanchorlock.jpg','picture description')">

POPUP.ASP
-------------
 <script language='javascript'>
   var arrTemp=self.location.href.split("?");
   var picUrl = (arrTemp.length>0)?arrTemp[1]:"";
   var arrTemp=self.location.href.split("&");
   var picDesc = (arrTemp.length>0)?arrTemp[1]:"";
   var NS = (navigator.appName=="Netscape")?true:false;

     function FitPic() {
       iWidth = (NS)?window.innerWidth:document.body.clientWidth;
       iHeight = (NS)?window.innerHeight:document.body.clientHeight;
       iWidth = document.images[0].width - iWidth;
       iHeight = document.images[0].height - iHeight;
       window.resizeBy(iWidth, iHeight);
       self.focus();
     };
 </script>

<body onload='FitPic();' topmargin="0" marginheight="0" leftmargin="0" marginwidth="0">

<script language='javascript'>
 document.write( "<img src='" + picUrl + "' border=0><br>" + picDesc  );
</script>
0
 
LVL 30

Expert Comment

by:VirusMinus
ID: 12480052
alternately because you are using ASP you could also do this ->

THUMBS.HTM
----------------
<script language='javascript'>
function PopupPic(sPicURL, sPicDesc) {
  window.open( "popup.asp?picURL="+sPicURL+"&picDesc="+sPicDesc, "", "resizable=1,HEIGHT=200,WIDTH=200")
 
}
</script>

<a href="javascript:PopupPic('images/options/topdeckanchorlock.jpg','picture description')">

POPUP.ASP
-------------
<%
Dim picURL, picDesc
picURL = Request.QueryString("picURL")
picDesc = Request.QueryString("picDesc")
%>

 <script language='javascript'>
//   commented out beacause it is being done in ASP
//   var arrTemp=self.location.href.split("?");
//   var picUrl = (arrTemp.length>0)?arrTemp[1]:"";
//   var arrTemp=self.location.href.split("&");
//   var picDesc = (arrTemp.length>0)?arrTemp[1]:"";

   var NS = (navigator.appName=="Netscape")?true:false;

     function FitPic() {
       iWidth = (NS)?window.innerWidth:document.body.clientWidth;
       iHeight = (NS)?window.innerHeight:document.body.clientHeight;
       iWidth = document.images[0].width - iWidth;
       iHeight = document.images[0].height - iHeight;
       window.resizeBy(iWidth, iHeight);
       self.focus();
     };
 </script>

<body onload='FitPic();' topmargin="0" marginheight="0" leftmargin="0" marginwidth="0">

<script language='javascript'>
 document.write( "<img src='" + <%= picURL %> + "' border=0><br>" + <%= picDesc %>  );
</script>
0
 
LVL 3

Author Comment

by:yourbudweiser
ID: 12483241
VirusMinus, thanks alot for responding. Unfortunately, neither of your responses worked. The window pops open but no image appears in it. Any ideas?

Thanks.
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
LVL 30

Expert Comment

by:VirusMinus
ID: 12489076
what comes up? can u view the source of the popup and paste it? If a red 'X' comes up we can see where the path of the image is pointing to.
0
 
LVL 30

Expert Comment

by:VirusMinus
ID: 12489092
i just noticed.. both solutions are missing </body> </html> at the end
0
 
LVL 30

Accepted Solution

by:
VirusMinus earned 200 total points
ID: 12489335
ok i've tested these..

Here's thumbs.htm
-=-=-=-=-=-=-=-=-=-=-=-=-

<html>
<head>
<script language='javascript'>
function PopupPic(sPicURL, sPicDesc) {
  window.open( "popup.htm?picURL="+sPicURL+"&picDesc="+sPicDesc, "", "resizable=1,HEIGHT=200,WIDTH=200")
 }
</script>
</head>
<body>
  <center>
  <div style="margin-left:auto;margin-right:auto;width:500px;">
  <table border=1 width=100% bgcolor=#FFFFCC height=500>
       <tr><td><div id=blah style="position:relative; left:100; top:200;">


<a href="javascript:PopupPic('images/home.jpg','picture description')">here</a>

         </div></td></tr>
  </table>
  </div>
</body>
</html>

-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=--=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
also note I'm passing the querystrings the way they're supposed to be passed, i.e.
popup.htm?picURL=images/sadasd.jpg&picDesc=picture description
and here's popup.asp or popup.htm, you can call it whatever... there's no ASP.
I'm calling it popup.htm
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=--=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-

<html>
<head>
 <script language='javascript'>
      function myunescape(s){
       for(var i=0;i<s.length;i++){
         if(s.charAt(i)=='+'){
           s=s.substring(0,i)+" "+s.substring(i+1);
         }
       }
       return unescape(s)
      }
            
      function querystring(name)
      {tmp = location.search;
       while(tmp.length>1){
         tmp=tmp.substring(1); // chop first ? or &
         inx=tmp.indexOf("&");
         if(inx<0) inx=tmp.length;
         t=tmp.substring(0,inx);
      
         tmp=tmp.substring(inx);
         inx=t.indexOf("=");
         n=myunescape(t.substring(0,inx));
         v=myunescape(t.substring(inx+1));
         if(n==name){
           return v;
        }
       }
       return null
      }
      
      var picURL = querystring('picURL');
      var picDesc = querystring('picDesc');
    var NS = (navigator.appName=="Netscape")?true:false;

     function FitPic() {
       iWidth = (NS)?window.innerWidth-2:document.body.clientWidth-2;
       iHeight = (NS)?window.innerHeight-25:document.body.clientHeight-25;
       iWidth = document.images[0].width - iWidth;
       iHeight = document.images[0].height - iHeight;
       window.resizeBy(iWidth, iHeight);
         centerWindow();
       self.focus();
     }
 </script>
</head>
<body onload='FitPic();' topmargin="0" marginheight="0" leftmargin="0" marginwidth="0">
<script language='javascript'>
 document.write( "<center><img src='" + picURL + "' border=0><br>" + picDesc + "</center>");
</script>
</body>
</html>
0
 
LVL 3

Author Comment

by:yourbudweiser
ID: 12493348
Actually figured this one out based on your previous answer so thanks! Here's the solution I am using:

THUMBS.HTM
----------------
<script language="Javascript">
    function PopupPic(sPicURL) {
      newWin=window.open( sPicURL, 'newWin','resizable=1,HEIGHT=200,WIDTH=200');
      newWin.focus();
    }
</script>

<a href="popup.asp?image=images/options/keywestttop.jpg&desc=Key West T-Top" onclick="PopupPic(this.href); return false;" target="_blank"><img border="0" src="images/options/a2.gif" width="83" height="57"></a>

POPUP.ASP
-------------
<%
dim image_name
image_name=Request.QueryString("image")
description=Request.QueryString("desc")
%>

<script language='javascript'>
var NS = (navigator.appName=="Netscape")?true:false;
function FitPic() {
iWidth = (NS)?window.innerWidth:document.body.clientWidth;
iHeight = (NS)?window.innerHeight:document.body.clientHeight;
iWidth = document.images[0].width - iWidth;
iHeight = document.images[0].height - iHeight;
window.resizeBy(iWidth, iHeight);
self.focus();
};
</script>

<body onload="FitPic();" topmargin="0" marginheight="0" leftmargin="0" marginwidth="0">
<img src="<%=image_name%>" border="0" alt="">
<font face="Verdana"><b><%=description%></b></font>

Works great,
thanks!


0
 
LVL 30

Expert Comment

by:VirusMinus
ID: 12493683
Glad I could help.

Cheers,
-VM
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

804 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question