Solved

CENTER POPUP WINDOW ON TOP ACCORDING TO BROWSER SIZE AND POSITION NOT TO SCREEN SIZE

Posted on 2003-11-16
11
103,785 Views
Last Modified: 2011-08-18
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+'resizable=0'
   window.open("picturedetail.html?"+sPicURL+"&"+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:document.body.clientWidth;
       iHeight = (NS)?window.innerHeight:document.body.clientHeight;
       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
0
Comment
Question by:Pollin
  • 6
  • 5
11 Comments
 
LVL 25

Expert Comment

by:devic
ID: 9761097
hi Pollito,

look here at your new code:
===========================================
http://home.arcor.de/athens/expexc/js/window/resize2image/
0
 

Author Comment

by:Pollin
ID: 9761402
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

0
 
LVL 25

Expert Comment

by:devic
ID: 9766947
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/

0
 

Author Comment

by:Pollin
ID: 9767212
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.
0
 
LVL 25

Expert Comment

by:devic
ID: 9767603
>>>> 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
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 

Author Comment

by:Pollin
ID: 9769670
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
0
 
LVL 25

Expert Comment

by:devic
ID: 9770405
look again http://home.arcor.de/athens/expexc/js/window/resize2image/

without img width and height
0
 

Author Comment

by:Pollin
ID: 9792021
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.
0
 
LVL 25

Expert Comment

by:devic
ID: 9792045
==============popup============
<HTML>
<HEAD>
<script language='javascript'>
var NS=document.all;
function FitPic()
{
      iWidth = (!NS)?window.innerWidth:document.body.clientWidth;
      iHeight = (!NS)?window.innerHeight:document.body.clientHeight;
      iWidth = document.images[0].width - iWidth;
      iHeight = document.images[0].height - iHeight;
      window.resizeBy(iWidth, iHeight);
      if(!NS){self.moveTo((self.screen.width - self.outerWidth) / 2, (self.screen.height - self.outerHeight) / 2);}
      else{self.moveTo((self.screen.width-document.body.clientWidth) / 2, (self.screen.height-document.body.clientHeight) / 2);}
      self.focus();
}
window.onblur=comeback
function comeback()
{
      this.focus();
}
var qstring = document.location.href.split("?")[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>
0
 
LVL 25

Accepted Solution

by:
devic earned 250 total points
ID: 9792053
FYI

to see View Source on popup, right click between border of window and image ;)



0
 

Author Comment

by:Pollin
ID: 9792096
ok,

Thanks a lot for your help

see ya

Pollito
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
JS Plugin 4 29
Regex in JavaScript to validate US phone number with hyphens 3 28
javascript date picker in php while loop 5 27
jQuery Validate 4 20
In this article, we'll look how to sort an Array in JavaScript, including the more advanced techniques of sorting a collection of records either ascending or descending on two or more fields. Basic Sorting of Arrays First, let's look at the …
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)
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…

895 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

11 Experts available now in Live!

Get 1:1 Help Now