SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    May 2006
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    positioning in IE7 and protoype.js

    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();
    
    	}

  2. #2
    SitePoint Member
    Join Date
    May 2006
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •