Home c# mvc html textboxfor how to blink the textbox with a background color for a second
Reply: 1

c# mvc html textboxfor how to blink the textbox with a background color for a second

Mukil Deepthi
1#
Mukil Deepthi Published in 2018-02-08 14:23:36Z

I am using MVC and i have the following in my razor view.

@Html.TextBoxFor(x => model.DateTimeStamp, new { @readonly = "readonly", @class=ViewBag.IsLatest ? "latest":""})

I would like to display the background color of this textbox yellow for a second or so. something like transition. I am not good in css . so need some help.

Thanks

Ashley Medway
2#
Ashley Medway Reply to 2018-02-08 14:58:34Z

You will need to do this on the client side, here is an example using CSS3 and jQuery.

jQuery(function () {
  jQuery("#blinkBtn").click(function () {
    jQuery("#DateTimeStamp").addClass("MakeYellow");
    setTimeout(function () {
      jQuery("#DateTimeStamp").removeClass("MakeYellow");
    }, 500);
  });
});
#DateTimeStamp {
  background-color: grey;
  transition: background-color 0.5s;
}

#DateTimeStamp.MakeYellow {
  background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" id="DateTimeStamp" />

<button id="blinkBtn">Blink</button>

To have it conditional you might do something like this in razor. It's not really the nicest implementation but its hard to provide much else without context.

@if(ViewBag.MyCondition) {
    <script type="text/javascript">
    jQuery(function () {
        jQuery("#DateTimeStamp").focus();
        jQuery("#DateTimeStamp").addClass("MakeYellow");
        setTimeout(function () {
          jQuery("#DateTimeStamp").removeClass("MakeYellow");
        }, 500);
    });
    </script>
}
You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.349373 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO