Pollin
asked on
CENTER POPUP WINDOW ON TOP ACCORDING TO BROWSER SIZE AND POSITION NOT TO SCREEN SIZE
Hello guys:
I need a function to CENTER a popup window according the BROWSER SIZE AND POSITION AND STAYS ON TOP. Also, the function must work without passing the width and height parameters from the picture, because the only parameters that must past to the function is the picture's URL and windows title. Maybe the function should be possible to calculate itself the picture's width and height.
There are a lot of solutions that centers a popup window in the screen with the window.open parameters, but they need the picture size.
The code that I have works with the screen size. I need that the Popuppic function centers the popup according the BROWSER size and doesn´t need to receive the width and height parameters of the picture and the popup window must stay on top.
The opener file is:
//INDEX.HTML
function PopupPic(sPicURL, title,w,h) {
var winl = (screen.width - w) / 2;
var wint = (screen.height - h) / 2;
winprops = 'height='+h+',width='+w+', top='+wint +',left='+ winl+'resi zable=0'
window.open("picturedetail .html?"+sP icURL+"&"+ title+"", "", winprops)
}
The popup file is:
//picturedetail.html /receives a query string with the url
<HTML>
<HEAD>
<script language='javascript'>
function FitPic() {
iWidth = (NS)?window.innerWidth:doc ument.body .clientWid th;
iHeight = (NS)?window.innerHeight:do cument.bod y.clientHe ight;
iWidth = document.images[0].width - iWidth;
iHeight = document.images[0].height - iHeight;
window.resizeBy(iWidth, iHeight);
self.focus();
}
</SCRIPT>
</HEAD>
<BODY onload='FitPic();' topmargin="0" marginheight="0" leftmargin="0"
marginwidth="0">
<script language='javascript'>
document.write( "<img src='" + picUrl + "' border=0>" );
</script>
</BODY>
</HTML>
Best Regards
Pollito
I need a function to CENTER a popup window according the BROWSER SIZE AND POSITION AND STAYS ON TOP. Also, the function must work without passing the width and height parameters from the picture, because the only parameters that must past to the function is the picture's URL and windows title. Maybe the function should be possible to calculate itself the picture's width and height.
There are a lot of solutions that centers a popup window in the screen with the window.open parameters, but they need the picture size.
The code that I have works with the screen size. I need that the Popuppic function centers the popup according the BROWSER size and doesn´t need to receive the width and height parameters of the picture and the popup window must stay on top.
The opener file is:
//INDEX.HTML
function PopupPic(sPicURL, title,w,h) {
var winl = (screen.width - w) / 2;
var wint = (screen.height - h) / 2;
winprops = 'height='+h+',width='+w+',
window.open("picturedetail
}
The popup file is:
//picturedetail.html /receives a query string with the url
<HTML>
<HEAD>
<script language='javascript'>
function FitPic() {
iWidth = (NS)?window.innerWidth:doc
iHeight = (NS)?window.innerHeight:do
iWidth = document.images[0].width - iWidth;
iHeight = document.images[0].height - iHeight;
window.resizeBy(iWidth, iHeight);
self.focus();
}
</SCRIPT>
</HEAD>
<BODY onload='FitPic();' topmargin="0" marginheight="0" leftmargin="0"
marginwidth="0">
<script language='javascript'>
document.write( "<img src='" + picUrl + "' border=0>" );
</script>
</BODY>
</HTML>
Best Regards
Pollito
ASKER
hi devick
In the code of the link you posted, the function needs the same parameters(picture's width and height) that the function that I posted, and also it centers the popup according the screen size, not brower's size and position. Also the popup window doesn´t stays on top.
Do you know how to modify the funtion to center the popup in the middle of the browser (not screen), stays on top, and also the function does not require the width and height of the picture as a parameter?
Best regards
Pollito
In the code of the link you posted, the function needs the same parameters(picture's width and height) that the function that I posted, and also it centers the popup according the screen size, not brower's size and position. Also the popup window doesn´t stays on top.
Do you know how to modify the funtion to center the popup in the middle of the browser (not screen), stays on top, and also the function does not require the width and height of the picture as a parameter?
Best regards
Pollito
hi Pollito,
i looked to ---> html?"+ solution and forgot about resize and center.
now is complete ready.
http://home.arcor.de/athens/expexc/js/window/resize2image/
i looked to ---> html?"+ solution and forgot about resize and center.
now is complete ready.
http://home.arcor.de/athens/expexc/js/window/resize2image/
ASKER
Hi devic
thanks for your comment but the page that you posted do the same that my code does. I need a code to center a popup image according to the BROWSER size and position (not to screen size, as your code and mine does). Also the popup image must stay on top and the function does not need to know the image size as parameter. I think that a way to to that is to preload the images and the pass them to a function, but I dont know how.
Please help me.
thanks for your comment but the page that you posted do the same that my code does. I need a code to center a popup image according to the BROWSER size and position (not to screen size, as your code and mine does). Also the popup image must stay on top and the function does not need to know the image size as parameter. I think that a way to to that is to preload the images and the pass them to a function, but I dont know how.
Please help me.
>>>> I need a code to center a popup image according to the BROWSER size and position (not to screen size, as your code and mine does).
i think center to screen size is ok. Why do you need to have this according to the BROWSER size and position?
you can not easy to calculate this. Because every user can have different bars, like google bar. And then if i move window out of screen corner...
then popup will be out of screen...
I would say forget it.
>>>Also the popup image must stay on top
easy & ready
i think center to screen size is ok. Why do you need to have this according to the BROWSER size and position?
you can not easy to calculate this. Because every user can have different bars, like google bar. And then if i move window out of screen corner...
then popup will be out of screen...
I would say forget it.
>>>Also the popup image must stay on top
easy & ready
ASKER
ok, no problem with the browser issue.
The last thing that I needed is that the Popuppic function must work without the width and height of the picture as input parameters. In the page that you posted, the popuppic function is the same that the one I wrote at the beginning of this article, and needs the width and height of the picture.
thanks
Pollito
The last thing that I needed is that the Popuppic function must work without the width and height of the picture as input parameters. In the page that you posted, the popuppic function is the same that the one I wrote at the beginning of this article, and needs the width and height of the picture.
thanks
Pollito
ASKER
ok thanks a lot, could you write the code of the popup window to give you the points? I cant see it on the page you posted because when I make right click on the popup the VIEW SOURCE option is disabled.
thanks again
Pollito
pd: If you found a way to center the popup windows according to browser size I'll give you 520 points.
thanks again
Pollito
pd: If you found a way to center the popup windows according to browser size I'll give you 520 points.
==============popup======= =====
<HTML>
<HEAD>
<script language='javascript'>
var NS=document.all;
function FitPic()
{
iWidth = (!NS)?window.innerWidth:do cument.bod y.clientWi dth;
iHeight = (!NS)?window.innerHeight:d ocument.bo dy.clientH eight;
iWidth = document.images[0].width - iWidth;
iHeight = document.images[0].height - iHeight;
window.resizeBy(iWidth, iHeight);
if(!NS){self.moveTo((self. screen.wid th - self.outerWidth) / 2, (self.screen.height - self.outerHeight) / 2);}
else{self.moveTo((self.scr een.width- document.b ody.client Width) / 2, (self.screen.height-docume nt.body.cl ientHeight ) / 2);}
self.focus();
}
window.onblur=comeback
function comeback()
{
this.focus();
}
var qstring = document.location.href.spl it("?")[1] ;
var picUrl = qstring.split("&")[0];
document.title = qstring.split("&")[1];
</SCRIPT>
</HEAD>
<BODY onload='FitPic();' topmargin="0" marginheight="0" leftmargin="0"
marginwidth="0">
<script language='javascript'>
document.write( "<img src='" + picUrl + "' border=0>" );
</script>
</BODY>
</HTML>
<HTML>
<HEAD>
<script language='javascript'>
var NS=document.all;
function FitPic()
{
iWidth = (!NS)?window.innerWidth:do
iHeight = (!NS)?window.innerHeight:d
iWidth = document.images[0].width - iWidth;
iHeight = document.images[0].height - iHeight;
window.resizeBy(iWidth, iHeight);
if(!NS){self.moveTo((self.
else{self.moveTo((self.scr
self.focus();
}
window.onblur=comeback
function comeback()
{
this.focus();
}
var qstring = document.location.href.spl
var picUrl = qstring.split("&")[0];
document.title = qstring.split("&")[1];
</SCRIPT>
</HEAD>
<BODY onload='FitPic();' topmargin="0" marginheight="0" leftmargin="0"
marginwidth="0">
<script language='javascript'>
document.write( "<img src='" + picUrl + "' border=0>" );
</script>
</BODY>
</HTML>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
ok,
Thanks a lot for your help
see ya
Pollito
Thanks a lot for your help
see ya
Pollito
look here at your new code:
==========================
http://home.arcor.de/athens/expexc/js/window/resize2image/