The text appears choppy as the javascript is in the process of loading

Question

The text appears choppy as the javascript is in the process of loading

Upon integrating a basic javascript function into my website to request data from another source, I noticed that the text in the header div suddenly shifts left and then centers itself while the site is loading. This strange movement occurs every time the browser is refreshed.

I suspect that the issue may be related to my div layout or CSS styling. Although I acknowledge that my code is not flawless, it's unclear whether this specific problem stems from it or persists despite it.

Any suggestions on how to resolve this?

body {
  font-family: 'Roboto', sans-serif;
  max-width: 1000px;
  margin: 0 auto;
  padding: 15px;
}

#hello {
  display: inline-block;
  text-align: center;
}

#logo {
  font-weight: 900;
  font-size: 2em;
  margin-bottom: 15px;
}

#output {
  font-family: 'Roboto';
  font-size: 40px;
  font-weight: 900;
  display: block;
}

<html>

<head>
  <link type="text/css" rel="stylesheet" href="/myip-jerktest.css">
</head>

<body>
  <div id="hello">
    <div id="logo">
      Text Logo Here
    </div>

    <span id="output">
<script>
function getIP(json) {
document.write(json.ip);
}
</script>

<script src="https://api.ipify.org?format=jsonp&callback=getIP">
</script>
</span>

    <div style="width:400px;height:45px">
    </div>
  </div>

</body>

</html>

javascript html css

Answer 1

Answer №1

You can transfer the data to the designated div for output, utilizing this code snippet:

function getIP(json) {
  document.querySelector('#output').innerHTML=(json.ip);
}

body {
  font-family: 'Roboto', sans-serif;
  max-width: 1000px;
  margin: 0 auto;
  padding: 15px;
}

#hello {
  display: inline-block;
  text-align: center;
}

#logo {
  font-weight: 900;
  font-size: 2em;
  margin-bottom: 15px;
}

#output {
  font-family: 'Roboto';
  font-size: 40px;
  font-weight: 900;
  display: block;
}

<html>

<head>
  
</head>

<body>
  <div id="hello">
    <div id="logo">
      Text Logo Here
    </div>

    <span id="output">
      
    </span>

    <div style="width:400px;height:45px">
    </div>
  </div>
      <script>
        function getIP(json) {
          document.querySelector('#output').innerHTML = (json.ip);
        }
      </script>

      <script src="https://api.ipify.org?format=jsonp&callback=getIP">
      </script>
</body>

</html>

The script has been relocated to the end of the body. Please test again.

Answer 2

You can transfer the data to the designated div for output, utilizing this code snippet:

function getIP(json) {
  document.querySelector('#output').innerHTML=(json.ip);
}

body {
  font-family: 'Roboto', sans-serif;
  max-width: 1000px;
  margin: 0 auto;
  padding: 15px;
}

#hello {
  display: inline-block;
  text-align: center;
}

#logo {
  font-weight: 900;
  font-size: 2em;
  margin-bottom: 15px;
}

#output {
  font-family: 'Roboto';
  font-size: 40px;
  font-weight: 900;
  display: block;
}

<html>

<head>
  
</head>

<body>
  <div id="hello">
    <div id="logo">
      Text Logo Here
    </div>

    <span id="output">
      
    </span>

    <div style="width:400px;height:45px">
    </div>
  </div>
      <script>
        function getIP(json) {
          document.querySelector('#output').innerHTML = (json.ip);
        }
      </script>

      <script src="https://api.ipify.org?format=jsonp&callback=getIP">
      </script>
</body>

</html>

The script has been relocated to the end of the body. Please test again.

Answer 3

Answer №2

#greetings {
    display: block; // or leave it empty since divs are by default block-level elements
    text-align: center;
}

Instead of writing the IP address directly, consider appending it within a paragraph tag. Currently, it is being displayed within a span element which is inline.
If you wish to center the span element, you will need to apply CSS styles to make it take up the full width and align it to the center.

Answer 4

#greetings {
    display: block; // or leave it empty since divs are by default block-level elements
    text-align: center;
}

Instead of writing the IP address directly, consider appending it within a paragraph tag. Currently, it is being displayed within a span element which is inline.
If you wish to center the span element, you will need to apply CSS styles to make it take up the full width and align it to the center.

Answer 5

Answer №3

Instead of rewriting the HTML document using the write method, you can simply append a new DOM element to the body of the document.

In addition, it is recommended to utilize an XMLHttpRequest request object to fetch the JSON data efficiently.

loadJson('https://cors-anywhere.herokuapp.com/https://api.ipify.org?format=json', getIP);

function getIP(json) {
  let el = document.createElement('DIV');
  el.innerHTML = json.ip;
  document.body.appendChild(el);
}

function loadJson(url, callback) {
  var xhr = new XMLHttpRequest();
  xhr.responseType = 'json';
  xhr.onload = (e) => callback(xhr.response);
  xhr.open('GET', url);
  xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
  xhr.send();
}

body {
  font-family: 'Roboto', sans-serif;
  max-width: 1000px;
  margin: 0 auto;
  padding: 15px;
}

