CODEWITHSUNDEEP
jquery
silverbackjack
silverbackjack

Reputation: 1

Keeping a div centered while resizing it

I am trying to create a circle div that gets bigger while you mouse down on it (and stops on mouse up) but I can't seem to get it to stay absolutely centered in the page when it 

function addwidth() {
  if ($(".circle").width() >= 550) {
    $(".circle").width(100);
    $(".circle").height(100);
    $('.question input').val("1");
    $(".circle").css("background-color", "red");
    $(".circle").css("margin", "450px");
  } else {

    $(".circle").width($(".circle").width() + 5);
    $(".circle").height($(".circle").height() + 5);
    $(".circle").css('margin', function(index, curValue) {
      return parseInt(curValue, 10) + -5 + 'px';
    });
    if ($(".circle").width() > 99) {
      $('.question input').val("1");
      $(".circle").css("background-color", "red");
    }
    if ($(".circle").width() > 199) {
      $('.question input').val("2");
      $(".circle").css("background-color", "orange");
    }
    if ($(".circle").width() > 299) {
      $('.question input').val("3");
      $(".circle").css("background-color", "yellow");
    }
    if ($(".circle").width() > 399) {
      $('.question input').val("4");
      $(".circle").css("background-color", "green");
    }
    if ($(".circle").width() > 499) {
      $('.question input').val("5");
      $(".circle").css("background-color", "blue");
    } else {}
  }
};


var intervalId;

function expand() {
  if (intervalId) {
    clearInterval(intervalId);
  }
  intervalId = setInterval(addwidth, 15);
};

function stopexpand() {
  clearInterval(intervalId);
};
#container1 {
  height: 100%;
  width: 100%;
}

.circle {
  background-color: black;
  margin: 450px;
  border-radius: 50%;
  behavior: url(PIE.htc);
  width: 100px;
  height: 100px;
  max-width: 550px;
  max-height: 550px;
}
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<div id="container1">
  <div class="circle" onmousedown="return expand()" onmouseup="return stopexpand()"></div>
  <div class="question"><input type="number"></div>
</div>

Any idea on how I could make sure the circle expands outwards rather than up or across? (if this makes sense)

Upvotes: 0

Views: 94

Answers (2)

Tim Consolazio
Tim Consolazio

Reputation: 4888

I do not know if being a circle has anything to do with it. But I do know that this is how you center a div on a page (or in another container, like another div), provided:

  • You have sized the div, either with "px" or "%" (both work).

From your post, it seems like you are indeed sizing the div, and you want it to stay centered absolutely on the page (not centered relative to the mouse).

If that is true, this is how I do it (when I found this solution originally I was like duh...really that's it?). 

.centerDiv {
   margin: auto;
   position: relative;
}

Again, this assumes that you have sized the div, and I would probably also put it in another div sized 100% (horizontally/vertically or both, depending on what you're trying to do).

I use that everywhere, for example, centering the "loading" div in an Angular2 app before the "app-component" has initialized.

With this, you should be able to size the div you want centered, and it'll just keep recentering itself.

Let me know if this is of any help (curious with the circle thing), if not, I'll pull down the answer, but this is indeed how I go about it.

Upvotes: 0

Nick
Nick

Reputation: 77

Try using flexbox in your container1 css:

#container1 {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  width: 100vw;
}

Upvotes: 1

Related Questions