HOW: Center this popup message on screen.

Blue®

The page below creates a popup message on the screen. It printed the
popup box 30 pixels from the left:

document.getElementById("dwindow").style.left="30p x"

How do I modify it so that the popup box is always centered on the
screen regardless of the monitor resolution of the users?

I do not know JS and I have been testing without success. Anybody can
help? Thanks.

================================================== ======
<html>

<head>

<script>

var dragapproved=false
var minrestore=0
var initialwidth,initialheight
var ie5=document.all&&document.getElementById
var ns6=document.getElementById&&!document.all

function iecompattest(){
return (!window.opera && document.compatMode &&
document.compatMode!="BackCompat")? document.documentElement : document.body
}

function drag_drop(e){
if (ie5&&dragapproved&&event.button==1){
document.getElementById("dwindow").style.left=temp x+event.clientX-offsetx+"px"
document.getElementById("dwindow").style.top=tempy +event.clientY-offsety+"px"
}
else if (ns6&&dragapproved){
document.getElementById("dwindow").style.left=temp x+e.clientX-offsetx+"px"
document.getElementById("dwindow").style.top=tempy +e.clientY-offsety+"px"
}
}

function initializedrag(e){
offsetx=ie5? event.clientX : e.clientX
offsety=ie5? event.clientY : e.clientY
document.getElementById("dwindowcontent").style.di splay="none" //extra
tempx=parseInt(document.getElementById("dwindow"). style.left)
tempy=parseInt(document.getElementById("dwindow"). style.top)

dragapproved=true
document.getElementById("dwindow").onmousemove=dra g_drop
}

function loadwindow(url,width,height){
if (!ie5&&!ns6)
window.open(url,"","width=width,height=height,scro llbars=1")
else{
document.getElementById("dwindow").style.display=' '
document.getElementById("dwindow").style.width=ini tialwidth=width+"px"
document.getElementById("dwindow").style.height=in itialheight=height+"px"
document.getElementById("dwindow").style.left="30p x"
document.getElementById("dwindow").style.top=ns6?
window.pageYOffset*1+30+"px" : iecompattest().scrollTop*1+30+"px"
document.getElementById("cframe").src=url
}
}

function maximize(){
if (minrestore==0){
minrestore=1 //maximize window
document.getElementById("maxname").setAttribute("s rc","restore.gif")
document.getElementById("dwindow").style.width=ns6 ?
window.innerWidth-20+"px" : iecompattest().clientWidth+"px"
document.getElementById("dwindow").style.height=ns 6?
window.innerHeight-20+"px" : iecompattest().clientHeight+"px"
}
else{
minrestore=0 //restore window
document.getElementById("maxname").setAttribute("s rc","max.gif")
document.getElementById("dwindow").style.width=ini tialwidth
document.getElementById("dwindow").style.height=in itialheight
}
document.getElementById("dwindow").style.left=ns6?
window.pageXOffset+"px" : iecompattest().scrollLeft+"px"
document.getElementById("dwindow").style.top=ns6?
window.pageYOffset+"px" : iecompattest().scrollTop+"px"
}

function closeit(){
document.getElementById("dwindow").style.display=" none"
}

function stopdrag(){
dragapproved=false;
document.getElementById("dwindow").onmousemove=nul l;
document.getElementById("dwindowcontent").style.di splay="" //extra
}

</script>
</head>
<body>

<div id="dwindow"
style="position:absolute;cursor:hand;left:0px;top: 0px;display:none"
onMousedown="initializedrag(event)" onMouseup="stopdrag()"
onSelectStart="return false">
<div align="right" style="background-color:gray"><img src="max.gif"
id="maxname" onClick="maximize()"><img src="close.gif"
onClick="closeit()"></div>
<div id="dwindowcontent" style="height:100%">

<table width="100%" cellpadding="5" cellspacing="5"
style="border-collapse: collapse; border: 1px solid #000000"
bordercolor="#111111" id="AutoNumber1">

<tr>
<td>This is the popup message. This is the popup message.</td>
</tr>
</table>
</div>
</div>

<script>
//Use below code to load DHTML Window as page loads
if (ns6) window.onload=new Function('loadwindow("",350,150)')
else
loadwindow("",350,250)
</script>
</body>
</html>

Nov 9 '05 #1

Subscribe Post Reply

3595

Stephen Poley

On Wed, 09 Nov 2005 18:09:17 +0800, Blue® <su*******@myjaring.net>
wrote:

The page below creates a popup message on the screen. It printed the
popup box 30 pixels from the left:

document.getElementById("dwindow").style.left="30 px"

How do I modify it so that the popup box is always centered on the
screen regardless of the monitor resolution of the users?

I do not know JS and I have been testing without success. Anybody can
help? Thanks.

A few thoughts:

a) Are you sure your readers want pop-up messages? Many don't.

b) Are you sure you want it centred on the screen? What if the active
browser window only occupies, say, the right half of the screen?

c) If you don't yet know the difference between a script and a
stylesheet, you probably shouldn't be worrying about this at all. But if
you must, try comp.lang.javascript.

