Blinking Text If checkbox is checked to true

66
January 24, 2021, at 06:40 AM

I am trying to create when user check checkbox to yes(true) in Index Page Emergency column needs to flash text something like Emergency But unfortunately I try couple of methods but unsuccessfully. Here is so far what I did

@if (Model.Count() > 0)
    {
        <table class="table table-bordered table-striped" style="width:100%">
            <thead>
                <tr>
                    <th>
                        Doctor Full Name - CODE
                    </th>
                    <th>
                        Patient Full Name
                    </th>
                    <th>
                        Date and Time
                    </th>
                    <th>
                        Emergency
                    </th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                @foreach (var obj in Model)
                {
                    <tr>
                        <td width="25%">@obj.Doctor.Firstname @obj.Doctor.Lastname @obj.Doctor.Code</td>
                        <td width="25%">@obj.Patient.FirstName @obj.Patient.LastName</td>
                        <td width="25%">@obj.DateAndTime</td>
                        @if(obj.Emergency == true)
                        {
                            <span class="blink_me">Emergency</span>
                        }

                        <td class="text-center">
                            <div class="w-75 btn-group" role="group">
                                <a asp-route-Id="@obj.Id" asp-action="Upsert" class="btn btn-primary mx-2">
                                    <i class="fas fa-edit"></i>
                                </a>
                                <a asp-route-Id="@obj.Id" asp-action="Delete" class="btn btn-danger mx-2">
                                    <i class="far fa-trash-alt"></i>
                                </a>
                            </div>
                        </td>
                    </tr>
                }
            </tbody>
        </table>
    }
    else
    {
        <p> No Admission Patient exists.</p>
    }

@section Scripts{
    <script>
        (function blink() {
            $('.blink_me').fadeOut(500).fadeIn(500, blink);
        })();
    </script>
}

I am posting image here to see what happened and example of what I am looking for

DEMO

Any idea what I made wrong?

Answer 1

use this css:

.elementToFadeInAndOut {
    width:200px;
    height: 200px;
    background: red;
    -webkit-animation: fadeinout 4s linear forwards;
    animation: fadeinout 4s linear forwards;
}
@-webkit-keyframes fadeinout {
  0%,100% { opacity: 0; }
  50% { opacity: 1; }
}
@keyframes fadeinout {
  0%,100% { opacity: 0; }
  50% { opacity: 1; }
}

and html:

<tbody>
                @foreach (var obj in Model)
                {
                    string fadinOutClass = "";
                    <tr>
                        <td width="25%">@obj.Doctor.Firstname @obj.Doctor.Lastname @obj.Doctor.Code</td>
                        <td width="25%">@obj.Patient.FirstName @obj.Patient.LastName</td>
                        <td width="25%">@obj.DateAndTime</td>
                        @if(obj.Emergency == true)
                        {
                            fadinOutClass="elementToFadeInAndOut";
                        }

                        <td class="text-center">
                            <div class="w-75 btn-group" role="group">
                                <a asp-route-Id="@obj.Id" asp-action="Upsert" class="btn btn-primary mx-2 @fadinOutClass">
                                    <i class="fas fa-edit"></i>
                                </a>
                                <a asp-route-Id="@obj.Id" asp-action="Delete" class="btn btn-danger mx-2 @fadinOutClass">
                                    <i class="far fa-trash-alt"></i>
                                </a>
                            </div>
                        </td>
                    </tr>
                }
            </tbody>

What do you want Flash to do? According to the code I gave you, the buttons flash

READ ALSO
how to make a mysql query and turn it into an array in php

how to make a mysql query and turn it into an array in php

if I have a query that looks like this in php

56
MacOS Big Sur 11.1 can&#39;t launch eclipse installer

MacOS Big Sur 11.1 can't launch eclipse installer

I updated my MacOS to Big Sur 111 and I tried to download Eclipse IDE for Java Developers, and when I try to run the Eclipse Installer, it keep spinning at the Mac dock and nothing happens at all

110
InteractiveViewer image is zoomed in

InteractiveViewer image is zoomed in

My problem should be simple, but i'm stuck: i need to display the image of a map with a marker over it (that's why i'm using a stack) and this image can be zoomed and pannedThe only problem is, when i open the app the image is totally zoomed in, and i have to zoom out manually

79
Accept credit card and debit card payment using paypal in nodejs rest api

Accept credit card and debit card payment using paypal in nodejs rest api

I have used paypal-rest-sdk in my code the payment using paypal login working smoothly but now I want to pay using credit card and debit card without login to paypal

84