Link to home
Start Free TrialLog in
Avatar of Alex
AlexFlag for Greece

asked on

Popup Window...

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!
Avatar of Alex
Alex
Flag of Greece image

ASKER

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 :)
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>





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>


Avatar of Alex

ASKER

No my friend Jaax this does not work for me... :( am i doing something wrong or it is something wrong with the code?
ASKER CERTIFIED SOLUTION
Avatar of Roonaan
Roonaan
Flag of Netherlands image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Alex

ASKER

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!
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-
Avatar of Alex

ASKER

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.
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
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>
>>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 !
Avatar of Alex

ASKER

yes jaax it works!

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

Thank you so mutch!!!!
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.
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'>
Roonan : No probs dude :)