By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
458,110 Members | 1,639 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 458,110 IT Pros & Developers. It's quick & easy.

How do I center a div both vertically and horozontally?

P: n/a
Can somoene give me an example of how to center a div, according to it's
image size... I am using different images, and so I have to resize it in a
functino according to the image's size. So I use a h and w vairable that
give me the height and width of the current image, but I can't seem to come
up with a simple freaking formula to center the image vertically and
horozontally. Thanks guys.

fnFullView = function () {
var h
var w
var _tempImg = new Image()
_tempImg.onload = function () {
_tempImg.src = this.src
h = this.height
w = this.width
}
_tempImg.src = arPhotolog[currIndex].full

_picGalImage.resizeTo(w,h)
_picGalImage.swapImage(_tempImg.src)
_picGalImage.show()
}

This is the function I am working on, but it really doesn't matter how I do
it. Thanks guys.

Tony Vasqsuez
Jul 20 '05 #1
Share this Question
Share on Google+
4 Replies


P: n/a
"Tony Vasquez" <co**********@earthlink.net> wrote in message
news:V%******************@newsread3.news.pas.earth link.net...
Can somoene give me an example of how to center a div,
according to it's image size... I am using different images,
and so I have to resize it in a functino according to the
image's size. So I use a h and w vairable that give me the
height and width of the current image, but I can't seem to come
up with a simple freaking formula to center the image vertically
and horozontally. Thanks guys.

fnFullView = function () {
var h
var w
var _tempImg = new Image()
_tempImg.onload = function () {
_tempImg.src = this.src
h = this.height
w = this.width
}
_tempImg.src = arPhotolog[currIndex].full

_picGalImage.resizeTo(w,h)
_picGalImage.swapImage(_tempImg.src)
_picGalImage.show()
}

This is the function I am working on, but it really doesn't
matter how I do it. Thanks guys.


I have to say that the function above has an almost zero chance of
working successfully. You still are not properly taking into account the
asynchronous loading of the image by the image object. Or that image
objects are not consistent is reading and reporting the dimensions of
the images downloaded, some image implementations have buggy onload
handlers and there is at least one browser where the Image object is a
dummy and just never retrieves the file from the server.

If you want to do this reliably your best bet is to include the image
size data in your JavaScript along with the file names.

However, your question is about centring a DIV element. I assume that
you want to centre the DIV in the browser viewport (rather than centring
it on the HTML page, as that might just be a CSS thing).

The first thing that you will need to know are the dimensions of the
viewport. But you will be positioning the element relative to the HTML
page so you will also want to know the extent to which the page may have
been scrolled in the X and Y directions.

I could go into the detail of how to get these values but I have already
written that once this week so I will just provide you with the most
general cross-browser code that I know for doing the job and let you
work out how it does it for yourself:-

var windowState = (function(){
var readScroll = {scrollLeft:0,scrollTop:0};
var readSize = {clientWidth:0,clientHeight:0};
var readScrollX = 'scrollLeft';
var readScrollY = 'scrollTop';
var readWidth = 'clientWidth';
var readHeight = 'clientHeight';
function otherWindowTest(obj){
if((document.compatMode)&&
(document.compatMode == 'CSS1Compat')&&
(document.documentElement)){
return document.documentElement;
}else if(document.body){
return document.body;
}else{
return obj;
}
};
if((typeof this.innerHeight == 'number')&&
(typeof this.innerWidth == 'number')){
readSize = this;
readWidth = 'innerWidth';
readHeight = 'innerHeight';
}else{
readSize = otherWindowTest(readSize);
}
if((typeof this.pageYOffset == 'number')&&
(typeof this.pageXOffset == 'number')){
readScroll = this;
readScrollY = 'pageYOffset';
readScrollX = 'pageXOffset';
}else{
readScroll = otherWindowTest(readScroll);
}
return {
getScrollX:function(){
return (readScroll[readScrollX]||0);
},
getScrollY:function(){
return (readScroll[readScrollY]||0);
},
getWidth:function(){
return (readSize[readWidth]||0);
},
getHeight:function(){
return (readSize[readHeight]||0);
}
};
})();

The effect of including this script is that a global property with the
name "windowState" is assigned an object that has 4 methods that will
tell you what you need to know about the viewport/window:-

var viewPortWidth = windowState.getWidth();
var viewPortHeight = windowState.getHeight();
var horizontalScroll = windowState.getScrollX();
var verticalScroll = windowState.getScrollY();

That script covers a very wide range of browsers (all that I have
sufficient details of) but, like any JavaScript, it is possible that it
will encounter a browser so unusual that it just will not work. In that
event it defaults to returning zero for all values. It is always
possible that the real (and accurately reported) value for the viewport
dimensions are zero so you might want to test for that possibility and
just place the DIV at the page's 0,0 co-ordinates as a fall-back
position.

