473,498 Members | 1,907 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

centerDiv


Hi I found these functions reading old posts of this newsgroup:

function gebi(id){
var i, d = document;
for(i in {getElementById: 0, all: 0, layers: 0})
if(i in d) break;
return d[i] ? d[i][id] || d[i](id) : null;
}

function centerDiv(id){
var o = gebi(id) || {}, w = window, b = document.body;
//var o = gebi(id) || {style: ""}, w = window, b = document.body;
o.style.left = (o.pageX = (w.innerWidth || b.clientWidth || 0) -
(o.offsetWidth || o.width || 0) >> 1) + "px";
o.style.top = (o.pageY = (w.innerHeight || b.clientHeight || 0) -
(o.offsetHeight || o.height || 0) >> 1) + "px";
}

I call it this way:

<body onload="centerDiv('divID')">

In FireFox I get no problems...

In Internet Explorer (6, SP2, WinXP), I get the yellow triangle: "Object
required". If I only write <body> (without calling the function) I get
no error. The div exists and its id is divID... what could be wrong here?

Bye, thanks.
May 13 '06 #1
7 1299
Asker wrote on 13 mei 2006 in comp.lang.javascript:
Hi I found these functions reading old posts of this newsgroup:
[.. see below ..]
In FireFox I get no problems...

In Internet Explorer (6, SP2, WinXP), I get the yellow triangle:
"Object required". If I only write <body> (without calling the
function) I get no error. The div exists and its id is divID... what
could be wrong here?


Works nicely in IE6, perhaps you made an error in the part you do not
show? Try this as a html file:

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

<script type='text/jscript'>

function gebi(id){
var i, d = document;
for(i in {getElementById: 0, all: 0, layers: 0})
if(i in d) break;
return d[i] ? d[i][id] || d[i](id) : null;
}

function centerDiv(id){
var o = gebi(id) || {}, w = window, b = document.body;
o.style.left = (o.pageX = (w.innerWidth || b.clientWidth || 0) -
(o.offsetWidth || o.width || 0) >> 1) + "px";
o.style.top = (o.pageY = (w.innerHeight || b.clientHeight || 0) -
(o.offsetHeight || o.height || 0) >> 1) + "px";
}

</script>

<body onload="centerDiv('divID')">

<div id=divID
style='position:absolute;width:200px;border:red 1px solid;'>
Blah</div>

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

Please always show error code linenumber with pointer.

I like this code,
but why would you use code you, I presume, do not completely understand?

Or learn by seperate testing:

alert(typeof {});
alert(typeof {}.offsetWidth);
alert(5 >> 1); // bin 101 -> bin 10 -> 2 [or integer devide by 2]

and in the end of the centerDiv() insert:

alert(o.style.left);
alert(o.pageX);

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)
May 13 '06 #2

Hello, and thanks.

Anything works with your basic example.
BUT not using it the way I use it:
that is, my DIV contains a movie .swf:
all the code to show it is written by javascript:

http://www.bobbyvandersluis.com/ufo/
(I use it mainly to avoid Microsoft/EOLAS/active-content issues)

So I have this external JS that creates the Flash code, and (when
preloader has finished and body onload is fired) another JS should
exactly center the DIV.

The code is this:

<html>
<head>

<script type="text/javascript" src="center.js"></script>
<script type="text/javascript" src="ufo.js"></script>
<script type="text/javascript">
var myUfoObject = {movie:"login.swf", width:"300", height:"400",
majorversion:"7", build:"0"};
UFO.create(myUfoObject, "container");
</script>

<title>Login page</title>
<style type="text/css">
body
{margin: 0px;
background-image: url(pattern_3.gif);
background-color: #000000;
}
..bordered {
border-style: solid;
border-width: 15px 15px 15px 15px;
background-color: #fff;
border-color: #fff;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="shortcut icon" href="prefs.ico" />
</head>

<body onload="centerDiv('container')">

<div class="bordered" id="container"
style="position:absolute;height:400;width:300;">
<p>...replacement...</p>
</div>
</body>
</html>

IE 6 fires a "permission denied" error on line 6.
No problem with FF.

Thanks
May 13 '06 #3

a little note:

it happens only the first time you load the page:
if you refresh, you get no error and the div perfectly centers
May 13 '06 #4
Asker wrote on 13 mei 2006 in comp.lang.javascript:
IE 6 fires a "permission denied" error on line 6.
No problem with FF.


Permissions have nothing to do with the syntax of javascript.

It just says some security setting is trying to prevent an dangerous
action.

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)
May 13 '06 #5
Asker wrote on 13 mei 2006 in comp.lang.javascript:

a little note:

it happens only the first time you load the page:
if you refresh, you get no error and the div perfectly centers


Please quote what you are replying to.

this is not email. Others could want to follow our ramblings too.

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)
May 13 '06 #6
Permissions have nothing to do with the syntax of javascript.

It just says some security setting is trying to prevent an dangerous
action.


I only know I get this yellow triangle here in the left corner and that
after this alert appears, the code to center the div fails. That said,
the second time I load the page I get no error and the div centers: this
is a little crazy but...
May 13 '06 #7
Asker wrote on 13 mei 2006 in comp.lang.javascript:
Permissions have nothing to do with the syntax of javascript.

It just says some security setting is trying to prevent an dangerous
action.


I only know I get this yellow triangle here in the left corner and that
after this alert appears, the code to center the div fails. That said,
the second time I load the page I get no error and the div centers: this
is a little crazy but...


Not crasy at all. But not Javascript either, methinks.
--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)
May 13 '06 #8

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

2
5471
by: David Winter | last post by:
This is a totally trivial CSS problem, I'm sure, but I don't get it. I want a centered DIV with a fixed width between two other DIVs that should fill the rest of the window/viewport (= 100%). How...
5
8019
by: Spondishy | last post by:
Hi, I am using the following in my stylesheet to center divs in firefox. html>body { font-size: 13px; } div.centerdiv {
2
1591
by: rowe_newsgroups | last post by:
Hello all, I have something I believe is something simple, but I can't seem to figure out what to do. I did some searching, but I either can't get my search right. Anyways, on a new webpage I'm...
4
4664
by: Queez | last post by:
Hi, I've been having a problem with CSS that's driving me crazy. I'm basically trying to set the minimum width of a div to 750px and the width to 100%, so that viewed at a resolution under...
0
7004
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
7167
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
0
7379
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
0
5464
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...
0
4593
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and...
0
3095
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The...
0
3085
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
657
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
0
292
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.