Member Avatar for Remulon

Hi, I am writing a DHTML application which uses AJAX to show dialogue windows etc.. (all the bells and whistles).

When I display a DHTML dialogue in the foreground, I use JS to create a div which is a "layer" in between the foreground and the background which essentially "darkens" the background and disables all background functionality. Forcing the user to take action in the dialogue.

Here is my problem:

How do I get the total scrollable area of the page so I know how big to make the "dark" div?

I have tried all of these:

document.body.scrollWidth
document.body.scrollHeight

document.body.offsetWidth
document.body.offsetHeight

window.innerWidth
window.innerHeight

document.documentElement.clientWidth
document.documentElement.clientHeight

document.body.clientWidth
document.body.clientHeight

window.pageYOffset
window.pageXOffset

document.body.scrollTop
document.body.scrollLeft

document.documentElement.scrollTop
document.documentElement.scrollLeft

They all work in one browser or another, (I am testing in IE, FF and Opera) but none of them give me the correct values for the exact scrollable area of the page.

does anyone have any ideas?

has anyone done this before?

  • 3 Contributors
  • 3 Replies
  • 128 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by Remulon

Recommended Answers

All 3 Replies

Member Avatar for ShawnCplus

Google is your friend. They're called lightboxes. Lightbox, thickbox, tightbox are all examples of libraries that have already been built to create modal dialogs.

Member Avatar for essential

But if you need to center certain elements in the page, based on the available scrollable width/height of the window, then you can try this demo:

<?xml version="1.0" encoding="utf-8" standalone="no"?>
<?xml-stylesheet type="text/css" href="#css21" media="screen"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html id="xhtml10S" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head profile="http://www.w3.org/2005/10/profile">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Window-target" content="_top" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>Free Live Help!</title>
<style id="css21" type="text/css" media="screen">
/* <![CDATA[ */

/* ]]> */
</style> 
<script id="javascript1.5" type="text/javascript">
// <![CDATA[
var positioned = function( $w, $h, $div ) {
   var $div = (( "getElementById" in document ) ? document.getElementById( $div ) : (( "all" in document ) ? document.all[ $div ] : document.layers[ $div ] ));
   var scrollMax = arguments.callee;
   var swidth;
   var sheight;
   try { 
      if ( "scrollWidth" in document.body ) {
      swidth = document.body.scrollWidth;
      sheight = document.body.scrollHeight;
      } 
   } catch( sw ) {
      if ( "scrollMaxX" in window ) {
      swidth = window.scrollMaxX;
      sheight = window.scrollMaxY;      
      } else {
      return false;
      }
   } if ( typeof ( scrollMax.width && scrollMax.height ) === "undefined" ) {
      scrollMax.width = (( swidth * $w ) / 100 );
      scrollMax.height = (( sheight * $h ) / 100 );
      if ( typeof scrollMax.width !== "undefined" ) {
         if ( "style" in $div ) { 
         $div.style.width = scrollMax.width;
         $div.style.height = scrollMax.height;
         $div.style.border = "2px solid #373832";
         $div.style.position = "absolute";
         $div.style.left = Math.ceil((( swidth - scrollMax.width ) / 2 )) + "px";
         $div.style.top = Math.ceil((( sheight - scrollMax.height ) / 2 )) + "px";
         }
      } return true;
   } alert("Your browser does not support this type of Javascript features");
};


window.onload = function() {
   positioned( 80, 80, "output" ); 

/* Parameters
positioned( [ width by %, [ height by %, [ div id ]]] );

width and height is calculated by percentages, and the possible value for each parameter can be set to 0-100. */
   };
// ]]>
</script>
</head>
<body>
<div id="output"></div>
</body>
</html>

You may expand (or modify) this demo as you needed.

Hope it helps...

Member Avatar for Remulon

Hi,

Thanks for the replies. My main problem was with the darkened layer separating the BG and FG, and the fact that I couldn't get it to span the entire scrollable area when scrollbars were enabled.

I have since solved the problem with a snippet of css that I found.

Here is my solution:

CSS:

html,body { height:100%; margin:0; padding:0; }
#overlay_container { position:fixed; left:0px; top:0px; width:100%; height:100%; z-index:50; display:none; background:#000000; filter:alpha(opacity=70); -moz-opacity:0.75; opacity:0.75; }
* html #overlay_container { position:absolute; height:expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px'); }

HTML:

<div id="overlay_container"></div>

JS:

function grey_on() {
		overlay_container.style.display = 'block';                          
		}
	function grey_off() {
		overlay_container.style.display = 'none';
		}
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.