Alex
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('./ima ges/pic1.j pg','mywin dow','widt h=400,heig ht=400,res izable=yes ,scrollbar s=1,status =yes,top=2 00,left=35 0')>
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!
here is the code i use:
<a href='#' onClick=window.open('./ima
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!
Delegate the opening of the new window to a javascript function
<a href='#' onClick=openImage('./image s/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','widt h='+img.wi dth,height ='+img.hei ght',resiz able=yes,s crollbars= 1,status=y es,top=200 ,left=350' )
}
</script>
<a href='#' onClick=openImage('./image
<script>
function openImage(imageURL){
var img = new Image();
onload = function() {alert(img.width + "x" + img.height);};
img.src="pathOfYourImage";
window.open (imageURL,'mywindow','widt
}
</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','widt h='+img.wi dth,height ='+img.hei ght',resiz able=yes,s crollbars= 1,status=y es,top=200 ,left=350' )
}
</script>
It should read instead as :
<script>
function openImage(imageURL){
var img = new Image();
img.src=imageURL;
window.open (imageURL,'mywindow','widt
}
</script>
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
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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!
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-
-r-
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
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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','widt h=100,heig ht=100,res izable=yes ,scrollbar s=1,status =yes,top=2 00,left=35 0');
myWin.myImg = img;
myWin.onload = function() {height = myImg.height;width = myImg.width;}
}
</script>
Try:
<script>
var myWin;
function openImage(imageURL){
var img = new Image();
img.src=imageURL;
myWin = window.open (imageURL,'mywindow','widt
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 !
Did you try before concluding the above?
I did and that is the reason I have posted !
ASKER
yes jaax it works!
thank you guys both of you, i spit the points!
Thank you so mutch!!!!
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(thi s);" border="0" width="100" alt='Click here to display in new 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(thi
Roonan : No probs dude :)
ASKER
But i still want a solution for the 2nd part of my Q :)