asked on

My .gif won't show, why?

I'm wanting to show a .gif while some processing goes on in the background, but I'm not able to get it to show, not even sure if it will 'animate', but I'm gonna hope for the best, once I can get it to show.

In my master page I have this:

    <style type="text/css">
        .lnkBtnTFBlue {
            display: none;
        }

        .LockOff {
            display: none;
            visibility: hidden;
        }

        .LockOn {
            font: arial;
            font-size: xx-large;
            font-weight: bolder;
            display: block;
            visibility: visible;
            position: absolute;
            z-index: 50000;
            top: 0px;
            left: 0px;
            width: 105%;
            height: 105%;
            background-color: #CCC;
            text-align: center;
            padding-top: 20%;
            filter: alpha(opacity=75);
            opacity: 1.5;
        }
    </style>

    <script type="text/javascript">
        $(document).ready(function (jQuery) {
            function LockScreen(str) {
                var lock = document.getElementById('LockPane');
                if (lock)
                    lock.className = 'LockOn';

                if (str != '') {
                    lock.innerHTML = str;
                }
            }
        });
</script>
.
.
.
    </form>
    <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="js/response.min.js"></script>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
    <script type="text/javascript" src="js/global.js"></script>
</body>
</html>

Open in new window

in my child page I have this:

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
    <script src="js/maskedinput.js"></script>
    <script src="js/jquery.maskMoney.min.js"></script>
    <script src="js/jquery-ui-1.11.3.js"></script>
    <script src="js/jquery-1.11.2.min.js"></script>
.
.
.
    <div class="row">
        <div class="col-xs-12 center">
            <asp:Button runat="server" CssClass="btn center-block hidden-print" BackColor="Red"
                ForeColor="White" ID="btnSave" Text="SAVE" OnClick="btnSave_Click"
                OnClientClick="var b = confirm('GENERATING REPO DOCUMENTS!! THIS WILL TAKE A COUPLE OF MINUTES. YOU WILL BE REDIRECTED WHEN THIS PROCESS FINISHES.'); if (b) LockScreen('GENERATING REPO DOCUMENTS...');"></asp:Button>
        </div>
    </div>
    <div id="LockPane" class="LockOff" runat="server">
        <img src="Images/Loader.gif" alt="Generating documents ......" />
    </div>
</asp:Content>

Open in new window

The .gif does exist in the Images folders. It does freeze the window/screen (except for the vertical scroll bar on the right), but the .gif doesn't show. What am I missing/doing wrong? Or are there other examples of how to make a .gif function properly? If so can you provide code and or links?

HainKurt

have a look at this demo

https://jsfiddle.net/HainKurt/h0nyp0tg/

is this what you are trying to do?

just used

  var str = "loading...";

  function LockScreen(str) {
    $("#LockPane").addClass("LockOn").append("<div>" + str + "</div>")
  }
  LockScreen(str);

Open in new window

maybe your issue was this:

lock.innerHTML = str;

Open in new window

you get rid of all elements and just replace content with that text!

Michael Sterling

ASKER

Hain

I was able to use the Chrome browser tools to step through the function. The problem seems to be that it is not grabbing/identifying my control. I tried three different ways to identify the control and none of them worked. When I tried your code it told me that the str variable was undefined as well as it also couldn't find my control. Help?

Michael Sterling

ASKER

Hain

Here is a better pic of the last image.

Michael Sterling

ASKER

Hain

I forgot to mention that the function was found to be undefined whenever I put it inside the document ready block:

    <script type="text/javascript">
        //debugger
        //PHONE INPUT MASK
        $(document).ready(function (jQuery) {
            $(".inputField").bind('keyup', function (e) {
                if (e.which >= 97 && e.which <= 122) {
                    var newKey = e.which - 32;
                    e.keyCode = newKey;
                    e.charCode = newKey;
                }

                $(this).val(($(this).val()).toUpperCase());
            });

            function LockScreen(str) {
                $("#LockPane").addClass("LockOn").append("<div>" + str + "</div>")
                var lock = document.getElementById('LockPane');
            }
            LockScreen(str);

        });

        //function LockScreen(str) {
        //    var lock = document.getElementById("[id$='LockPane']");
        //    if (lock)
        //        lock.className = 'LockOn';

        //    if (str != '') {
        //        lock.innerHTML = str;
        //    }
        //}

    </script>

Open in new window

HainKurt

move this

            function LockScreen(str) {
                $("#LockPane").addClass("LockOn").append("<div>" + str + "</div>")
                var lock = document.getElementById('LockPane');
            }

Open in new window

to line 3/4, before jquery dom function

ASKER CERTIFIED SOLUTION

HainKurt

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Michael Sterling

ASKER

Thanks for your help.