CODEWITHSUNDEEP
javascripthtmlcss
jwdwsn
jwdwsn

Reputation: 33

Javascript Affecting Image Position

I have an image and a line of text on top of a blue box, all fading in with JavaScript. If I don't use any JS, I can center the image without any problems. But as soon as the JS is used, the image does not center anymore. However, the line of text does. Why does this happen?

Here are the code samples:

$("#box").velocity("fadeIn", {
  duration: 5500
});

$("#txt").velocity("fadeIn", {
  duration: 10500
});

$("#pic").velocity("fadeIn", {
  duration: 10500
});
#box {
  width: 100%;
  height: 1000px;
  background-color: lightblue;
}

p {
  text-align: center;
}

img {
  width: 40%;
  display: block;
  margin: 0 auto;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="cultura.css">

</head>

<body>


  <div id="box">

    <img id="pic" src="pic.jpg">

    <p id="txt"> a line of text </p>

  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.ui.min.js"></script>
  <script src="cultura.js"></script>
</body>

</html>

Upvotes: 0

Views: 56

Answers (1)

esqew
esqew

Reputation: 44710

Velocity is setting your element's CSS display property to inline. Explicitly specify the fadeIn should set the display to block on your #img element:

$("#box").velocity("fadeIn", {
  duration: 5500
});

$("#txt").velocity("fadeIn", {
  duration: 10500
});

$("#pic").velocity("fadeIn", {
  duration: 10500,
  display: "block"
});
#box {
  width: 100%;
  height: 1000px;
  background-color: lightblue;
}

p {
  text-align: center;
}

img {
  width: 40%;
  display: block;
  margin: 0 auto;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="cultura.css">

</head>

<body>


  <div id="box">

    <img id="pic" src="pic.jpg">

    <p id="txt"> a line of text </p>

  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.ui.min.js"></script>
  <script src="cultura.js"></script>
</body>

</html>

Upvotes: 2

Related Questions