wmethlie
asked on
Change width of a DIV along central vertical axis
I have a container with a bunch of absolutely positioned DIV elements, and I am working on a script that creates a shrinking animation effect using setInterval. During each interval, a method is called that decreases the width of the DIV by 1, until it reaches 0, then does the opposite until it reaches its original size.
The problem is that I cannot seem to get the DIVs to shrink to the middle. They will only shrink to the left. Here is the relevant setInterval code that shrinks the DIV (the code to grow it back again is the same with the sign changed):
var cur_w = parseInt( block.style.width );
cur_w -= 10;
if( cur_w < 0 )
cur_w = 0;
block.style.width = cur_w + "px";
and here is the css stuff for both the container and the DIVs themselves.
.block-container{
margin-left: auto;
margin-right: auto;
position:absolute;
text-align:center;
top:0px;
left:0px;
}
.block{
width:100px;
height:100px;
position:absolute;
}
The DIVs are set up in a table-less way, so they need to be absolute. How do I get them aligned in such a way as to have them shrink along the center axis as opposed to the left side axis????
Thanks in advance...
=russ
The problem is that I cannot seem to get the DIVs to shrink to the middle. They will only shrink to the left. Here is the relevant setInterval code that shrinks the DIV (the code to grow it back again is the same with the sign changed):
var cur_w = parseInt( block.style.width );
cur_w -= 10;
if( cur_w < 0 )
cur_w = 0;
block.style.width = cur_w + "px";
and here is the css stuff for both the container and the DIVs themselves.
.block-container{
margin-left: auto;
margin-right: auto;
position:absolute;
text-align:center;
top:0px;
left:0px;
}
.block{
width:100px;
height:100px;
position:absolute;
}
The DIVs are set up in a table-less way, so they need to be absolute. How do I get them aligned in such a way as to have them shrink along the center axis as opposed to the left side axis????
Thanks in advance...
=russ
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Thanks again.