Centering popup window

Please can you check code?

[WebWalla]

A client doesn't want to include our widget directly on their page, because it will "screw up the page format"
So, I'd like to give them the following code which will bring up a popup window containing our widget. The form button in the code will be replaced by a nice button image. My problem is that the widget isn't centered in the popup window (at least in IE) - there's a margin of white space to the right of the widget. How would can I do this? Any other glaring mistakes in the code? Thanks!

<script type="text/javascript">
<!--
function widget()
{
var w = window.open("http://www.example.com/widget/?param1=1234&param2=4321&param3=1","widget","toolbar=no,width=240,height=310,directories=no,status=no,scrollbars=no,resize=no,menubar=no,history=no");
w.window.focus();
} 
//-->
</script>
<FORM> 
<INPUT type="button" value="See our widget!" onClick="widget('')"> 
</FORM>

[penders]

A popup window is just like any other browser window, so centering the content is the same as centering any other content in a document. For example, providing it's a block-level element, set the left and right margins to auto.

An alternative to using a popup window... you could have an absolutely/fixed positioned DIV container that you show/hide on the page itself.

[WebWalla]

Thanks for your reply. I'm not a coder myself, and in this case I can't get our developers involved because they're concetrating on other tasks, so I wanted to solve what really is a sales situation without resorting to their (expensive) time.

The client can only do certain things within his CMS system. We need to replace what is currently a link, with access to this new, external content, so (I thought) by using the onclick event. The widget code also can't be altered, so as far as my admittedly very limited vision can see it, any formatting has to happen with javascript or inline CCS

Would it be possible for you to give me an example of how the "absolutely/fixed positioned DIV container" would work with this external content? Imagine opening the Google homepage - you can't format the homepage, only elements round it. Many thanks.

[WebWalla]

OK, so I've got the widget showing and hiding, but the new div element is transparent and shows the other page elements behind it (and which I can't alter because they are part and parcel of the client's site). This is my code at the moment:

<script type="text/javascript">
<!--
function showHide(showHideDiv, switchTextDiv) {
var ele = document.getElementById(showHideDiv);
var text = document.getElementById(switchTextDiv);
if(ele.style.display == "block") {
 ele.style.display = "none";
text.innerHTML = "Show";
 }
else {
ele.style.display = "block";
text.innerHTML = "Hide";
}
}
//-->
</script>

 <a id="clickText" href="javascript:showHide('widgetContent','clickText');" >Show</a>
<div style="clear:both;"></div>

<div id="contentDiv">
 <div id="widgetContent" style="display: none;" > 
<iframe src="http://www.example.com/widget/?i=1234&p=1&lg=1" height="310" width="245" frameborder="0"></iframe>
 
 </div>
</div>

The widget shows and hides great, but is transparent. Any ideas on how it can be totally opaque please? Thanks!

[JAB Creations]

To center a pop-up window you should work with the screen.height and screen.width properties. You'll want to subtract the height and width of the popup window itself and then divide the remaining height and width of the screen by two. That would center the popup window. If you have trouble finding out how to do the math look up JavaScript math operators.

Tip: don't use popups, use layers. No one in their right mind likes a popup window, a layer on the other hand when executed correctly is much less intrusive.

Tip: don't use innerHTML as it's unreliable (even if it appears to be reliable). To work with a textNode you'll want to reference is like document.getElementById(switchTextDiv).firstChild.nodeValue presuming that element holds the text directly. Broken code should break though it doesn't until you've committed too much to fix the horde of hours you've invested in to it.

- John

[WebWalla]

Let me qualify the following with my previous statements "I am not a coder" and also that this is essentially a "sales situation".

But isn't your solution looking at centering the popup window on the screen? That's not what I'm trying to do - I want to center the content within the window, wherever that new window happens to be.

Much as I'd love to start learning to code properly and present a solution using layers to the client, I'm afraid I can't invest the time needed, and it looks like I will have to focus my efforts on getting him to implement a simple iframe solution, since onpage this is by far the most attractive option. Thanks.

[JAB Creations]

You set the thread's title to 'Centering popup window' which is not the same as 'centering content'.

To center content properly use the following wrapper...

XHTML

<div class="center">
<!--
Your centered content goes here.
You must use the </div> to enclose the content.
You can remove this comment.
-->
</div>

CSS

.center {margin-left: auto; margin-right: auto; text-align: center;}

In the popup window's source code look for a link element (e.g. <link....) inside of the head element (e.g. <head> ) and place that .center class inside of that file. Clear your browser's cache (e.g. Firefox --> Tools (Menu) --> Clear Private Data (this menu's name changes a lot) and reload the page.

- John