Adjust the positioning of an HTML element in relation to another to prevent elements from moving erratically

Question

Adjust the positioning of an HTML element in relation to another to prevent elements from moving erratically

Currently, I am working on a website where I have implemented some javascript to achieve a 'typewriter' effect for the prominent middle-centered text displayed below. The script is designed to animate the text by typing it letter by letter in a forward motion and then erasing the text before moving on to the next word. However, I have encountered an issue where, upon deletion of the text, the paragraph element containing the text becomes empty and as a result, the button below 'jumps' to fill the space vacated by the removed text. I am seeking advice on the best approach to resolve this problem, either through modifying the javascript code or by implementing a simple CSS positioning solution. Is there a way to position the button relative to the top text "we create digital products" to address this issue?

https://i.sstatic.net/9yADS.jpg

https://i.sstatic.net/O2qV5.jpg

Here is my HTML:

<div class="agency-hero">
    <section class="container">
      <div class="hero-text customFadeInUp">
        <h1 class="tagLine">
          We create digital products
        </h1>
        <p><span class="txt-type " data-wait="2000" data-words='[" "," Websites "," Web Applications "]'></span></p>
        <a href="agency-portfolio-4.html" class="stayPut">
          See our work
        </a>
      </div>
    </section>
  </div>

And this is the javascript code used to animate the text:

const TypeWriter = function(txtElement, words, wait = 3000){
    this.txtElement = txtElement;
    this.words = words;
    this.txt='';
    this.wordIndex=0;
    this.wait=parseInt(wait,10);
    this.type();
    this.isDeleting = false;
}

// Type Method
TypeWriter.prototype.type = function() {

    //current index of word
    const current = this.wordIndex % this.words.length;
    //get Full text
    const fullTxt = this.words[current];
    //check for if currently in the deleting state or not
    if(this.isDeleting){
        this.txt = fullTxt.substring(0,this.txt.length -1);
    }else{
        //add a character
        this.txt = fullTxt.substring(0,this.txt.length +1);
    }

    //insert txt into element
    this.txtElement.innerHTML = `<span class="txt">${this.txt}</span>`;

    // Initial Type Speed
    let typeSpeed = 300;

    if(this.isDeleting){
        typeSpeed /= 2;
    }

    // If word is complete then move on to next word
    if(!this.isDeleting && this.txt == fullTxt){
        //make pause at the end
        typeSpeed = this.wait;
        //set Delete to True
        this.isDeleting = true;
    } else if(this.isDeleting && this.txt == ''){
        this.isDeleting=false;
        //move to next word
        this.wordIndex ++;
        // Pause before start typing
        typeSpeed = 500;
    }
    setTimeout(() => this.type(),typeSpeed);
}
// Init on DOM Load

document.addEventListener('DOMContentLoaded',init);

//Init App

function init(){
    const txtElement = document.querySelector('.txt-type');
    const words = JSON.parse(txtElement.getAttribute('data-words'));
    const wait = txtElement.getAttribute('data-wait');

    new TypeWriter(txtElement, words, wait);
}

javascript html css

Answer 1

Answer №1

To maintain the desired space between texts, you can utilize the CSS property min-height. The following code snippets demonstrate how to achieve this:

With Text-

body {
  background-color: lightblue;
}

h1 {
  color:black;
  text-align: center;
}

p {
  font-family: verdana;
  font-size: 40px;
  background-color:red;
  min-height:20px;
}
p+p {
  font-size: 20px;
   background-color:orange;
}

<h1>We create Digital Products</h1>
<p>Type Writer</p>
<p>See my work</p>

Without Text

body {
  background-color: lightblue;
}

h1 {
  color:black;
  text-align: center;
}

p {
  font-family: verdana;
  font-size: 40px;
  background-color:red;
  min-height:20px;
}
p+p {
  font-size: 20px;
   background-color:orange;
}

<h1>We create Digital Products</h1>
<p></p>
<p>See my work</p>

The height of the block element p is determined by its content. Implementing min-height in CSS can help control the gap between texts effectively. Hope this explanation is useful to you.

Answer 2

