Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

DIV Center function not working 2

Status
Not open for further replies.
SBonfiglio

SBonfiglio

IS-IT--Management
Sep 15, 2008
24
IT
Folks,
I can't understand why this function refuses to do it's kob.
It is supposed to center a DIV in the window.

function CenterDiv(n) {
var myWidth = 0, myHeight = 0;
if( typeof( window.innerWidth ) == 'number' ) {
//Non-IE
myWidth = window.innerWidth;
myHeight = window.innerHeight;
} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
//IE 6+ in 'standards compliant mode'
myWidth = document.documentElement.clientWidth;
myHeight = document.documentElement.clientHeight;
} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
//IE 4 compatible
myWidth = document.body.clientWidth;
myHeight = document.body.clientHeight;
}
myObj=document.getElementById(n).style;
w=myObj.width;
h=myObj.height;
xc=Math.round((myWidth-w)/2);
yc=Math.round((myHeight-h)/2);
myObj.Left = xc + "px";
myObj.Top = yc + "px";
}

Ideas ?
Suggestions ?


 
Sort by date Sort by votes
Hi

SBonfiglio said:
this function refuses to do it's kob.
Click to expand...
How ? Smacks your hand ?
SBonfiglio said:
Suggestions ?
Click to expand...
[ul]
[li]Specify if you get error message and if yes, what. Or at least explain what happens instead of centering the [tt]div[/tt].[/li]
[li]Tell us in which browser you experience that behavior. Also specify if it works in other browsers.[/li]
[li]Show us your HTML, at least its relevant parts. This should include the [tt]div[/tt] tag and the calling of the function.[/li]
[/ul]

Feherke.
 
Upvote 0 Downvote
Does replacing these two lines:

Code: 
w=myObj.width;
h=myObj.height;

with these help?

Code: 
w = parseInt(myObj.width, 10);
h = parseInt(myObj.height, 10);

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:
Code Couch Tech Snippets & Info:
 
Upvote 0 Downvote
Ideas ?
Suggestions ?
Click to expand...

Put some alerts in around those last 6 lines and see what values you are getting. Right now, we have no idea.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:
Code Couch Tech Snippets & Info:
 
Upvote 0 Downvote
BillyRayPreachersSon said:
17 Feb 09 5:05

Quote:
Ideas ?
Suggestions ?


Put some alerts in around those last 6 lines and see what values you are getting. Right now, we have no idea.

Dan
Click to expand...

Dan,
thanks a lot for your suggestions. I tried them without any result.
I decided to post a complete html template with the complete job.
The DIV, as you can see, just remains where it is, instead to be re-positioned in the center of the page.

I really can't understand why the DIV isn't recognized as an object with an ID from the getElementByID function.
I inserted an alert that should advise every time the function is called, and in certain cases it does.

Thanks a lot for your (all you) help.

===============================================

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<html xmlns="<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test DIV</title>

<style type="text/css">
#PropDocumentBox{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12pt;
font-weight: normal;
color: #000000;
text-decoration: none;
background-color: #EAEAEA;
height: 131px;
width: 204px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
position: absolute;
top: 24px;
right: 971px;
z-index: 1;
visibility: visible;
}
</style>

<script type="text/javascript">
<!--
function CenterDiv(n) {
var myWidth = 0, myHeight = 0;
if (parseInt(navigator.appVersion)>3) {
if (navigator.appName=="Netscape") {
myWidth = window.innerWidth;
myHeight = window.innerHeight;
}
if (navigator.appName.indexOf("Microsoft")!=-1) {
myWidth = document.body.offsetWidth;
myHeight = document.body.offsetHeight;
}
}
myObj=document.getElementById(n).style;
w = parseInt(myObj.width, 10);
h = parseInt(myObj.height, 10);
alert( "layer width = "+myObj.width+" height = "+myObj.height);

xc=Math.round((myWidth-w)/2);
yc=Math.round((myHeight-h)/2);
myObj.Left = xc + "px";
myObj.Top = yc + "px";
}
//-->
</script>

</head>
<body onload="Javascript:CenterDiv('PropDocumentBox');">

