Custom Cursor style

Axure RP 8
1

Hi all,

Just manage to define a custom cursor style. I used javascript to input css styling OnDragStart.
Thought I’d share it as I was looking for it:

Just add an interaction case and link to

javascript: $(’[data-label=“WidgetName”]’).css(‘cursor’, ‘url(“CursorUrl”),pointer’); throw new Error();

I used Vikramadhithan post on Mouse cursor on dynamic panels

Hope this helps.

John

2

Hi John,
Thanks for sharing it.
Demofor your syntax.

javascript: $(’[data-label=“cursor”]’).css(‘cursor’, ‘url(“https://cdn0.iconfinder.com/data/icons/IS_Christmas/128/santa.png”),move’); throw new Error();

Default cursor styles:
CSS cursor property
Custom CSS Cursors

Thanks,
Vikram
custom_cursor.rp (55.4 KB)

3 Likes
3

problem.png747×206 20.7 KB

Hi Vikram,
But if I have more then one interactive area, it will not work…even if I’ve given the data-lable different names…

4

Hi graceuxd1990,
It is working for me. Please check the attached RP file.
I hope it will be useful for you.
Thanks,
Vikram
cursors.rp (54.2 KB)

1 Like
5

Hi Vikram:

This does work great for multiple regions with the same cursor type. How about a different cursor for different dynamic panels?

~jeff

6

Hi jeff,
Please check the attached RP file for different cursors.
Here we are using data-label not dynamic panel.
For more reference,
Custom CSS Cursors

I hope it will be useful for you.
Thanks,
Vikram
custom_cursors.rp (67.3 KB)

5 Likes
7

Great, thanks @Vikramadhithan!

8

I’ve found sometimes this doesn’t work when you have multiple actions using the javascript: pseudo protocol. If you combine them into one script it will work fine.

9

Hello everyone,

thanks for that great solution!
I used this way to visualize the opportunity to move project gannts, as an hover effect.
Just one question: the change of the mouse cursor is not visible for the initial hover. It appears randomly after some moves of the dynamic panel (projects).
Can you tell me what’s the reason for that and how I can fix it?
See my rp file for my example.

Thanks in advance.
Grundfunktionen.rp (144 KB)

10

Please try to use OnLoad instead of OnMouseHover.

11

Hey all!

I’m still seeing the Hand cursor when I have an onClick event (show/hide), even though I have the JS added to onPageLoad.

This is the only javascript I have in my demo, but it’s still giving me the hand cursor when I want the pointer. What am I doing wrong?

updatedscreenshot.png1329×690 63.7 KB



cursors.rp (62 KB)

12

Thanks alot Vikram for sharing your solution! It works fine for me but i have an additional question:
Is there a way to center a picture over the cursor?

In my case, i want to use a hand-icon and want the actual cursor to be in the middle of it.

13

Move Image to x: [[Cursor.x - Target.width / 2]], y: [[Cursor.y - Target.height /2]]

1 Like
14

Hi Nathan! Thanks for your help! Since i don’t know how to use JS properly:
Where do i have to include it here:

javascript: $(’[data-label=“cursor_Image”]’).css(‘cursor’, ‘url(“http://image-url.png”),move’); throw new Error();

15

Don’t use JS to move an image. Use Axure’s Move action for that.

16

Oh ok, i thought so because i somehow need to refer to the loaded image, which is done by JS as discribed by Vikram.
I don’t get it then, nkrisc.
Would you mind giving me one more hint on where/how to include your snippet?

17

Oh, you mean center the image used for the cursor? I misunderstood. In that case the answer is here: CSS change custom cursor image origin (hotspot) to center - Stack Overflow

If I have a moment later I’ll add an example, but reading there you just need to add the x and y origin, half the size of the image.

18

Thanks a lot!

I got it using the following:

javascript: $(’[data-label=“cursor_Image2”]’).css(‘cursor’, ‘url(“http://url.com/image.png”) 25 30,move’); throw new Error();

19

Hey everyone. I have still another question on this:

I use the above code in the OnPageLoad-Case.
Now when i hover an interactive element inside the referred panel, it changes the cursor to pointer. When i click, it changes the cursor back to the normal arrow-cursor while i’m holding the click. Can i somehow overwrite these?

Thanks a lot for your help in advance!
Cheers,
Nico

20

I used this code on onPageLoad event :

javascript:
$('[data-label*="cursorMove"]').css('cursor', 'move'); 
void(0);

Notice the * after data-label. Then, you can add “cursorMove” to all the names of widjets you want to display a"move" cursor on hover.