To maintain the desired space between texts, you can utilize the CSS property min-height. The following code snippets demonstrate how to achieve this:

With Text-

body {
  background-color: lightblue;
}

h1 {
  color:black;
  text-align: center;
}

p {
  font-family: verdana;
  font-size: 40px;
  background-color:red;
  min-height:20px;
}
p+p {
  font-size: 20px;
   background-color:orange;
}

<h1>We create Digital Products</h1>
<p>Type Writer</p>
<p>See my work</p>

Without Text

body {
  background-color: lightblue;
}

h1 {
  color:black;
  text-align: center;
}

p {
  font-family: verdana;
  font-size: 40px;
  background-color:red;
  min-height:20px;
}
p+p {
  font-size: 20px;
   background-color:orange;
}

<h1>We create Digital Products</h1>
<p></p>
<p>See my work</p>

The height of the block element p is determined by its content. Implementing min-height in CSS can help control the gap between texts effectively. Hope this explanation is useful to you.

Answer 3

Answer №2

To achieve relative positioning in CSS, you can utilize the position property with a value of relative and adjust the top and left properties as needed. Alternatively, you can also employ the transform property to manipulate the positions.

Here is an example:

button {
  position: relative;
  top: 50vh;
}
//Or
button {
  transform: translate(0, 50vh);
}

You have the flexibility to customize these values based on your requirements. Based on my interpretation, if you intend to maintain the current position, it is recommended to utilize absolute positioning.

For instance:

button {
  position: absolute;
  left: 50%;
  top: 90vh;
  //This will remain fixed in its position
}

Answer 4

To achieve relative positioning in CSS, you can utilize the position property with a value of relative and adjust the top and left properties as needed. Alternatively, you can also employ the transform property to manipulate the positions.

Here is an example:

button {
  position: relative;
  top: 50vh;
}
//Or
button {
  transform: translate(0, 50vh);
}

You have the flexibility to customize these values based on your requirements. Based on my interpretation, if you intend to maintain the current position, it is recommended to utilize absolute positioning.

For instance:

button {
  position: absolute;
  left: 50%;
  top: 90vh;
  //This will remain fixed in its position
}

Answer 5

Answer №3

To give your <p> a specific height, you can do the following:

.hero-text p {
    height: 20px;
}

const TextAnimator = function(txtElement, words, wait = 3000){
    this.txtElement = txtElement;
    this.words = words;
    this.txt='';
    this.wordIndex=0;
    this.wait=parseInt(wait,10);
    this.animate();
    this.isDeleting = false;
}

// Animation Method
TextAnimator.prototype.animate = function() {

    //current index of word
    const current = this.wordIndex % this.words.length;
    //get Full text
    const fullTxt = this.words[current];
    //check if currently in the deleting state
    if(this.isDeleting){
        this.txt = fullTxt.substring(0,this.txt.length -1);
    }else{
        //add a character
        this.txt = fullTxt.substring(0,this.txt.length +1);
    }

    //insert txt into element
    this.txtElement.innerHTML = `<span class="txt">${this.txt}</span>`;

    // Initial Animation Speed
    let animationSpeed = 300;

    if(this.isDeleting){
        animationSpeed /= 2;
    }

    // If word is complete then move on to next word
    if(!this.isDeleting && this.txt == fullTxt){
        //make pause at the end
        animationSpeed = this.wait;
        //set Delete to True
        this.isDeleting = true;
    } else if(this.isDeleting && this.txt == ''){
        this.isDeleting=false;
        //move to next word
        this.wordIndex ++;
        // Pause before start typing
        animationSpeed = 500;
    }
    setTimeout(() => this.animate(),animationSpeed);
}
// Initialize on DOM Load

document.addEventListener('DOMContentLoaded',initialize);

//Initialization function

function initialize(){
    const txtElement = document.querySelector('.txt-type');
    const words = JSON.parse(txtElement.getAttribute('data-words'));
    const wait = txtElement.getAttribute('data-wait');

    new TextAnimator(txtElement, words, wait);
}

.hero-text p {
    height: 20px;
}