--
Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/

Nov 9 '05 #2

Blue®

> a) Are you sure your readers want pop-up messages? Many don't.

*** Yes, some of my customers asked for it. They want a popup (on the
contact page) that says they are out of office and response will be slow.

b) Are you sure you want it centred on the screen? What if the active
browser window only occupies, say, the right half of the screen?
*** Yes, most people will surf the internet full screen.
c) If you don't yet know the difference between a script and a
stylesheet, you probably shouldn't be worrying about this at all. But if
you must, try comp.lang.javascript.

*** I have searched through the internet by still can't have my problem
solved.

*** I know the difference between a javascript and a stylesheet. But
that is less important to me. I just want to have my problem solved. I
have a deadline to meet.

*** I posted this under comp.lang.javascript and the people there asked
me to come here.

Nov 9 '05 #3

Alan J. Flavell

On Wed, 9 Nov 2005, Blue® wrote:

a) Are you sure your readers want pop-up messages? Many don't.
*** Yes, some of my customers asked for it.

No, their readers don't want pop-ups.
They want a popup (on the contact page) that says they are out of
office and response will be slow.
So go implement it, and stop wasting our time - this is a stylesheets
group. Fortunately, modern browsers allow the reader to overrule such
nonsense.

browser window only occupies, say, the right half of the screen?

*** Yes, most people will surf the internet full screen.

Says you.

c) If you don't yet know the difference between a script and a
stylesheet, you probably shouldn't be worrying about this at all.
But if you must, try comp.lang.javascript.

*** I know the difference between a javascript and a stylesheet.
You've shown no evidence of it yet.
But that is less important to me. I just want to have my problem
solved. I have a deadline to meet.

Waster. *plonk*

Nov 9 '05 #4

'sNiek

Blue® schreef:

I have a deadline to meet.

So do we.
--
Niek

Nov 9 '05 #5

Jim Moe

Blue® wrote:

The page below creates a popup message on the screen. It printed the
popup box 30 pixels from the left:

document.getElementById("dwindow").style.left="30p x"
The left of what? The left edge of the browser's viewport? Or the
actual screen itself?
How do I modify it so that the popup box is always centered on the
screen regardless of the monitor resolution of the users?

The usual way is: left = (screen_width - popup_width) / 2. Similarly
for the height.
Although I do not know how one would get those dimensions.

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

Nov 9 '05 #6

Stephen Poley

On Wed, 09 Nov 2005 18:57:32 +0800, Blue® <su*******@myjaring.net>
wrote:

a) Are you sure your readers want pop-up messages? Many don't.

*** Yes, some of my customers asked for it. They want a popup (on the
contact page) that says they are out of office and response will be slow.
b) Are you sure you want it centred on the screen? What if the active
browser window only occupies, say, the right half of the screen?

*** Yes, most people will surf the internet full screen.
c) If you don't yet know the difference between a script and a
stylesheet, you probably shouldn't be worrying about this at all. But if
you must, try comp.lang.javascript.

*** I have searched through the internet by still can't have my problem
solved.

*** I know the difference between a javascript and a stylesheet. But
that is less important to me. I just want to have my problem solved. I
have a deadline to meet.

*** I posted this under comp.lang.javascript and the people there asked
me to come here.

<noses around archive> Well, I guess Thomas Lahn will be flattered at
being referred to with the royal plural. Maybe you were counting his
ears.

I'll grant you his answer is not one of the clearest ever made on
Usenet. On the other hand it shouldn't require an advanced degree in
linguistic analysis to realise that he was telling you to use a
CSS-styled element instead of a pop-up window.

--
Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/

Nov 9 '05 #7

Similar topics

Pop-up in window center

by: Ali Chambers | last post by:

Hi, I'd like to open a popup window in the middle of the current browser window. The browser window could be any size and height (as resized by the user). The popup should be in the center of x...

Javascript

HOW: Center this popup message on screen.

by: Blue® | last post by:

The page below creates a popup message on the screen. It printed the popup box 30 pixels from the left: document.getElementById("dwindow").style.left="30px" How do I modify it so that the...

Javascript

how to get rid of horizontal scroll bar of pages in my website?

by: J-T | last post by:

My website is fine when it is viewed in 1280 by 1024 pixel ,but in smaller resulotions there is a horizontal scrollbar down the page.How can I set it to be viewed the same for all resulotions? ...

ASP.NET

how to handle different screen resolutions?

by: ravideep | last post by:

if I set the website layout in pixels, say 800X600. It works fine with screens with window size 800X600. But if someone is having screen 1200X800, then it doesn't stretch to the full window. How can...

HTML / CSS

Merging data from multiple Excel files

by: ryjfgjl | last post by:

In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...

Data Management

Migrating Website to Cloud - Emmanuel Katto

by: emmanuelkatto | last post by:

Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel

General

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

General

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...

Windows Server

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...

Windows Server

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

by: tracyyun | last post by:

Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...

General

AI Job Threat for Devs

by: agi2029 | last post by:

Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...

Career Advice