asked on

Detect screen resolution in javascript and dynamically change a .css file

Hi E's, I have a page that contain a 'Drop-in content box', and that box appear every time the page is load, you can see in attach image.
I want put this box in the middle of the page, I try change the css in this line, but don't work:
CODE:<div id="dropin" style="position:absolute;visibility:hidden;left:200px;top:100px;width:500px;height:300px;
(I try change left and top to auto but the box open in position zero).

So, the only solution I see for this issue is take the measure of screen and give values to left and top dinamically.
Example, the box size is 200*200, screen resolution is 800*600, so, for open in the center: left 300px and top 200px.

How I do this in javascript?

Regards, JC

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script language="JavaScript1.2">
 
// Drop-in content box- By Dynamic Drive
// For full source code and more DHTML scripts, visit http://www.dynamicdrive.com
// This credit MUST stay intact for use
 
var ie=document.all
var dom=document.getElementById
var ns4=document.layers
var calunits=document.layers? "" : "px"
 
var bouncelimit=32 //(must be divisible by 8)
var direction="up"
 
function initbox(){
if (!dom&&!ie&&!ns4)
return
crossobj=(dom)?document.getElementById("dropin").style : ie? document.all.dropin : document.dropin
scroll_top=(ie)? truebody().scrollTop : window.pageYOffset
crossobj.top=scroll_top-250+calunits
crossobj.visibility=(dom||ie)? "visible" : "show"
dropstart=setInterval("dropin()",50)
}
 
function dropin(){
scroll_top=(ie)? truebody().scrollTop : window.pageYOffset
if (parseInt(crossobj.top)<100+scroll_top)
crossobj.top=parseInt(crossobj.top)+40+calunits
else{
clearInterval(dropstart)
bouncestart=setInterval("bouncein()",50)
}
}
 
function bouncein(){
crossobj.top=parseInt(crossobj.top)-bouncelimit+calunits
if (bouncelimit<0)
bouncelimit+=8
bouncelimit=bouncelimit*-1
if (bouncelimit==0){
clearInterval(bouncestart)
}
}
 
function dismissbox(){
if (window.bouncestart) clearInterval(bouncestart)
crossobj.visibility="hidden"
}
 
function truebody(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
 
 
window.onload=initbox
 
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
 
<body>
<div id="dropin" style="position:absolute;visibility:hidden;left:200px;top:100px;width:500px;height:300px;background-color:#F5F5F5">
 
<div align="right"><a href="#" onClick="dismissbox();return false">[Close Box] </a></div>
 
SPECIFY YOUR CONTENT HERE. IT COULD BE TEXT, IMAGES, OR RICH HTML
 
</div>
</body>
</html>

Open in new window

onload.gif

bugada

This sample page contains the javascript that show how to center a div in the screen or in the visible area of the browser (without toolbars).

You can easily adapt it to your needs.

Remember that it works if the div dimensions are set by the stylesheet.

<html>
  <head>
  <title></title>
<script>
window.onload = function() {
   document.getElementById("btn1").onclick = function(e) {
      var elem = document.getElementById("dropin");
      var coords = getCoords(elem);
      elem.style.top = coords.y + "px";
      elem.style.left = coords.x + "px";
   
   }
   
   document.getElementById("btn2").onclick = function(e) {
      var elem = document.getElementById("dropin");
      var coords = getCoords2(elem);
      elem.style.top = coords.y + "px";
      elem.style.left = coords.x + "px";
   
   }
   
   function getCoords(elem) {
      return { x:(screen.width - parseInt(elem.style.width)) / 2,
               y:(screen.height - parseInt(elem.style.height)) / 2 
             }
   }
   
   function getCoords2(elem) {
      return { x:(document.body.clientWidth - parseInt(elem.style.width)) / 2,
               y:(document.body.clientHeight - parseInt(elem.style.height)) / 2 
             }
   }
}
   
</script>
  </head>
  <body>
<div id="dropin" style="position:absolute;left:200px;top:100px;width:500px;height:300px; border:1px solid black"></div>
<input id="btn1" type="button" value="Center screen"> <br>
<input id="btn2" type="button" value="Center browser"> <br>
 
  </body>
</html>

Open in new window

Pedro Chagas

ASKER

Hi @bugada, I need more help, my knolgement in javascript is very poor.
I try reconstruct all the script but the result is not good, so, I need a help, realy!
If nobody helps with @bugada script (I really believe is a good script, I test in my server and work), I like to show what is my idea:
1 - Javascript detect screen resolution, and made a script for when I call the code of the box, box appear in the center. I don't know do that script, and worst, I don't know how I connect the variables to the box.

Help me with your code, or somebody give me a new idea for put the box in the center of the screen.

Regards, JC

ASKER CERTIFIED SOLUTION

bugada

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial