How to Block UI when update using jquery .

                 How to Block UI when update using jquery .

Simple two step to block UI on page when the updation is working .

1- Use this  jquery.blockUI.js , you have to download and use this .

2-Use this jquery function on the master page or page . 

    <script type="text/javascript">

        $(document).ready(function() {

            Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(onRequestStart)

            Sys.WebForms.PageRequestManager.getInstance().add_endRequest(onRequestEnd)

        });

        function onRequestStart() {

            $.blockUI();

        }

        function onRequestEnd() {

            $.unblockUI();

        }

        function EndRequestHandlerForUpdatePanel(sender, args) {

            if (args.get_error() != undefined) {

                var msg = args.get_error().message.replace("Sys.WebForms.PageRequestManagerServerErrorException: ", "");

                alert(msg);

                args.set_errorHandled(true);

            }

        }

</script>

Blink button text using jquery .

               Blink button text using jquery .

<div>
<a href="#" class="btn"><span class="blink">Blink this</span></a>
    <div>

div { padding: 20px; }
.btn {
    background:#a00;
    color:#fff;
    border: 1px solid #900;
    padding: 4px 8px;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    margin: 20px;
    text-transform: uppercase;
    text-decoration: none;
    font: bold 16px Verdana, sans-serif;
    text-shadow: 0 0 1px #000;
    box-shadow: 0 2px 2px #aaa;
    -moz-box-shadow: 0 2px 2px #aaa;
    -webkit-box-shadow: 0 2px 2px #aaa;}


var timer;
jQuery(function($) {
    timer = setTimeout(blnk, 0);
});


function blnk() {
    $(".blink").css({opacity: 0}).
        animate({opacity: 1}, 500, "linear").
        animate({opacity: 0}, 300, "linear",
        function() {
            timer = setTimeout(blnk, 0);
        });
}

Side menu pop up using css

                         Side menu pop up using css

<div id="left-panel">
<div>
<asp:imagebutton height="80px" id="imgBtnSave" imageurl="~/Images/Icons/Save.png" onclick="imgBtnSave_Click" runat="server" tooltip="Save" width="80px">
            </asp:imagebutton></div>
<div>
<asp:imagebutton height="80px" id="ImageButton1" imageurl="~/Images/Icons/email.png" runat="server" tooltip="Email" width="80px">
            </asp:imagebutton></div>
<div>
<asp:imagebutton height="80px" id="ImageButton2" imageurl="~/Images/Icons/print.png" runat="server" tooltip="Print" width="80px">
           </asp:imagebutton></div>
</div>

<style type="text/css">
        #left-panel
        {
            width: 117px;
            height: 275px;
            border: 5px solid #555;
            background-color: #fff;
            position: fixed;
            top: 150px;
            left: -50px;
            border-radius: 0 1em 1em 0;
            padding: 5px;
            -webkit-transition: all 0.5s ease-in-out;
            z-index: 10000;
        }
        #left-panel:hover
        {
            left: -10px;
        }
        #left-panel.show
        {
            left: -5px;
        }
        #left-panel a.controller
        {
            position: absolute;
            right: 5px;
            top: 5px;
            text-decoration: none;
            -webkit-transition: all 0.5s ease-in-out;
            color: black;
            font-weight: bold;
        }
        #left-panel.show a.controller
        {
            -webkit-transform: rotate(180deg);
        }
    </style>