Center <IMG> in <DIV>

[Carl]

Hi all
I have a javascript function that drags and drops an element (ie img)
into a container (ie bordered div). The function works and returns the
element and and container.
My next step is to center the element in the container if the user is
sloppy with positioning it.
I can only test this on IE6 and IE5.5 and it fails. It positions the
element too much right and low.
Here is the function:
function SnapToContainer(Container,El) {
//X = left
//Y = top

var Cont_Style = Container.style
var El_Style = El.style

//get container's height and width and centers
var Cont_Width = parseInt(Cont_Style.width);//int value
var Cont_Center_X = Cont_Width/2//int value
var Cont_Height = parseInt(Cont_Style.height);//int value
var Cont_Center_Y = Cont_Height/2;//int value

//get the container's left and top
var Cont_Left = parseInt(Cont_Style.left);//int value
var Cont_Top = parseInt(Cont_Style.top);//int value

//get element's height and width and centers
var El_Width = parseInt(El_Style.width);//int value
var El_Center_X = El_Width/2;//int value
var El_Height = parseInt(El_Style.height);//int value
var El_Center_Y = El_Height/2;//int value

//new positions
var lft = Cont_Left + (Cont_Center_X - El_Center_X);//int value
var tp = Cont_Top + (Cont_Center_Y - El_Center_Y);//int value

//check if the container is larger than the element
if (Cont_Width >= El_Width && Cont_Height >= El_Height)
{
//move the element
El_Style.top = tp+"px";//string value
El_Style.left = lft+"px";//string value
//reset the starting coords
El.yPos = tp;//int value
El.xPos = lft;//int value

return true;
}

return false;
}

Here are the elements:
<p>
<img id="helpI" src="help.gif" onMouseDown="return
dragImg(this,event)" style="width=27;height=27"/>
<img id="printI" src="print.gif" onMouseDown="return
dragImg(this,event)" " style="width=27;height=27"/>
<img id="emailI" src="email.gif" onMouseDown="return
dragImg(this,event) style="width=27;height=27"/>
</p>

And here are some of the containers:
<div id="placeholder1"
style="position:absolute;left:50px;top:320px;width=150;height=50;border=solid
2px">
</div>
<div id="placeholder2"
style="position:absolute;left:50px;top:520px;width=150;height=50;border=solid
2px">
</div>

 

[RobG]

Hi all
I have a javascript function that drags and drops an element (ie img)
into a container (ie bordered div). The function works and returns the
element and and container.
My next step is to center the element in the container if the user is
sloppy with positioning it.
I can only test this on IE6 and IE5.5 and it fails. It positions the
element too much right and low.

Your issue is with CSS, not javascript. Once you have worked out how
to properly center your element, then you can apply script to make that
happen.

Ask about centering the image at
comp.infosystems.www.authoring.stylesheets

<URL:
http://groups.google.com.au/group/comp.infosystems.www.authoring.stylesheets
But fix all the syntax errors first.

Here is the function:
function SnapToContainer(Container,El) { [...]
var Cont_Center_X = Cont_Width/2//int value

Cont_Center_X will only be an int if Cont_Width is even. Similarly for
other values divided by 2 that you seem to expect to give integer
results.

[...]

Here are the elements:
<p>
<img id="helpI" src="help.gif" onMouseDown="return
dragImg(this,event)" style="width=27;height=27"/>

You have some typos here and elsewhere:

- you appear to be using XHTML, attribute names must be lower case
- use colons ":" for CSS property/value separators, not equals "="
- CSS lengths must have a unit unless the value is zero