Solved

Popup Window...

Posted on 2007-03-28
15
294 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Transaction Monitoring Vs. Real User Monitoring

Synthetic Transaction Monitoring Vs. Real User Monitoring: When To Use Each Approach? In this article, we will discuss two major monitoring approaches: Synthetic Transaction and Real User Monitoring.

 
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 29

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

Instantly Create Instructional Tutorials

Contextual Guidance at the moment of need helps your employees adopt to new software or processes instantly. Boost knowledge retention and employee engagement step-by-step with one easy solution.

Question has a verified solution.

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

Things That Drive Us Nuts Have you noticed the use of the reCaptcha feature at EE and other web sites?  It wants you to read and retype something that looks like this. Insanity!  It's not EE's fault - that's just the way reCaptcha works.  But it i…
This article discusses four methods for overlaying images in a container on a web page
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

717 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