SitePoint Sponsor |
|
User Tag List
Results 1 to 2 of 2
-
May 6, 2007, 05:19 #1
- 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í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>
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; }
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(); }
-
May 6, 2007, 07:41 #2
- 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; }
Bookmarks