change cursor style while calculating

Discussion in 'JavaScript' started by michael_nrw, Feb 9, 2005.

0
  1. #1
    Hi guys,
    I have the following problem: If i check a checkbox, an onclick-event jumps into a javascript function, which needs 2-3 seconds before finishing a complex calculation. In this time-period i want to change the cursor style in the status 'wait' (sandbox). After calculation is finished, i want the cursor back in his default status (arrow). I tried many things, but nothing works, anyone can help?

    thank you in advance, michael

    for example a little javascript-progi:

    <html><head><title>Test</title>

    <script type="text/javascript">

    function calc() {
    var dummy = 0;

    for (var i=0; i<1000000;i++) {
    for (var z=0; i<1000000;i++) {
    dummy = dummy + z + i;
    }
    }

    }

    </script>
    </head><body>
    <form name="Formular" action="">
    <input type="checkbox" name="Test" value="Testvalue" onClick="calc()"> Only a test
    </form>
    </body></html>
     
    michael_nrw, Feb 9, 2005 IP
  2. exam

    exam Peon

    Messages:
    2,434
    Likes Received:
    120
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Here you go, and free of charge
    
<html><head><title>Test</title>

<script type="text/javascript">

function cursor_wait() {
  document.body.style.cursor = 'wait';
}

function cursor_clear() {
  document.body.style.cursor = 'default';
}

function calc() {
  var dummy = 0;

  for (var i=0; i<1000000;i++) {
    for (var z=0; i<1000000;i++) {
      dummy = dummy + z + i;
    }
  }

  cursor_clear();
}

</script>
</head><body>
<form name="Formular" action="">
<input type="checkbox" name="Test" value="Testvalue" onMouseDown="cursor_wait()" onMouseUp="calc()"> Only a test
</form>
</body></html>
    Code (markup):
    EDIT: For compatibility, instead of using:
    document.body.style.cursor
    Code (markup):
    do something like this:
      var cursor = 
     document.layers ? document.cursor :
     document.all ? document.all.cursor :
     document.getElementById ? document.getElementById('cursor') : null;
    Code (markup):
     
    exam, Feb 9, 2005 IP
  3. michael_nrw

    michael_nrw Peon

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    perfekt....good trick with the onMouseDown-Event!

    thank you very much, greetings from germany, bye michael
     
    michael_nrw, Feb 10, 2005 IP
  4. exam

    exam Peon

    Messages:
    2,434
    Likes Received:
    120
    Best Answers:
    0
    Trophy Points:
    0
    #4
    you're welcome :)
     
    exam, Feb 10, 2005 IP
  5. Skews Me

    Skews Me Peon

    Messages:
    1
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    I tried testing this on Firefox:

    alert(document.layers ? document.cursor : document.all ? document.all.cursor : document.getElementById ? document.getElementById('cursor') : null);

alert(document.all);

alert(document.all.cursor);
    Code (markup):
    The results, are "null", "...object...", "undefined"

    :confused: I'm at a loss of how to gracefully create an element(s) with ID=cursor to change to a 'pointer' and then back to 'default'.
     
    Skews Me, Mar 2, 2009 IP
  6. blablub

    blablub Peon

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    the code doesn't work because this piece of crap named "javascript" obviously has a priority-system for instructions. mouse cursor has lowest priority of all.

    is it possible to do a refresh or repaint or something directly after seting the cursor?
     
    blablub, Feb 4, 2010 IP
  7. blablub

    blablub Peon

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #7
    Ok. The first code surprisingly works in IE6-8. :confused:

    If I use:

    it doesn't work anywhere. Did "compatibility" mean you get the same error in all browsers? :)
     
    blablub, Feb 5, 2010 IP