Solved

Popup Window...

Posted on 2007-03-28
15
290 Views
Last Modified: 2008-02-01
1st)I have a link to popup a window that contains a picture.Everything it is ok with this but i see that when i am for example at the middle or to the end of the page when i press the link to show the picture to the popup window it returns the whole page at the top of page... why? Is about the browser something or is some options more to the js popup?

here is the code i use:

<a href='#' onClick=window.open('./images/pic1.jpg','mywindow','width=400,height=400,resizable=yes,scrollbars=1,status=yes,top=200,left=350')>

2nd)How can i "say" to the popup window to have the height and the width dynamically as pictures height and width?

Thanks in advance!
0
Comment
Question by:alex_code
  • 5
  • 5
  • 4
  • +1
15 Comments
 
LVL 9

Author Comment

by:alex_code
ID: 18806575
It is unbelievable ... a few minutes after my Q i try something... for my 1st question... and i fix the problem.I replace the <a href='#' .... with <a href='#image' and it is ok now.

But i still want a solution for the 2nd part of my Q :)
0
 
LVL 10

Expert Comment

by:Jaax
ID: 18806615
Delegate the opening of the new window to a javascript function
<a href='#' onClick=openImage('./images/pic1.jpg') >

<script>
function openImage(imageURL){
var img = new Image();
onload = function() {alert(img.width + "x" + img.height);};
img.src="pathOfYourImage";

  window.open (imageURL,'mywindow','width='+img.width,height='+img.height',resizable=yes,scrollbars=1,status=yes,top=200,left=350')
}
</script>





0
 
LVL 10

Expert Comment

by:Jaax
ID: 18806626
Please ignore my previous script code,
It should read instead as :

<script>
function openImage(imageURL){
var img = new Image();
img.src=imageURL;
  window.open (imageURL,'mywindow','width='+img.width,height='+img.height',resizable=yes,scrollbars=1,status=yes,top=200,left=350')
}
</script>


0
Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
LVL 9

Author Comment

by:alex_code
ID: 18806657
No my friend Jaax this does not work for me... :( am i doing something wrong or it is something wrong with the code?
0
 
LVL 49

Accepted Solution

by:
Roonaan earned 250 total points
ID: 18806768
The key is to add a "return false;" to the end of your onclick statement:

<a href='#' onClick="window.open('./images/pic1.jpg','mywindow','width=400,height=400,resizable=yes,scrollbars=1,status=yes,top=200,left=350');return false;">

Without the return false, the url defined in href="" will be executed. return false makes sure this doesn't happen.

Kind regards

-r-
0
 
LVL 9

Author Comment

by:alex_code
ID: 18806876
oh yes my friend Roonaan your solution is the right solution about my first Q because my solution does not work 100% right but yours it is work exactly as i want.

1000 points it's yours and i am expecting to give the other 1000 points to the person that will answer me about the dynamic height and width of the popup window as the images height and width.

Thank man again!
0
 
LVL 49

Expert Comment

by:Roonaan
ID: 18806893
As to the second question it is important to know wether or not you know the image size before loading the window, or need a more on-the-fly solution.

-r-
0
 
LVL 9

Author Comment

by:alex_code
ID: 18806999
yes something like Jaax solution that he gave me in a previous post but it doesn't work, i ask him why it doesn't work am i doing something wrong?I expect him or someone else to give me a solution.
0
 
LVL 10

Assisted Solution

by:Jaax
Jaax earned 250 total points
ID: 18807003
There were a few typos.
Replace openImage with this one:
      function openImage(imageURL){

      var img = new Image();
      img.src=imageURL;
      alert('Dimension : '+img.width+' * '+img.height);
        window.open(imageURL,'mywindow','width='+img.width+',height='+img.height+',resizable=yes,scrollbars=1,status=yes,top=200,left=350')
      }
0
 
LVL 49

Expert Comment

by:Roonaan
ID: 18807007
It doesn't work because the height and width might not be set when the image is not fully loaded.

Try:

<script>
var myWin;
function openImage(imageURL){
var img = new Image();
img.src=imageURL;
myWin = window.open (imageURL,'mywindow','width=100,height=100,resizable=yes,scrollbars=1,status=yes,top=200,left=350');
myWin.myImg = img;
myWin.onload = function() {height = myImg.height;width = myImg.width;}
}
</script>
0
 
LVL 10

Expert Comment

by:Jaax
ID: 18807057
>>Roonan:It doesn't work because the height and width might not be set when the image is not fully loaded
Did you try before concluding the above?

I did and that is the reason I have posted !
0
 
LVL 9

Author Comment

by:alex_code
ID: 18807063
yes jaax it works!

thank you guys both of you, i spit the points!

Thank you so mutch!!!!
0
 
LVL 49

Expert Comment

by:Roonaan
ID: 18807064
Jaax, this is not the first time this problem comes round. I am sorry to have offended you in any way. It was not intentionaly.
0
 
LVL 28

Expert Comment

by:Pravin Asar
ID: 18807080
The following code, will find out the image width and height and opens a centered window
after finding screen width and height;

function OpenCenWindow (imgObj) {
  var sw;
  // LOAD IMAGE

  var fullImage = new Image();
  fullImage.src = imgObj.src;
  var width = fullImage.width;
  var height = fullImage.height;

  // DO CHECKS
  if (width > window.screen.width) { width = window.screen.width; }
  if (height > window.screen.height) { height = window.screen.height; }
 
  // CALCULATE WINDOW POSITION (TOP, LEFT CORNER)

  var x = 0.5 *(window.screen.width - width);
  var y = 0.5 *(window.screen.height - height);

  // BUILD THE POSITION STRING

  var posStr = ", screenX=" + x + ", screenY=" + y;
  if (typeof (sw) != 'undefined')  {
                  sw.close();
  }
  if (document.all) {
             posStr = ", left=" + x + ", top=" + y;
  }
  // WINDOW OPEN OPTIONS STRING
  var pStr = 'resizable, status=no,width=' + width + ', height=' + height +
                   ', alwaysRaised=1, addressbar=no, titlebar=no, toolbar=no' +
                   ',menubar=no, status=no';
  // OPEN WINDOW
  sw = window.open ('', 'fullImage',pStr +posStr );
  sw.document.write ('<IMG SRC="'+ img.src + '">');  
  return false;
}

<img src="images.gif" onclick="OpenCenWindow(this);" border="0" width="100" alt='Click here to display in new window'>
0
 
LVL 10

Expert Comment

by:Jaax
ID: 18807109
Roonan : No probs dude :)
0

Featured Post

Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
How to delete values from an array using php 4 22
asp Google Map 2 23
Javascript 2 17
ASP.NET MVC -Update model when click on <li> element 29 28
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
Introduction This article is intended for those who are new to PHP error handling (https://www.experts-exchange.com/articles/11769/And-by-the-way-I-am-New-to-PHP.html).  It addresses one of the most common problems that plague beginning PHP develop…
The viewer will learn how to count occurrences of each item in an array.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

790 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