[2 days left] What’s wrong with your cloud strategy? Learn why multicloud solutions matter with Nimble Storage.Register Now

x
?
Solved

Popup Window...

Posted on 2007-03-28
15
Medium Priority
?
297 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
[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
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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
LVL 9

Author Comment

by:Alex
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 1000 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
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
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 1000 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
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

Tech or Treat!

Submit an article about your scariest tech experience—and the solution—and you’ll be automatically entered to win one of 4 fantastic tech gadgets.

Question has a verified solution.

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

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
Since pre-biblical times, humans have sought ways to keep secrets, and share the secrets selectively.  This article explores the ways PHP can be used to hide and encrypt information.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Suggested Courses

649 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