#hello {
  display: inline-block;
  text-align: center;
}

#logo {
  font-weight: 900;
  font-size: 2em;
  margin-bottom: 15px;
}

#output {
  font-family: 'Roboto';
  font-size: 40px;
  font-weight: 900;
  display: block;
}

<div id="hello">
  <div id="logo">Text Logo Here</div>
  <span id="output"></span>
  <div style="width:400px;height:45px"></div>
</div>

Answer 6

Instead of rewriting the HTML document using the write method, you can simply append a new DOM element to the body of the document.

In addition, it is recommended to utilize an XMLHttpRequest request object to fetch the JSON data efficiently.

loadJson('https://cors-anywhere.herokuapp.com/https://api.ipify.org?format=json', getIP);

function getIP(json) {
  let el = document.createElement('DIV');
  el.innerHTML = json.ip;
  document.body.appendChild(el);
}

function loadJson(url, callback) {
  var xhr = new XMLHttpRequest();
  xhr.responseType = 'json';
  xhr.onload = (e) => callback(xhr.response);
  xhr.open('GET', url);
  xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
  xhr.send();
}

body {
  font-family: 'Roboto', sans-serif;
  max-width: 1000px;
  margin: 0 auto;
  padding: 15px;
}

#hello {
  display: inline-block;
  text-align: center;
}

#logo {
  font-weight: 900;
  font-size: 2em;
  margin-bottom: 15px;
}

#output {
  font-family: 'Roboto';
  font-size: 40px;
  font-weight: 900;
  display: block;
}

<div id="hello">
  <div id="logo">Text Logo Here</div>
  <span id="output"></span>
  <div style="width:400px;height:45px"></div>
</div>

Answer 7

Answer №4

utilize

document.getElementById().innerHTML

Example

body {
  font-family: 'Roboto', sans-serif;
  max-width: 1000px;
  margin: 0 auto;
  padding: 15px;
}

#hello {
  display: inline-block;
  text-align: center;
}

#logo {
  font-weight: 900;
  font-size: 2em;
  margin-bottom: 15px;
}

#output {
  font-family: 'Roboto';
  font-size: 40px;
  font-weight: 900;
  display: block;
}

<html>
<head>
  <link type="text/css" rel="stylesheet" href="/myip-jerktest.css">
</head>
<body>
  <div id="hello">
    <div id="logo">
      Text Logo Here
    </div>
    <span id="output">
   </span>
    <div style="width:400px;height:45px">
    </div>
  </div>
  <script>
    function getIP(json) {
      document.getElementById('output').innerHTML = json.ip;
    }
  </script>
  <script src="https://api.ipify.org?format=jsonp&callback=getIP">
  </script>
</body>
</html>

Answer 8

utilize

document.getElementById().innerHTML

Example

body {
  font-family: 'Roboto', sans-serif;
  max-width: 1000px;
  margin: 0 auto;
  padding: 15px;
}

#hello {
  display: inline-block;
  text-align: center;
}

#logo {
  font-weight: 900;
  font-size: 2em;
  margin-bottom: 15px;
}

#output {
  font-family: 'Roboto';
  font-size: 40px;
  font-weight: 900;
  display: block;
}

<html>
<head>
  <link type="text/css" rel="stylesheet" href="/myip-jerktest.css">
</head>
<body>
  <div id="hello">
    <div id="logo">
      Text Logo Here
    </div>
    <span id="output">
   </span>
    <div style="width:400px;height:45px">
    </div>
  </div>
  <script>
    function getIP(json) {
      document.getElementById('output').innerHTML = json.ip;
    }
  </script>
  <script src="https://api.ipify.org?format=jsonp&callback=getIP">
  </script>
</body>
</html>

The text appears choppy as the javascript is in the process of loading

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Please ensure there is space reserved for the header above the content

What advantages does JWT have over Firebase that make it the preferred choice?

What is the best way to access the element before and after a specific element in an array using JavaScript?

How to style a div's height responsively behind a circle using CSS

In order to successfully utilize Node.js, Async.js, and Listeners, one must ensure

Using window.open in Google Chrome results in multiple tabs being opened instead of just one

Mastering the Art of Aligning Avatars: Effortless Right Alignment

Tips for integrating CSS keyframes in MUI v5 (using emotion)

Troubleshooting the issue of AngularJS ui view not auto-scrolling as

What could be causing AJAX to consistently return identical data to the callback function when distinct objects are supplied as arguments?

Utilizing inline-block for styling code blocks

Tips for sending HTML code via query string

Adding numerous values to a single key in a JSON object

Where is the best place for my function to reside: /mixins or /plugins directory?

Can I place an anchor tag around the circle element within an SVG element?

Issues with vue-moment.js in Vue

Issue of Vue not resolving Ionic back button component

Error Encountered: Internet Explorer 11 Runtime Issue

The function toDataURL() in Canvas is storing images in low resolution

"We encountered an error with the external script while trying to load file content using jQuery's ajax function. It