positioning in IE7 and protoype.js

**mowglibcn** · May 6, 2007, 05:19

I'm trying to write the code for an AJAX script. The goal is to let the visitor send a comment through a form (obviously). The form is inside a div that pops up when the visitor clicks on an "add a comment" link and when the form is submitted the result of the form processing apears inside the same div which resizes to fit the size of the result.

The problem I'm trying to solve is that although the resizing and the positioning of the div works for Firefox it doesn't for IE7. In IE7 it does the resizing but the positioning fails

Here are the source codes simplified (only the divs resizing and centering are shown):

Test them here

PS: I know I could give a try to scriptacolous but... it's a matter of pride

testprototype.htm

HTML Code:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin t&iacute;tulo</title>
<script src="js/prototype.js"></script>
<script src="js/openDiv.js"></script>
<link href="css/openDiv.css" rel="stylesheet" type="text/css" />
</head>

<body onload="initDivs();">
<a href="#" onclick="showForm();">click 1</a><br />
<a href="#" onclick="showResults();">click 2</a>

<div id="sombra"></div>
<div id="papel"></div>
</body>
</html>

openDiv.css

Code:

/* CSS Document */


	#sombra{
		z-index:102;
		position:absolute;
		background-color:#000000;
		opacity:0.5;
	}
		
	#papel{
		z-index:103;
		position:absolute;
		background-color:#FFFFFF;
		border:1px solid #666666;
		text-align:left;
	}

openDiv.js

Code:

// JavaScript Document
	var	screenWidth = findLivePageWidth(); 		
	var	screenHeight = findLivePageHeight(); 	
	var w;								//temp width
	var h;								//temp height
	var creado = false;						
	var visible = false;						
	
	var incW = 100; // width incremrnt
	var incH = 30; // height increment
	
	var shadow;				// drop-shadow object
	var offsetXShadow = 5;
	var offsetYShadow = 5;
	
	var papel;						//canvas object
	var	wFinal;						//canvas final width
	var	hFinal;						// canvas final height
	

	/* client dimensions */
	function findLivePageWidth(){
		try{
			return window.innerWidth;
		}catch(err){
			return document.body.clientWidth;	
		}
	}
	
	function findLivePageHeight(){
		try{
			return window.innerHeight;
		}catch(err){
			return document.body.clientHeight;	
		}
	}
	
	
	
	/* initialize  divs */
	function initDivs(){

		shadow = $('sombra');
		papel = $('papel');

		w = 2;
		h = 2;
		wFinal = 2;		
		hFinal = 2;
				
		shadow.setStyle({width:w+'px', height:h+'px', top:(screenHeight/2 + offsetYShadow -1 )+'px', left:(screenWidth/2 + offsetXShadow - 1)+'px'});
		shadow.hide();
		
		papel.setStyle({width:w+'px', height:h+'px', top:(screenHeight/2 - 1)+'px', left:(screenWidth/2 -1 )+'px'});
		papel.hide();
		
		creado = true;
		visible = false;
	}
	

	/* resize canvas */
	function resize(){

		if(!visible){
			shadow.show();
			papel.show();
		}
		
		/* getWidth() returns width including borders so 
		 * 2 pixeles are substracted
		 */
		w = papel.getWidth() - 2;
		h = papel.getHeight() - 2;

		deltaW = wFinal - w;
		deltaH = hFinal - h;
		
		masMenosW = (deltaW >= 0)?1:-1;
		masMenosH = (deltaH >= 0)?1:-1;

		
		if(deltaW != 0){
			if(Math.abs(deltaW) >= incW){
				w = w + (masMenosW*incW);
			}else{
				w = w + (masMenosW*Math.abs(deltaW));	
			}	
	
			x = Math.floor((screenWidth/2) - (w/2));
						
			papel.setStyle({width: w+'px'});	
			papel.setStyle({left:x+'px'});		
			
			shadow.setStyle({width: w+'px'});
			shadow.setStyle({left:(x+offsetXShadow)+'px'});		
			setTimeout("resize()",10);				
			
		}else{
			if(deltaH != 0){
				if(Math.abs(deltaH) >= incH){
					h = h + (masMenosH*incH);
				}else {
					h = h + (masMenosH*Math.abs(deltaH));	
				}				

				y = Math.floor((screenHeight/2) - (h/2));
							
				papel.setStyle({height: h+'px'});	
				papel.setStyle({top:y+'px'});		
				
				shadow.setStyle({height: h+'px'});
				shadow.setStyle({top:(y+offsetYShadow)+'px'});		
	
				setTimeout("resize()",10);	
			}else{
				clearTimeout();	
			}
		}
	}
	
	function showForm(){
		wFinal = 290;
		hFinal = 400;
		resize();
	}
	
	function showResults(){
		wFinal = 240;
		hFinal = 190;		
		resize();

	}

**mowglibcn** · May 6, 2007, 07:41

I've come accross a possible solution. The problem was in the IE7 DOM (I think) which has objects I wasn't aware of.

Therefore, the script wasn't successful at finding out the browser window's dimentions. One fossible fix is:

Code:

	function getBodySize() {
                var size = [0, 0];
		if (typeof window.innerWidth != 'undefined'){
			size = [window.innerWidth,window.innerHeight];
		} else if (typeof document.documentElement != 'undefined'&&
                             typeof document.documentElement.clientWidth !='undefined' && 
                             document.documentElement.clientWidth != 0){
			size = [document.documentElement.clientWidth,document.documentElement.clientHeight];
		} else {
			size = [document.getElementsByTagName('body')[0].clientWidth,document.getElementsByTagName('body')[0].clientHeight];
	   }
	   return size;
	}

The dimensions differ slightly from FireFox to IE7 but at least it seem to work quite well... any other options?

The SitePoint Forums have moved.

User Tag List

Thread: positioning in IE7 and protoype.js

Thread Tools

Display

positioning in IE7 and protoype.js

Bookmarks

Bookmarks

Posting Permissions