HOW: Center this popup message on screen.

B

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="30px"

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=tempx+event.clientX-offsetx+"px"
document.getElementById("dwindow").style.top=tempy+event.clientY-offsety+"px"
}
else if (ns6&&dragapproved){
document.getElementById("dwindow").style.left=tempx+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.display="none" //extra
tempx=parseInt(document.getElementById("dwindow").style.left)
tempy=parseInt(document.getElementById("dwindow").style.top)

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

function loadwindow(url,width,height){
if (!ie5&&!ns6)
window.open(url,"","width=width,height=height,scrollbars=1")
else{
document.getElementById("dwindow").style.display=''
document.getElementById("dwindow").style.width=initialwidth=width+"px"
document.getElementById("dwindow").style.height=initialheight=height+"px"
document.getElementById("dwindow").style.left="30px"
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("src","restore.gif")
document.getElementById("dwindow").style.width=ns6?
window.innerWidth-20+"px" : iecompattest().clientWidth+"px"
document.getElementById("dwindow").style.height=ns6?
window.innerHeight-20+"px" : iecompattest().clientHeight+"px"
}
else{
minrestore=0 //restore window
document.getElementById("maxname").setAttribute("src","max.gif")
document.getElementById("dwindow").style.width=initialwidth
document.getElementById("dwindow").style.height=initialheight
}
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=null;
document.getElementById("dwindowcontent").style.display="" //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>
 
T

Thomas 'PointedEars' Lahn

Blue® said:
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"
Click to expand...

All DOM features should be subject to previous tests at runtime.

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 [...]
Click to expand...

Does not matter. It is a CSS question and thus belongs into the
respective newsgroup, comp.infosystems.www.authoring.stylesheets.

Come back here if you have problems implementing the CSS solution
through the DOM. Be sure to use Google Groups archives before you
post.

<http://jibbering.com/faq/>


PointedEars
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Positioning a popup 10
Help With a Script 5
? Trouble with: passing dragElement(e.target.id); 8
Sticky Header - How Do I Make It Hide/Show on Scroll? 0
Please Help? 0
Popup HTML help 5
My sliding panel in React Js with graphs on it renders nothing but a blank screen--need help 0
Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one? 0

Members online

Total: 21 (members: 2, guests: 19)
Robots: 147

Forum statistics

Threads
473,755
Messages
2,569,534
Members
45,008
Latest member
Rahul737

Latest Threads

Top