Blazing a trail: Making a cursor blink in Blazor

//Is there a way to make the cursor blink using a timer in this scenario? I've noticed that the CursorCssClass is changing in debug mode, but the cursor itself doesn't blink in the browser.

<section id="hero" class="d-flex flex-column justify-content-center align-items-center">
    <div class="hero-container">
        <h1>test test</h1>
        <p>I'm tester <span style="@CursorCssClass">|</span></p>
    </div>
</section>
@code {

    private bool hideCursor = true;
    private System.Timers.Timer aTimer;
    private string CursorCssClass => hideCursor ? "opacity: 0" : "opacity: 1";

    private void ToggleCursor()
    {
        aTimer = new System.Timers.Timer();
        aTimer.Interval = 1000;
        aTimer.Elapsed += OnTimedEvent;
        aTimer.AutoReset = true;
        aTimer.Enabled = true;
    }
    private void OnTimedEvent(Object source, System.Timers.ElapsedEventArgs e)
    {
        hideCursor = !hideCursor;
    }
    protected override Task OnInitializedAsync()
    {
      ToggleCursor();
        return base.OnInitializedAsync();
    }
}

Answer №1

An external event like a Timer in Blazor requires you to manually invoke StateHasChanged to update the UI:

private void OnTimedEvent(Object source, System.Timers.ElapsedEventArgs e)
{
    hideCursor = !hideCursor;
    InvokeAsync(StateHasChanged);
}

Additionally, make sure to dispose of the Timer properly.

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

Checkbox loses its check mark when window is resized

My solution for toggling the sidebar visibility on mobile and tablet devices using CSS3 checkboxes is working perfectly. However, I encountered an issue where resizing the browser window causes the sidebar to become unchecked, resulting in the navigation b ...

Images appearing blank in Android webview due to CSS background loading issue

Hello everyone! I'm having an issue with loading a web url where everything is working fine except for loading background images. I came across this page: android css background-image not found But my question is slightly different. I don't wa ...

How can I create a more spacious and stylish JTextField for my address bar?

I am working on developing my Java skills by creating a custom browser. Is there a way to adjust the size and shape of the address bar, which is currently implemented as a JTextField with Swing's default settings? Here is the code snippet I am using: ...

Utilizing label text within a LINQ 'where' clause parameter

After following the recommended steps, I am still facing an issue where I am unable to get the value of the selected item in the dropdown to populate the textbox. It seems that the JavaScript code is not triggering. What could be causing this problem? Bel ...

What is the reason for the error message saying "The prefix 'h' for the element 'h:head' is not bound"?

Below is the xhtml code I have created: <html> <h:head> <meta http-equiv="Content-Type" content="text/html; charset=Cp1252"/> </h:head> <h:body> <view> <h:form> <br/> ...

Methods for inserting text into a WebBrowser Document without retrieving any Attributes in vb.net

Is it possible to retrieve text from a WebBrowser Document in vb.net without retrieving any attributes?! For example: <h1>text here</h1> Or: <h1 name="anything">text here</h1> How can I extract the "text here" within the <h1 ...

Ensure that the content fills the entire height of the container and include a scrollbar

I'm currently utilizing CKEditor () and have developed my own customized file browser. The issue I'm encountering is that when the filebrowser is opened, it appears in a new popup window without scrollbars. I reached out for support through a ti ...

Tips for emphasizing a specific cell in a row based on its expiration date

In my quest to find a script that colors dates within two weeks from today in red and past dates in orange, I have tried various methods without success. I am struggling to implement this feature with my current knowledge. <TABLE> <TR><TD&g ...

What is the best way to create this specific XML format using the XmlWriter class in C#?

I need assistance generating an XML file with a specific format using the XmlWriter class in C#: <?xml version="1.0" ?> <root> <data> <entry Attrib1="" Attrib2="91.3467" Attrib3="95.3052" Attrib4="6.4722" /> <entry Attrib1= ...

What is the proper way to format lengthy lines in Twig templates while adhering to coding standards?

In my templates, I have the following code snippet for generating routes with parameters: <a class="btn btn-block btn-abcd" href="{{ path( 'auth.login', { 'type': constant('User::TYPE_CANDIDATE'), & ...

Is there a way to apply a consistent style to all the fields of an object at once?

I have a formatting object named typography that includes various styles. One common issue I've encountered is that the line-height property is consistently set to 135%. Anticipating that this might change in the future, I am looking for a way to cent ...

Alter the navigation background when moving between sections on a one-page website

I need to ensure that the background of the navigation remains transparent on the "home" section. However, when switching to other sections, the background color of the navigation becomes permanently black. <header class="clearfix"> <nav> ...

What is the best way to align headings directly above their own bottom border?

Is there a way to make a heading align perfectly with its bottom border? Can negative padding achieve this effect, or should I use underline instead? Perhaps positioning it at the top border of the element below is an option. Thank you! h1 { font: bol ...

What is the best way to dynamically change the JSON-LD Script for the Schema?

Below is the script in question. Please read through it carefully. <script type="application/ld+json"> { "@context": "http://schema.org/", "@type": "Product", "name": "Bat, &q ...

Creating a Search Functionality within a Tab Component in Ionic

I'm currently facing an issue with adding a search bar under the "Search" tab in my project. I've tried implementing similar logic to what's shown here, but it doesn't seem to function properly when using the ionic serve --lab live in-b ...

Looking for advice on designing a unique Gallery layout using CSS?

Tasked with converting various layouts, some of which utilize a specific layout pattern (refer to the image below.) I'm seeking advice on the most efficient way to use CSS to display a list of images in this manner without dividing items into separate ...

Revamp the angular design of the mat-tree UI bottom border line issue

Can you help me with changing the direction of the mat tree from right to left? I need to remove the bottom border, please refer to the image https://i.sstatic.net/ecRIO.png here ...

Adjusting image sizes in WordPress using CSS and HTML

I am currently working on a blog using the Marlene theme on Wordpress. For my posts, the default image resolution is 835x577, which suits my needs perfectly (see example post). However, I also have a "News" page where I want to display a list of all news ...

Steps for incorporating a variable into a hyperlink

I'm trying to achieve something similar to this: var myname = req.session.name; <------- dynamic <a href="/upload?name=" + myname class="btn btn-info btn-md"> However, I am facing issues with making it work. How can I properly ...

Struggling with IE7 compatibility issues regarding tables inside a div? Seeking a reliable resource to gain insights and strategies for effectively resolving IE7 problems

I am currently in the process of revamping this website: but I am facing a challenge with repeating a gradient within a div (cnews). The problem arises when the gradient is repeated on IE7, as it distorts the color. It appears as though the blue in the im ...