<div class="agency-hero">
    <section class="container">
      <div class="hero-text customFadeInUp">
        <h1 class="tagLine">
          We develop innovative solutions
        </h1>
        <p><span class="txt-type " data-wait="2000" data-words='[" "," Apps "," Mobile Applications "]'></span></p>
        <a href="agency-portfolio-4.html" class="stayPut">
          View our projects
        </a>
      </div>
    </section>
  </div>

Answer 6

To give your <p> a specific height, you can do the following:

.hero-text p {
    height: 20px;
}

const TextAnimator = function(txtElement, words, wait = 3000){
    this.txtElement = txtElement;
    this.words = words;
    this.txt='';
    this.wordIndex=0;
    this.wait=parseInt(wait,10);
    this.animate();
    this.isDeleting = false;
}

// Animation Method
TextAnimator.prototype.animate = function() {

    //current index of word
    const current = this.wordIndex % this.words.length;
    //get Full text
    const fullTxt = this.words[current];
    //check if currently in the deleting state
    if(this.isDeleting){
        this.txt = fullTxt.substring(0,this.txt.length -1);
    }else{
        //add a character
        this.txt = fullTxt.substring(0,this.txt.length +1);
    }

    //insert txt into element
    this.txtElement.innerHTML = `<span class="txt">${this.txt}</span>`;

    // Initial Animation Speed
    let animationSpeed = 300;

    if(this.isDeleting){
        animationSpeed /= 2;
    }

    // If word is complete then move on to next word
    if(!this.isDeleting && this.txt == fullTxt){
        //make pause at the end
        animationSpeed = this.wait;
        //set Delete to True
        this.isDeleting = true;
    } else if(this.isDeleting && this.txt == ''){
        this.isDeleting=false;
        //move to next word
        this.wordIndex ++;
        // Pause before start typing
        animationSpeed = 500;
    }
    setTimeout(() => this.animate(),animationSpeed);
}
// Initialize on DOM Load

document.addEventListener('DOMContentLoaded',initialize);

//Initialization function

function initialize(){
    const txtElement = document.querySelector('.txt-type');
    const words = JSON.parse(txtElement.getAttribute('data-words'));
    const wait = txtElement.getAttribute('data-wait');

    new TextAnimator(txtElement, words, wait);
}

.hero-text p {
    height: 20px;
}

<div class="agency-hero">
    <section class="container">
      <div class="hero-text customFadeInUp">
        <h1 class="tagLine">
          We develop innovative solutions
        </h1>
        <p><span class="txt-type " data-wait="2000" data-words='[" "," Apps "," Mobile Applications "]'></span></p>
        <a href="agency-portfolio-4.html" class="stayPut">
          View our projects
        </a>
      </div>
    </section>
  </div>

Adjust the positioning of an HTML element in relation to another to prevent elements from moving erratically

Answer №1

Answer №2

Answer №3

Similar questions

Tips on sending a function's return value to an object in Node.js

Learn how to swap out the traditional "back to top" button with a customized image and make it slide onto or off the page instead of simply fading in and out

The EJS template in an Express.js (Node.js) application is not updating to show recent modifications

Issue occurring while trying to select an item from the dynamically generated options using AJAX

What is the best way to attach every sibling element to its adjacent sibling using jQuery?

Tips for validating Angular form group input depending on the value of another input within the form?

Avoid re-running the onScroll function until completion

submit the JSON formatted data to the server

Incorporating a background image into a mat-dialog

Creating a CSS layout that eliminates the need for a vertical scroll bar

What is the best way to align the logo image to the left side of the Material UI app bar without any gaps?

Center-aligning images in Bootstrap Carousel

React Issue: Footer not staying attached at the bottom of the page

Grab the SVG and resize it to a smaller scale

The Vue.js development server compiler is hitting a roadblock at 49% progress

Trouble with component not refreshing upon store modification in Vuex

Implementing model synchronization on server initialization with Next.js and sequelize

Uncovering Secret Information with Beautiful Soup 4

Maintaining text in a straight line

What is the best way to make a scrollable div with top and bottom padding without adding extra elements inside?