The horizontal position of the DIV would be calculated as:-

var hPos = Math.round(horizontalScroll+((viewPortWidth-divWidth)/2));

And vertical as:-

var vPos = Math.round(verticalScroll+((viewPortHeight-divHeight)/2));

- but either value may come out less than zero in which case it should
probably be defaulted to zero:-

hPos = (hPos < 0)?0:hPos;
vPos = (vPos < 0)?0:vPos;

The next problem is getting a reference to the DIV and more specifically
the - style - object associated with that DIV (or the DIV itself is it
has no style objet. i.e. Netscape 4). Assuming that the DIV is an
absolutely positioned element and that it has an ID attribute a function
such as:-

function getStyleObj(id){
var obj = null;
if(document.getElementById){
obj = document.getElementById(id);
}else if(document.all){
obj = document.all[id];
}else if(document.layers){
obj = document.layers[id];
}
return (obj && obj.style) || obj;
}

- can be used. Called as:-

var divStyleRef = getStyleObj("divId");

It is always worth testing the object returned from such a function call
to ensure that it actually refers to an object (else the subsequent code
would produce errors):-

if(divStyleRef){
. . . // The rest of the code that attempts
// to alter/use divStyleRef.
}

The position of the DIV can be set by assigning values to its - top -
and - left - properties. However, there is a problem when doing this in
that some browsers require the properties to be numeric values while
others are expecting strings. Not a problem in itself as browsers will
type-convert the assigned value to a type appropriate to the property.
The problem is with the newer browsers operating in " CSS1Compat" (or
"standards") mode, as in the CSS standard property values are _required_
to specify a unit, in our case "px". Fortunately the browsers that
require the CSS units when in standards mode are quite happy to accept
the units when in any mode so we just decide to provide the units if
there is an indication that the browser may care. Obviously appending
"px" to the position value means that the browser will be expecting a
string so the test is to find out if the - top - or - left - property is
a string and provide the CSS units if it is:-

var positionMod = (typeof divStyleRef.top == 'string')?"px":0;

The - positionMod - value is set to the string "px" if the type of the -
top - property is "string" else it is set to the number zero. This means
that, when the - top - and - left - properties are set, using the
addition/concatenation operator - + - to append - positionMod - to the
calculated position values results is that browsers that are expecting
string values with CSS units will get a string with the units on the end
and browsers that are expecting numeric values will get numbers
(unmodified by the addition of zero). So to set the position of the
DIV:-

divStyleRef.top = vPos + positionMod;
divStyleRef.left = hPos + positionMod;

And that is enough from me. You will have to get someone else to tell
you how to get the dimensions for the DIV/image.

Richard.
Jul 20 '05 #2

P: n/a
"Richard Cornford" <Ri*****@litotes.demon.co.uk> wrote in news:bj9cii$rsr$1
$8*******@news.demon.co.uk:
and there is at least one browser where the Image object is a
dummy and just never retrieves the file from the server.


which browser is this? just curious.
Jul 20 '05 #3

P: n/a
"Sean Jorden" <s_***********@no.spam.n_o_r_a.d.a.com> wrote in message
news:Xn********************@198.80.55.250...
"Richard Cornford" <Ri*****@litotes.demon.co.uk> wrote in news:bj9cii$rsr$1$8*******@news.demon.co.uk:
and there is at least one browser where the Image
object is a dummy and just never retrieves the file
from the server.


which browser is this? just curious.


ICEbrowser 5.4

If you call toString on the Image constructor you get:-

function Image() {
this.src = "";
this.width = 0;
this.height = 0;
this.complete = true;
}

- as opposed to the more normal:-

function Option() { [native code] }

- that the working Option constructor returns. So they have dummied it
with JavaScript.

Richard.
Jul 20 '05 #4

P: n/a
How about putting the div inside a table cell and set halign="center"
and valign="middle"

Lewis Shadoff
Brazosport College
Lake Jackson, TX

Tony Vasquez wrote:
Can somoene give me an example of how to center a div, according to it's
image size... I am using different images, and so I have to resize it in a
functino according to the image's size. So I use a h and w vairable that
give me the height and width of the current image, but I can't seem to come
up with a simple freaking formula to center the image vertically and
horozontally. Thanks guys.

fnFullView = function () {
var h
var w
var _tempImg = new Image()
_tempImg.onload = function () {
_tempImg.src = this.src
h = this.height
w = this.width
}
_tempImg.src = arPhotolog[currIndex].full

_picGalImage.resizeTo(w,h)
_picGalImage.swapImage(_tempImg.src)
_picGalImage.show()
}

This is the function I am working on, but it really doesn't matter how I do
it. Thanks guys.

Tony Vasqsuez


Jul 20 '05 #5

This discussion thread is closed

Replies have been disabled for this discussion.