Solved

Popup Window...

Posted on 2007-03-28
15
285 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
 
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
Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

 
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

Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
This article discusses how to create an extensible mechanism for linked drop downs.
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…
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…

743 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

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now