locked
Cursor for Chrome, IE and Edge does not return to default icon after reopening the page RRS feed

  • Question

  • User1868852945 posted

    When Chrome, IE and Edge user clicks a view_tab button on my MVC view page, I reopen the page with new parameters. On the click event I change the cursor to "progress" (spinning circle) in case the new page takes a few seconds to open.  When the page does open, the cursor is still set to "progress".  It remains set to "progress" until the user moves the cursor off of the button.  

    How can   I get the cursor back to "default" immediately after the page opens?

    $('.view_tab').click(function () {
                    $(this).css("cursor", "progress");             
                    window.open("/SchemaTree/SchemaTreeView?ptree_parm55=n&ptree_db_type=" + "&ptree_skip=y", '_self', "SchemaTrack_tab");
                    //$(this).css("cursor", "default"); //this did not fix the problem here, or at the top of my javascript
                });

    This happens for Chrome. ID and Edge.  FF does not have this  problem.

    Thanks for any help.

    Friday, February 5, 2021 2:15 PM

Answers

All replies

  • User-939850651 posted

    Hi gunderj,

    When user clicks a view_tab button on my MVC view page, I reopen the page with new parameters. On the click event I change the cursor to "progress" (spinning circle) in case the new page takes a few seconds to open.  When the page does open, the cursor is still set to "progress".  It remains set to "progress" until the user moves the cursor off of the button.  

    Have you tried to update the cursor style when the page is loaded?

    Something like this:

        $(function () {
            $(".view_tab").css('cursor','default');
        })

    Hope this can help you.

    Best regards,

    Xudong Peng

    Monday, February 8, 2021 9:47 AM
  • User1868852945 posted

    XuDong Peng,

    Yes, I did try this as first thing to do in the main javascript function.  The results are still the same - cursor image is the spinning circle until the user moves the mouse off the view tab button.

    Hope you might have some other ideas?  Thanks.

    Monday, February 8, 2021 1:07 PM
  • User-939850651 posted

    Hi gunderj,

    I am not sure why this problem occurs, even when I did not add the script code I mentioned before, the cursor style will be restored to the default state after the page is reloaded.

    Try to manually add and delete the cursor style in the ready() function:

        $(function () {
            console.log('cursor style : ' + $(".view_tab").css('cursor'))     //default
            $("#btn").css('cursor', 'progress');
            $("#btn").css('cursor', 'default');
            console.log('cursor style : '  + $(".view_tab").css('cursor'))    //default
    })

    Under normal circumstances, both console messages should output default. What is your result?

    Best regards,

    Xudong Peng

    Wednesday, February 10, 2021 7:23 AM
  • User1868852945 posted

    Xudong,

    I tried your code ( my element name .'view_tab' in $(document).ready, but unfortunately got the same results - cursor is still progress.  One odd thing is when testing with Visual Studio IIS express only Chrome has the problem, but when testing over the internet (via  ISP) the problem occurs for Chrome, IE and Edge,  FF works fine.

    Sorry about the div's  in my below pasted javascript code, something maybe changed in the forums editor?

    <div>$(document).ready(function () {</div> <div>                var offset = $("#view_tab_recent_2_left_space").offset();</div> <div>                var top = offset.top;</div> <div>                var left = offset.left;</div> <div>                $('#view_tab_recent_2_middle').css("position", "absolute");</div> <div>                $('#view_tab_recent_2_middle').css("top", top);</div> <div>                $('#view_tab_recent_2_middle').css("left", left);</div> <div>                $('#view_tab_recent_2_middle').css("width", "45px");</div> <div>                $('#view_tab_recent_2_middle').keypress(validateNumber);</div> <div>                $('.txttime').keypress(validateNumber);</div> <div> </div> <div>                $(function () {</div> <div>                    //alert("got here");</div> <div>                    console.log('cursor style : ' + $('.view_tab').css('cursor'))     //default</div> <div>                    $('.view_tab').css('cursor', 'progress');</div> <div>                    $('.view_tab').css('cursor', 'default');</div> <div>                    console.log('cursor style : ' + $('.view_tab').css('cursor'))    //default</div> <div>                });</div> <div>            });</div>

    Wednesday, February 10, 2021 1:54 PM
  • User-939850651 posted

    Hi gunderj,

    Well, I did some online searches on the issue again, and I found that in chrome, the issue appeared a long time ago and has not been resolved. It is a browser design issue.

    Here is a related case: Getting the browser cursor from “wait” to “auto” without the user moving the mouse

    So I think the other browsers you mentioned that have the same problem may have similar reasons.

    Best regards,

    Xudong Peng

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, February 16, 2021 8:53 AM