<div id="PropDocumentBox">
<p>&nbsp;</p>
<p align="center">TEST DIV</p>
</div>
</body>
</html>
 
Upvote 0 Downvote
I see now... because you haven't set any initial dimensions on the DIV, w & h are both undefined.

If you set an initial w & h on the DIV, and alert w & h instead of the old values, you should see something:

Code: 
<div id="PropDocumentBox" [!]style="width:500px; height:200px;"[/!]>

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:
Code Couch Tech Snippets & Info:
 
Upvote 0 Downvote
Hi

Code: 
function CenterDiv(n)
{
  var myWidth = 0, myHeight = 0;
  if (parseInt(navigator.appVersion)>3) {
    if (navigator.appName=="Netscape") {
      myWidth = window.innerWidth;
      myHeight = window.innerHeight;
    }
    if (navigator.appName.indexOf("Microsoft")!=-1) {
      myWidth = document.body.offsetWidth;
      myHeight = document.body.offsetHeight;
    }
  }
  myObj=document.getElementById(n).style;
  w = parseInt(myObj.width, 10);
  h = parseInt(myObj.height, 10);

  [red]if (isNaN(w)) {
    theobj=document.getElementById(n);
    w=theobj.clientWidth;
    h=theobj.clientHeight;
    if (isNaN(w)) {
      w=theobj.offsetWidth;
      h=theobj.offsetHeight;
    }
  }[/red]

  xc=Math.round((myWidth-w)/2);
  yc=Math.round((myHeight-h)/2);

  myObj.[red]l[/red]eft = xc + "px";
  myObj.[red]t[/red]op = yc + "px";
}
And when calling a JavaScript function from event handler do not specify the [tt]javascript:[/tt] pseudo-protocol.

Feherke.
 
Upvote 0 Downvote
Well Folks,
at the end of the story I was able to make it work
using both of your suggestions.
I decided to replace the part of the routine that
was giving a better result about the window
dimensions, the first version that I put in my first
post.
Now it works fine.
This is the working version:


function CenterDiv(n)
/* the only constraint is to assign a width and an height
to the DIV via a "style" statement.
*/
{
var myWidth = 0, myHeight = 0;
if( typeof( window.innerWidth ) == 'number' ) {
//Non-IE
myWidth = window.innerWidth;
myHeight = window.innerHeight;
} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
//IE 6+ in 'standards compliant mode'
myWidth = document.documentElement.clientWidth;
myHeight = document.documentElement.clientHeight;
} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
//IE 4 compatible
myWidth = document.body.clientWidth;
myHeight = document.body.clientHeight;
}
myObj=document.getElementById(n).style;
w = parseInt(myObj.width, 10);
h = parseInt(myObj.height, 10);

if (isNaN(w)) {
theobj=document.getElementById(n);
w=theobj.clientWidth;
h=theobj.clientHeight;
if (isNaN(w)) {
w=theobj.offsetWidth;
h=theobj.offsetHeight;
}
}

xc=Math.round((myWidth-w)/2);
yc=Math.round((myHeight-h)/2);

myObj.left = xc + "px";
myObj.top = yc + "px";
}



Thanks indeed you both.

 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

lexer
  • Locked
  • Question
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
330
lexer
lexer
coldbohemia
  • Locked
  • Question
jquery function always returns contents of the same table cell, no matter which table cell i click
Replies
0
Views
305
coldbohemia
coldbohemia
JScannell
  • Locked
  • Question
Programmatically inserting a newline in a &lt;textarea&gt;, &lt;span&gt;, or &lt;div&gt;
Replies
5
Views
675
ggriffit
ggriffit
tonynsx
  • Locked
  • Question
document.getElementById(&quot;main&quot;).innerHTML not working
Replies
1
Views
112
ggriffit
ggriffit
HansMaulwurf
  • Locked
  • Question
AJAX not working after database migration from MySQL to SQL Server ( Undefined index)
Replies
0
Views
88
HansMaulwurf
HansMaulwurf

Part and Inventory Search

Sponsor

Back
Top