Remove From My Forums

click button turn background grey

Question
0

Sign in to vote

User536624004 posted

When the user clicks a button on the menu I want the background to turn grey until the process is done. My project is MVC 5.2.4.0, .NET Framework 4.6.2, Visual Studio 2017.

Here is the code I have, when the user clicks the button the background does NOT change color. How do I get the background to change to grey when the user clicks a button and when the process is done then it will show the next screen. Currently the Dashboard in my project takes about 5 seconds to load all data, so I want the user to know to wait until the computer is done.

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>my app</title>

@Styles.Render("~/Content/css")

@Scripts.Render("~/bundles/modernizr")

<script type="text/javascript">

$(function () {

$(".btnMenu").click(function () {

document.body.style.cursor = 'wait';

document.bgColor = "grey";

});

});

</script>

</head>

<body>
<a href="" style="float:left; margin-right:10px; padding-top:5px; padding-left:5px"><img src="~/Images/logo.png" height="50" /></a>
<div id="my-MenuBar">
My App
<br />
<nav>
<ul>
<li>
<input type="button" CssClass="btnMenu" class="btnMenu" value="Dashboard" onclick="location.href='@Url.Action("Dashboard", "Home")'" />
</li>

Sunday, June 16, 2019 7:15 PM

All replies

0

Sign in to vote
User-2054057000 posted

You can use jQuery CSS method to turn background color to grey.

$("#anyDiv").css("background-color", "Grey");
Monday, June 17, 2019 3:26 AM

User1520731567 posted

Hi LoganJH,

LoganJH
How do I get the background to change to grey when the user clicks a button and when the process is done then it will show the next screen.

According to your need,you could decorate your div with CSS,and use setTimeout function to wait for a while and then redirect to the other page;

Here is my simple demo:

<style type="text/css">

    #overlay {
        background-color: rgba(0, 0, 0, 0.8);
        z-index: 999;
        ;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        display: none;
    }
</style>

<script type="text/javascript">
    $(function () {
        $(".btnMenu").click(function () {
            $("#overlay").show();
            window.setTimeout(
                function () {
                    window.location.href = "@Url.Action("Dashboard", "Home")";
                }, 5000);
        });
    });
</script>

<div id="overlay"></div>

<input type="button" CssClass="btnMenu" class="btnMenu" value="Dashboard" />

How it works:

Best Regards.

Yuki Tao

Monday, June 17, 2019 8:00 AM

User536624004 posted

I get Error: '$' is undefined

Here is my jQuery

    <script type="text/javascript">
        $(function () {
            $(".btnMenu").click(function () {
                $("#anyDiv").css("background-color", "Grey");
            });
        });
    </script>

Monday, June 17, 2019 6:16 PM

0

Sign in to vote

User536624004 posted

Hi Yuki Tao,

Your example is set at 5 minutes. The time is different can between 2 minutes and 15 minutes. So I don't want to hard code time.

I want the background to change to grey when process is done, then my code will call the view again and the background will return to the first color, (not grey).

Monday, June 17, 2019 6:19 PM
0

Sign in to vote

User409696431 posted

Did you include the JQuery script in your page? You can't run JQuery without it.

Monday, June 17, 2019 11:59 PM
0

Sign in to vote

User409696431 posted

"I want the background to change to grey when process is done, then my code will call the view again and the background will return to the first color, (not grey)."

What process?

If the "process" is just clicking on a menu, then there is no sense in changing the background color "when the process is done" because you'll be on a new page when the process is done.

Can you be more clear about what you are trying to achieve?

Tuesday, June 18, 2019 12:03 AM
0

Sign in to vote
User1520731567 posted

Hi LoganJH,

I get Error: '$' is undefined

It means missing reference files.

try this:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

Your example is set at 5 minutes. The time is different can between 2 minutes and 15 minutes. So I don't want to hard code time.

I want the background to change to grey when process is done, then my code will call the view again and the background will return to the first color, (not grey).

The setTimeout() method calls a function or evaluates an expression after a specified number of milliseconds.

Tip: 1000 ms = 1 second.

If you want to correspond to the actual time,I suggest you could call ajax function when click button,for example,

the ajax can call a JsonResult type action(whcih return Json) and the success callback function wait for the action and then redirect the other page.

<script type="text/javascript"> $(function () { $(".btnMenu").click(function () { $("#overlay").show(); $.ajax({ url: "yourActionName/yourControllerName",//the url is the action which call for data type: 'GET', success: function (response) { window.location.href = "@Url.Action("yourActionName2", "yourControllerName2")";//the url is the action which call for redirect } }) }); }); </script>

Best Regards.

Yuki Tao
Tuesday, June 18, 2019 7:20 AM

Asked by:

click button turn background grey

Question

All replies

LoganJH