Ajax progress at mouse pointer with the help of CSS and JavaScript

There are many situations when we need our progress icon at mouse pointer, if page is quite big then we can not show the progress icon either on top or at bottom, in that case if user is doing something in middle of the page then he can not see the progress or wait icon.

Suppose we have a grid which shows 100 records per page with some edit functionality, it is useless to show the progress icon on top or bottom, there are many such cases in which we need the progress icon on mouse pointer.

you can add a Div either in master page or at page like this

<div onmousemove="SetProgressPosition(event)">
   <!--  all you code should be between these opening and closing Div. -->
</div>

Put your update progress anywhere on the page becuase it will be displayed at your mouse pointer so never matter where you are potting it on the page

<asp:UpdateProgress ID="uprogPage" runat="server">
 <ProgressTemplate>
   <div id="dvProg" class="overlay">
     <img id="carimage" src="/Images/Wait.gif" alt=""style="vertical-align:middle" /> 
       Please Wait...
   </div>
 </ProgressTemplate>
</asp:UpdateProgress>

Id of Div dvProg is very important to be the same becuase we will use it in JavaScript to positiong the progress icon at mouse pointer.

Here is the CSS

.overlay{
       border: 1px solid #FFBE9F;
       padding: 5px;
       z-index: 1000;
       width: 100px;
       position: absolute;
       background-color: #fff;
       -moz-opacity: 0.75;
       opacity: 0.75;
       filter: alpha(opacity=75);
       font-family: Tahoma;
       font-size: 11px;
       font-weight: bold;
       text-align: center;
}

You can use your own CSS but I use this to give a nice look.

Now we need the JavaScript to position the icon at cursor postion

function SetProgressPosition(e) {
    var posx = 0;
    var posy = 0;
    if (!e) var e = window.event;
    if (e.pageX || e.pageY) {
        posx = e.pageX;
        posy = e.pageY;
    }
    else if (e.clientX || e.clientY) {
        posx = e.clientX + document.documentElement.scrollLeft;
        posy = e.clientY + document.documentElement.scrollTop;
    }
    document.getElementById('dvProg').style.left = posx + 20 + "px";
    document.getElementById('dvProg').style.top = posy - 20 + "px";    
}

We set everything to show the progress at mouse pointer, the nice thing with this code is that our progress will always be with us wherever we move our mouse on the page.

Flower
  • ajax
  • css
  • javascript
By Flower On 31 Dec, 12  Viewed: 1,034

Other blogs you may like

No action was found on the controller that matches the request

How to post the data from json, in Angularjs $http.post we get this error. why we get this error only when we try to post the json object rather than query string. When we pass the parameter in query string same action method works as it should be. It's a very simple article so we are going to... By Ali Adravi   On 12 Jul 2015  Viewed: 11,704

Using Ajax for Update a View and then Update Data

this blog has been... By Amin Rahdar   On 26 May 2015  Viewed: 212

Ajax Roundedcornersextender padding and margin problem

Ajax Rounded corners extender is used to give corner to any elements like panel and div etc. Most of the time you will need to give the padding to give some space between the border and content, same is used for margin to give some vertical and horizontal space between different controls, but if... By Alicia Gonzalez   On 15 Jun 2013  Viewed: 671

Ajax AsyncFileUpload control example in asp.net to upload only images

Ajax introduced two new controls AsyncFileUpload and SeaDragon, in this article we will see about Asynchronous file upload control, with its different properties and usage. 1. [AsyncFileUpload][1]: by using this control we can upload a file asynchronously (without postback). The file uploading... By Ali Adravi   On 20 May 2013  Viewed: 5,668

Ajax fill country state and city without postback in asp.net

Country will be filled on page load and once user will select any country we will fill states from that country and again when user will change state we will fill city for that state without postback ( asynchronously) with the help of update panel in asp.net. Create three methods to fetch... By Hamden   On 04 May 2013  Viewed: 4,518