Link to home
Start Free TrialLog in
Avatar of wmethlie
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
ASKER CERTIFIED SOLUTION
Avatar of LeeKowalkowski
LeeKowalkowski
Flag of United Kingdom of Great Britain and Northern Ireland image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of wmethlie
wmethlie

ASKER

thanks for the help.  there really is no way to center an absolutely positioned element along its y-axis.  In Flash you can set the axis to any point, and my goal with this project was to do as much as I could without Flash, but obviously there are limitations.  Your solution worked, but is too "expensive" to be practical in most circumstances, so I'm going back to the drawing board.

Thanks again.