Custom Cursor style

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

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


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…

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

Hi Vikram:

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

~jeff

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

Great, thanks @Vikramadhithan!

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.

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)

Please try to use OnLoad instead of OnMouseHover.

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?




cursors.rp (62 KB)

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.

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

1 Like

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();

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

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?

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.

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();

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

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.