Solved

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

Posted on 2009-05-06
3
2,994 Views
Last Modified: 2012-05-06
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
0
Comment
Question by:Pedro Chagas
  • 2
3 Comments
 
LVL 10

Expert Comment

by:bugada
ID: 24320979
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

0
 
LVL 3

Author Comment

by:Pedro Chagas
ID: 24330273
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
0
 
LVL 10

Accepted Solution

by:
bugada earned 500 total points
ID: 24330992
Added the getCoords() function in your script, after the function truebody()
Added line 24 to set new x position.
Added getCoords("dropin").x at line 31 in order to get proper x limit.

That's all. Try it.
<!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.left = getCoords("dropin").x+"px";

crossobj.visibility=(dom||ie)? "visible" : "show"

dropstart=setInterval("dropin()",50)

}

 

function dropin(){

scroll_top=(ie)? truebody().scrollTop : window.pageYOffset

if (parseInt(crossobj.top)<getCoords("dropin").y)

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

}
 

function getCoords(id) {

   var elem = document.getElementById(id);

   return { x:(truebody().clientWidth - parseInt(elem.style.width)) / 2,

            y:(truebody().clientHeight - parseInt(elem.style.height)) / 2 

          }

}
 

 

 

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

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
Google Map JavaScript API 4 39
Poster Video HTML 5 Scale to fit video 3 37
Angular - following an example but mine partly works 17 45
Error in JQuery 5 35
Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
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 …
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

929 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

10 Experts available now in Live!

Get 1:1 Help Now