CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user4440701
user4440701

Reputation:

How can I change the width/height of a div without changing position?

I want to duplicate what this guy did but without using canvas. I want to have a div in the center of my page and simply increment the width/height/border-radius by 10px every second. This works pretty well, but for some reason the bigger the div gets the more it moves to the lower right. The circle is not staying still, its center positioning is changing as it gets larger. How can I change the width/height of a div without changing position?

main.css

div {
  background-color: green;
  width: 100px;
  height: 100px;
  border-radius: 100px;
  position:absolute;
  top:50%;
  left:50%;
  margin-top:-50px; /* this is half the height of your div*/  
  margin-left:-100px; /*this is half of width of your div*/
}

index.html

<!DOCTYPE html>
  <head>
    <title>CircleTime</title>
    <link rel="stylesheet" href="main.css"></link>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="app.js"></script>
  </head>
  <body>
  <div></div>
  </body>
</html>

app.coffee

incrementCircle = ->
  newSize = circle.height() + 10
  circle.height newSize
  circle.width newSize
  circle.css 'border-radius', newSize

$(document).ready ->
  window.circle = $("div")
  setInterval(incrementCircle, 1000);

Upvotes: 2

Views: 2768

Answers (4)

Douglas Timms
Douglas Timms

Reputation: 694

In your coffeescript, keep updating the margins like this: 

incrementCircle = ->
newSize = circle.height() + 10
circle.height newSize
circle.width newSize
circle.css 'border-radius', newSize
circle.css 'margin-top', newSize/-2
circle.css 'margin-left', newSize/-2

$(document).ready ->
  window.circle = $("div")
  setInterval(incrementCircle, 1000);

http://jsfiddle.net/sw0zn36e/5/

Upvotes: 1

slife
slife

Reputation: 31

Are you also changing the margins?

margin-top:-50px; /* this is half the height of your div*/    
margin-left:-100px; /*this is half of width of your div*/

Just add this to your incrementCircle

circle.css 'margin', -(newSize/2) + 'px, 0px, 0px, ' + -(newSize/2) + 'px'

Upvotes: 2

rwwagner90
rwwagner90

Reputation: 360

Switching to margin: 0 auto; works. See this codepen: http://codepen.io/anon/pen/myWBZW

Upvotes: 0

Bellu
Bellu

Reputation: 2573

This could be a css problem.

Try this:

div {
  background-color: green;
  width: 100px;
  height: 100px;
  border-radius: 100px;
  margin: 0 auto;
}

Upvotes: 0

Related Questions