Text is misaligned with the cursor position

I've created an HTML file and implemented a typewriter-like animation using typed.js.

Here's the code snippet:

var typed = new Typed('#typed', {
            stringsElement: '#typed-strings',
            smartBackspace:true,
            typeSpeed:100,
            backSpeed:80,
            startDelay:20,
            backDelay:20,
            loop:true,
            showCursor: true,
            cursorChar: '|',
            autoInsertCss: true
        });
.center {
    position: relative ;
    top:  50%;
    left: 50%;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 48px;
}

.typed-cursor {
    display: inline;
    font-size: 48px;
    opacity: 1;
    animation: blink .7s infinite;
}

@keyframes blink {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.6/typed.js"></script>
<div id="typed-strings">
                <p>Myself Big Bounty</p>
                <p>I'm a coder</p>
                <p>I'm ML enthusiast</p>
 </div>
 <span id="typed" class="center"></span>

Why is the cursor moving away from the text? How can I align the cursor properly with the text?

javascriptjqueryhtmlcsstyped.js

Answer №1

You could try enclosing the "typed" span within a "centered" div. Here's an example:

var typed = new Typed('#typed', {
            stringsElement: '#typed-strings',
            smartBackspace:true,
            typeSpeed:100,
            backSpeed:80,
            startDelay:20,
            backDelay:20,
            loop:true,
            showCursor: true,
            cursorChar: '|',
            autoInsertCss: true
        });
.center {
    position: relative ;
    top:  50%;
    left: 50%;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 48px;
    /* color: #ffffff; */
  }
  
  .typed-cursor {
    display: inline;
    font-size: 48px;
    opacity: 1;
    animation: blink .7s infinite;
}

@keyframes blink {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.6/typed.js"></script>
<div id="typed-strings">
                <p>Myself Big Bounty</p>
                <p>I'm a coder</p>
                <p>I'm ML enthusiast</p>
 </div>
 <div class="center">
    <span id="typed"></span>
 </div>

Answer №2

To resolve the issue, simply wrap the span element with a div that has the class .center. Instead of using top and left, which are causing problems, you can replace them with text-align: center.

.center {
    position: relative ;
    text-align: center;
    /* Remove top and left */
    /*top:  50%;*/
    /*left: 50%;*/
    font-family: Arial, Helvetica, sans-serif;
    font-size: 48px;
    /* color: #ffffff; */
  }


var typed = new Typed('#typed', {
            stringsElement: '#typed-strings',
            smartBackspace:true,
            typeSpeed:100,
            backSpeed:80,
            startDelay:20,
            backDelay:20,
            loop:true,
            showCursor: true,
            cursorChar: '|',
            autoInsertCss: true
        });
.center {
    position: relative ;
    text-align: center;
    /*top:  50%;*/
    /*left: 50%;*/
    font-family: Arial, Helvetica, sans-serif;
    font-size: 48px;
    /* color: #ffffff; */
  }
  
  .typed-cursor {
    display: inline;
    font-size: 48px;
    opacity: 1;
    animation: blink .7s infinite;
}

@keyframes blink {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.6/typed.js"></script>
<div id="typed-strings">
    <p>Myself Big Bounty</p>
    <p>I'm a coder</p>
    <p>I'm ML enthusiast</p>
</div>
<div class="center">
    <span id="typed"></span>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

JQuery's onclick function is not functioning properly in Firefox browser

<script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script> method: $("#logon").click(function onAction(x){ method: <input type="button" value="LogOn" o ...

jqueryjsp

Tips for using the window.print() function to display and print another php or html page

<script type="text/javascript> window.print('page.php'); //Can you help me understand how to use window.print() function to print another php or html page? ...

phphtmlcss

Is it feasible to restrict access to specific fields of an object in the Firebase database for viewing purposes using Firebase permissions?

Consider this JSON structure representing a Firebase DB: { "users": { "user0": { "name": "Mike", "age": 20, "relationship": "married", "friends": [...] }, "user1": { " ...

javascriptjsonfirebasefirebase-realtime-databasefirebase-security

What is the best way to apply a CSS class to newly added records within an HTML table that are being fetched from a MySQL database?

The title does not provide clear instructions. If more details are needed, the code below displays data from a MySQL database table on an HTML page: <?php $db_host = 'localhost'; $db_name = 'DB'; ...

phphtmlmysql

The children component is not recognizing the function being passed through this.props.children, resulting in an

Looking for a solution that involves passing a function to this.props.children? Check out the code snippet below: updateBarTitle(barTItle){ this.setState({barTItle}); } render(){ const children = React.Children.map(this.props.children, function (chi ...

javascriptreactjs

Tips for including HTML tags in strings without causing issues with nested tags

I am struggling with a string that contains both text and HTML tags, specifically <a href=""></a> tags. My goal is to apply the "i" tag around the text outside of the "a" tags without creating nested tags like: <i><a href=""></a ...

pythonhtmlregex

The MVC JQuery Ajax request is not yielding any results, yet there is no error message being returned

Below is my front end request let endpoint = "@Url.Action("Testerosa", "Attendance")"; $.get(endpoint, function(response) { debugger; alert(response); }).fail(function (error) { alert(error); }); This is th ...

jqueryasp.net-mvcjson

Utilizing Jquery Ajax for Validating Asp.Net Web Forms

Looking for the top-rated tutorial on implementing ASP.NET web form validation with jQuery (Ajax) without using a plugin. The goal is to create an Ajax form using jQuery. I have a registration form and upon submission, I aim to trigger an ASP.NET validati ...

jqueryasp.netajax

Guide to linking two input fields using a single datepicker

To achieve the goal of filling two input fields simultaneously, take a look at the following code snippet: <mat-form-field> <input matInput [matDatepicker]="startDate" formControlName="SaleDate" /> ...

htmlangulardatepicker

combining the name of an array with a numeric value

I have several arrays, named array_1, array_2 through array_5. Based on a specific level, I aim to utilize an array. For instance, when level = 1, I want to use array_1. Attempting myArr = array_ + level results in myArr not being recognized as an array ( ...

jqueryarrays

keep jquery scrolltop position consistent after receiving response

I created a code to show the chat history, and everything seems to be working fine. However, I encountered an issue where old posts are displayed all at once when scrolling up the div. In order to continue scrolling smoothly, I included this code $("#messa ...

javascriptjqueryajax

Utilize jQuery to compare JavaScript files between the cache and the application

When making changes to my JS files in the application, I find myself constantly having to clear my browser's cache to see those changes. To avoid this inconvenience, I tried using the following: <script type="text/javascript" src="js/main.js?cache ...

javascriptjquerycachingbrowser-cache

The Challenge of Knockout Observable and Auto-Fill in Google Chrome

Essentially, I encountered an issue with a login button on a form that functions properly with jQuery 1.8.3 and Knockout 2.2.1 observables. There is a binding in place to enable/disable the login button based on the presence of a username and password. Th ...

jquerygoogle-chromeknockout.js

When there are more than two divs on the page, they tend to overflow beyond the boundaries of

I am managing a platform where users have the ability to share text-based posts, and other users can engage with those posts through comments. An issue I have encountered is that once more than two comments are posted on a parent post, they start to overfl ...

htmlcss

Is it possible to implement aJax in the default_popup of a browser extension?

Is it possible for me to utilize Ajax within the "default_popup" of my Google Chrome Extension? I have experimented with the following... manifest.json: { "name": "My extension", "manifest_version": 2, "version": "1.0", "permissions": [ "tab ...

ajaxgoogle-chromejquerygoogle-chrome-extension

Is it possible to execute a script from a different directory?

Currently, I am developing a nodejs package that involves executing a bash script within the program. The specific bash script, "./helpers/script.sh", needs to be run using a relative path. This means that when users install and run the package, the script ...

javascriptnode.jstypescriptnpm

The D3js visualization is failing to display properly for the user, with the D3 source code residing on the server

I have encountered an issue after transferring my D3js chart generation system from a development server with no problems to a live Windows 2008 r2 server. On the live server, only the background SVG element is displayed and none of the other elements like ...

javascriptjsond3.jswindows-server-2008

How can I incorporate the "onClick()" function within an ajax call, while still utilizing the data returned in the success message?

After successfully making an Ajax call, I would like to implement an on-click function while still utilizing the original data retrieved. $.ajax({ URL: ......, type: 'GET', success: function (res) { var Ob ...

javascriptjqueryhtmlajaxweb

Prevent Second Division from wrapping around floated Division

I am running into a minor issue with the positioning of a div in my current project. +------------------------+ |+-------+ ~~~~ TITLE| <--how can I prevent text from wrapping around || | ~~~~~~~~~~~~~ |\ on the left ...

htmlcss

Receiving an array via a jQuery AJAX request is not functioning as expected

Here is the code snippet I am working with: var data = $(this).sortable('serialize'); $.ajax({ data: {order: data, actionFor: 'main_articles'}, type: 'POST', url: &a ...

phpjqueryajax