Can the start and stop times of the typed.js plugin be controlled for typing text?

The typed.js jQuery plugin creates the illusion of text being automatically typed on screen by a robot. Despite researching the resources related to this plugin, I have not come across any information on how to control the starting and stopping of the typing process.

My objective is to display four different series of texts that can be brought forth by clicking corresponding buttons. These texts would all occupy the same space within the same div element. For instance, clicking "Button A" would initiate the typing of "Text A," while clicking "Button B" midway through another typing session would halt the current text and start typing "Text B."

In order to achieve this functionality, it is crucial for me to have the capability to govern when typed.js starts and halts its typing operations. Is there a way to accomplish this?

javascriptjqueryhtmlcssautomation

Answer №1

Check out this code snippet that demonstrates how to trigger typed.js by clicking a button and customize it to suit your needs.

Javascript:

$(function() {
    var options = {
      strings: ["First example sentence.", "Second example sentence."],
      typeSpeed: 0
    }
    $("button").click(function() {
      $(".element").typed(options);
    });
});

HTML:

<span class="element"></span><br />
<button>Type!</button>

Link to JSFiddle demo: http://jsfiddle.net/mattboldt/tcRUG/

Reference: Documentation on the GitHub Wiki for typed.js project

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

Using Jquery ajax with Rails 3 to load dynamic content

Looking to level up my skills with ajax as a beginner. My current project involves a slider and a content div, where the slider has links to various sections like events, news, etc. I want to implement ajax loading for the content div, similar to how it wo ...

jqueryruby-on-railsajaxruby-on-rails-3

Update the division by clicking the button with a randomly generated JavaScript string element

Trying to solve a unique problem here as none of the proposed solutions on similar questions have worked for me. Apologies if I'm missing something, I'm new at this. The issue is with loading an empty div on my page using javascript and strings ...

javascriptjqueryhtmlajax

Enhance the responsiveness of a ReactJS landing page

We have developed a large React application without relying on any existing UI framework. All of our UI components have been custom-built. Now, we are looking to make the landing page section responsive within the application, which will require the imple ...

htmlcssreactjstailwind-css

Adding properties with strings as identifiers to classes in TypeScript: A step-by-step guide

I am working with a list of string values that represent the identifiers of fields I need to add to a class. For instance: Consider the following string array: let stringArr = ['player1score', 'player2score', 'player3score' ...

javascripttypescriptvue.js

Understanding the concept of mutable properties in Typescript

Why can the property 'name' in the class 'PersonImpl' be reassigned even though it is not declared as read-only in the Person interface? interface Person { readonly name: string; } interface Greeting extends Person { greet( ...

javascripttypescriptinterfacereadonly

How can I retrieve the HTML content as well as the text from a textarea element using jQuery?

Can someone assist me with a cross-browser solution using jQuery to return the HTML tag as well as the text inside when working with a textarea element? var elemField = $('<textarea></textarea>'); elemField.val('bla bla this is ...

jquery

Unable to properly test the functionality of the material-ui select component due to an error being thrown stating that the function is not being called

I've been utilizing the material-ui select component in my project and am currently writing tests for it. However, I've encountered an issue regarding testing the onChange event of the component. Here's a snippet of the code for my component ...

javascriptreactjsjestjsmaterial-uienzyme

Open HTML Frameset in a new tab or window

I've been contemplating for the past week on how to address my issue using frameset. Situation: I have an html file for header, footer, menu, and content, each with its own background color. I implemented a frameset for enhanced design. The header ...

htmlcssframeset

What occurs when socket.io events are not properly handled?

Is socket.io ignoring or dropping messages? I am asking this because there is a client with multiple states, each having its own set of socket handlers. The server notifies the client of a state change and then sends messages specific to that state. Howeve ...

javascriptnode.jssocket.io-1.0

dojo combobox with data loaded dynamically from JSON

I am facing an issue with populating a Combobox dynamically using a jsonRest from a cross-origin request. While I have managed to do it statically (if that's the correct term), I am struggling to implement it for multiple cases. This is just a small ...

javascriptjsoncomboboxdojo

Equalizing the width of the border to match the width of the text

After designing a menu using a website builder with custom CSS, I found that the HTML code generated automatically by the builder needed some tweaking. Upon inspecting the code, I discovered the following structure: <div class="elementor-container elem ...

jqueryhtmlcss

Utilizing HTML and Javascript for streaming audio and recording voice

Working on a new project that involves streaming audio files (mp3) and recording voice messages. Initially considered using Flash, but the challenge is making the website iPhone-friendly as per the client's request. Is there a technology available th ...

javascripthtmliosaudio-recordingplayback

Submit a form using jQuery when it is being loaded via AJAX using jQuery

Looking for help with posting a form using jQuery.post: Here is the JavaScript function I am using: function post_ajax_form2(url,formId,message){ bsendMessage = 0; if (typeof message !== 'undefined') { bsendMessage = 1;} var data = ...

jqueryajaxpost

Can config values be dynamically set from an Excel file in Protractor?

I am currently working on parameterizing capabilities using an Excel sheet. For this task, I am utilizing the npm exceljs package for both reading and writing data. Below is a snippet of the code that demonstrates how I am trying to achieve this: //This f ...

javascriptangularjsnpmautomationprotractor

Troubleshooting encoding problems with Google Cloud's Speech-to-Text API using Node.js

I'm currently working on a project that involves capturing audio from a user's microphone and sending it to a server for translation using Google's Speech-to-Text API. I am utilizing navigator.mediaDevices.getUserMedia() to access the audio, ...

javascriptnode.jsencodinggoogle-text-to-speech

What led to the decision for the two distinct chart elements to merge into a single container?

In the process of creating a dashboard using React.js and d3.js, I encountered an interesting issue that perplexed me for quite some time. Below is the Scatterplot.js code written in d3.js: import React, { Component } from "react" import * as d3 from "d3 ...

javascriptreactjsd3.js

5 Ways to Incorporate Font Awesome Icons into CSS Pseudo Elements

I'm attempting to incorporate FontAwesome icons into CSS pseudo elements. When I add the icon using HTML in the traditional manner, it works fine. However, I'm trying to integrate the fonts into a bootstrap accordion so that the icon changes whe ...

cssfont-awesomepseudo-element

I keep encountering an error stating that parameter 1 for 'FormData' is not of type 'HTMLFormElement'. I am struggling to resolve this issue on my own. Can someone please assist me with fixing this problem?

Here is the snippet of code that I am struggling with: const authForm = useRef(); const handleSubmit = (e) => { e.preventDefault(); //formData let form = new FormData(authForm.current); console.log(form) } This code snippet shows how I added a ...

javascripthtmlreactjsjsx

How can text be extracted from BeautifulSoup without displaying the opening tag and before the <br> tag?

I have recently started learning Python and Beautiful Soup, and I've spent a significant amount of time trying to solve this particular issue. I am looking to extract three specific text elements from a <div> that does not have a class attribu ...

pythonhtmlparsingbeautifulsouphtml-parsing

Personalize the drop area in Filepond

Is there a way to customize the filepond droparea by adding custom HTML with placeholder images to guide users on what kind of images should be uploaded and allow multiple uploads? https://i.sstatic.net/VFGfJ.png I attempted to add placeholders in an abs ...

javascripthtmlcssfilepond