Page 1 of 2 12 LastLast
Results 1 to 10 of 13

Thread: [DHTML] Animated cursors anyone?

  1. #1
    Join Date
    Aug 2005
    Posts
    971
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default [DHTML] Animated cursors anyone?

    1) CODE TITLE: Animated cursors

    2) AUTHOR NAME: Shachi Bista

    3) DESCRIPTION: Lets you have "animated" cursors in FF.

    4) URL TO CODE: http://shachi.prophp.org/animcur.html

    5) NOTES: This isn't cross-browser. I didn't need to make it as IE already supports the .ani format. I got the cursor images from: http://www.maxthemes.com/guistuff/?g...%20Cursors and used http://www.xoyosoft.com/gs/index.htm to chop it down into different images then I used gimp to convert the bmps to pngs and then again used: http://converticon.com/ to convert the pngs icos and simply renamed them to a .cur extension. This script takes up some resources because of the constant setInterval after every 30 ms.

    6) BROWSER COMPATIBILITY: Tested with, FF 2.0.0.1. Please feel free to test it and please post your name and version of firefox you test it with, it will be listed here.

    Tested with FF1.5 -- by drj33 & jscheuer1 - Works fine
    Tested with FF1.5.0.9 -- by jscheuer1 - Works fine
    Tested with IE7 -- by jscheuer1 - Doesn't work.
    Tested with Opera -- by jscheuer1 - Doesn't work

    Enjoy!!
    Last edited by shachi; 02-15-2007 at 08:50 AM.

  2. #2
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,164
    Thanks
    265
    Thanked 690 Times in 678 Posts

    Default

    FF1.5

    Hmm.. interesting.

    It's a big buggy... the normal cursor shows up if you scroll too fast, click, etc.

    The buttons don't seem to do anything.

    The animation apparently loops every second or two, with a slight white flash between the beginning and end frames (at least I assume this is the case).


    Though IE may already support this, it is a good idea to make it cross browser compatible. Right now you're making a FF only script, and that's a bad idea. Using .ani is fine, but you should include a browser check then, or better, function check, to determine if the .ani or your script should be used.
    Daniel - Freelance Web Design | <?php?> | <html>| espa˝ol | Deutsch | italiano | portuguŕs | catalÓ | un peu de franšais | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    No work in Opera. I think if you used .cur files instead of .png it might. I didn't see the problems like djr33 did. Worked fine in FF 1.5 unless I hit start it again without having first stopped it. You need some way to prevent multiple intervals. I'd try clearing at the beginning of the stop and start events (you are clearing timeout after reset but, there is no timeout):

    Code:
    <input type="button" value="Stop the animation" onclick="clearInterval(c);reset();">
    <input type="button" value="Start it again" onclick="clearInterval(c);c = setInterval('changeCur()', 30);">
    </body>
    </html>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  4. #4
    Join Date
    Aug 2005
    Posts
    971
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    jscheuer1: done with the changes you pointed out. I guess it is the problem with .pngs but the .curs I made are too small(or at least they appear too small).

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Works good in FF 1.5.0.9 now here. I just tried it out in IE 7 and, I am unsure why but, it doesn't work. I can tell you that the .png images try to load but never have a chance to get cached. Perhaps if you preloaded them it would work in IE 7. Or, IE 7 may also require .cur files. IE 7 does support the .ani files for animated cursors though.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. #6
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,164
    Thanks
    265
    Thanked 690 Times in 678 Posts

    Default

    Good updates, whatever they were. All of the problems above (that both John and I had) are now fixed.

    One issue is that the actual pixel at which the mouse is touching and interacting (the point of the arrow) is not any logical position in the sphere.... in fact, it's a point about 5px from the edge of the sphere.
    Daniel - Freelance Web Design | <?php?> | <html>| espa˝ol | Deutsch | italiano | portuguŕs | catalÓ | un peu de franšais | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

  7. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    I see that too, more specifically it (the position of the unseen arrow tip) appears to be about 5px diagonally from the upper leftmost point of the animated cursor. This is not a huge deal. One thought I've been having in connection with this effect though is a different approach - that you could use a single transparent .cur file for the cursor and then position an animated .gif file based upon the mouse's coordinates. This might have the problem of the mouse seeming to be over the .gif when it needs to be over other elements on the page to trigger events.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  8. #8
    Join Date
    Aug 2005
    Posts
    971
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    drj33: now, that's strange. I didn't do any updates(except the onclick events of the buttons).

    drj33, jscheuer1: I am not sure about the pointer of the cursor. I hope to fix that soon(hopefully)

    Quote Originally Posted by jscheuer1
    One thought I've been having in connection with this effect though is a different approach - that you could use a single transparent .cur file for the cursor and then position an animated .gif file based upon the mouse's coordinates. This might have the problem of the mouse seeming to be over the .gif when it needs to be over other elements on the page to trigger events.
    That is a good idea too. If we do this we will not have to use setInterval thus not overloading the performance.

    EDIT: I just realised where my Mouse object comes into action. And by the way I have changed the cursor extension to .cur too.

    EDIT: Something just came to my mind. Usually when the cursor is busy the document.onmousedown function is canceled, so I don't think that the pointer would be much of a big problem. What do you think about it?
    Last edited by shachi; 02-15-2007 at 08:52 AM.

  9. #9
    Join Date
    Feb 2007
    Location
    Burnsville, MN
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Yeah i like this script! It looks nice.

  10. #10
    Join Date
    Aug 2005
    Posts
    971
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thank you iMarc.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •