Change cursor to hand

Bringing your stacks to the web

Moderators: FourthWorld, heatherlaine, Klaus, kevinmiller, robinmiller

Post Reply
williamdesmet
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 67
Joined: Tue Jun 26, 2012 7:07 pm

Change cursor to hand

Post by williamdesmet » Mon Dec 28, 2020 12:56 pm

Hi there,

I like to change the cursor to hand on some buttons.
Anybody knows how to do it in LC HTML5?

Greetings,

William

richmond62
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 9761
Joined: Fri Feb 19, 2010 10:17 am

Re: Change cursor to hand

Post by richmond62 » Mon Dec 28, 2020 5:27 pm

Code: Select all

on mouseEnter
   set the lockCursor to true
   set the cursor to 28
end mouseEnter 

on mouseLeave
   set the cursor to empty
   set the lockCursor to false
end mouseLeave
28 is the ID of the hand curser.

This is for the stack: whether this transfers to HTML5 I am not sure.
Attachments
Curses.livecode.zip
Here's the stack.
(849 Bytes) Downloaded 323 times

williamdesmet
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 67
Joined: Tue Jun 26, 2012 7:07 pm

Re: Change cursor to hand

Post by williamdesmet » Mon Dec 28, 2020 5:56 pm

Hi Richmond,

Thanks but I already tried this off course and noticed it didn't work.
Maybe someone already has solved this so I asked here.

In HTML5 the output is on html5 canvas and then you can edit the css style within the canvas tag:

Code: Select all

<canvas style="border: 0px none;" id="canvas" oncontextmenu="event.preventDefault()"></canvas>
But this way you edit it for the entire canvas and I want it for only some buttons.

Maybe there is some 'mouseenter' javascript that I can use and then do the same thing as in this lesson:
https://lessons.livecode.com/m/4071/l/ ... -files-i…


Did not find it yet!

richmond62
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 9761
Joined: Fri Feb 19, 2010 10:17 am

Re: Change cursor to hand

Post by richmond62 » Mon Dec 28, 2020 8:15 pm

Thanks but I already tried this off course and noticed it didn't work.
Maybe someone already has solved this so I asked here.
OK, OK: I'm going to be bitchy (not that that's anything new) and state
that if LiveCode's claim to be able to build HTML5 deliverable stacks is
to reach a decent fruition the code I suggested should automatically be converted 'transparently' into HTML5
without any need for any further tinkering.

Personally I feel the the HTML5 part of LiveCode is far from mature, in fact so far
from mature that I would not touch it with a ten foot pole yet.

williamdesmet
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 67
Joined: Tue Jun 26, 2012 7:07 pm

Re: Change cursor to hand

Post by williamdesmet » Tue Dec 29, 2020 12:54 pm

I was surprised too that it didn't work out of the box but maybe it is coming?
The LC roadmap indicates that there are updates for HTML5 on the way.
WebAssembly and HiDPI scaling will make it a bit faster and look better.

The last 3 weeks I'm 'fighting' with HTM5 because I think there is a lot of potential in it.
Not enough though to buy a full license yet.
Maybe after the new update.

----
For now I'm struggling with this javascript because it needs an ID

Code: Select all

<script>
function myFunction() {
  document.getElementById("demo").style.cursor = "pointer";
}
</script>
Can I use this?
Can I give a button an ID that is recognized by this javascript?

PaulDaMacMan
Posts: 670
Joined: Wed Apr 24, 2013 4:53 pm
Contact:

Re: Change cursor to hand

Post by PaulDaMacMan » Sat Oct 19, 2024 3:08 am

williamdesmet wrote:
Tue Dec 29, 2020 12:54 pm
I was surprised too that it didn't work out of the box but maybe it is coming?
The LC roadmap indicates that there are updates for HTML5 on the way.
WebAssembly and HiDPI scaling will make it a bit faster and look better.

The last 3 weeks I'm 'fighting' with HTM5 because I think there is a lot of potential in it.
Not enough though to buy a full license yet.
Maybe after the new update.

----
For now I'm struggling with this javascript because it needs an ID

Code: Select all

<script>
function myFunction() {
  document.getElementById("demo").style.cursor = "pointer";
}
</script>
Can I use this?
Can I give a button an ID that is recognized by this javascript?
Oh sorry, I just now stumbled on this thread, four years later. You were very close to the solution with your JS snippet!
In case anyone is still looking for an answer for this ...

This works with 9.6.3 for the Emscripten Engine from LC Community 9.6.3 (I have no idea if it applies to LC 10 or 'Create Cloud' or whatever).
This sets the cursor for a cavas element of the web page, which is what the stack is rendered into (with the exception of web 'native layer' widgets which get their own 'canvas'). The cursor will be set for as long as the mouseLoc stays within the stack area (which seems like the way most environments set the cursor, per view region or window. Just pass it the name of an HTML5 / CSS cursor (that come with web browsers), the list of names is part of the handler:

Code: Select all

on setCSScursor pCursorName
   if the processor is "js" then -- check that we're in a web browser context
      if pCursorName is empty then 
        	put "document.getElementById('canvas').style.cursor = "& quote & "none" & quote & ";" into js
        	do js as javascript
      else
         put "alias,all-scroll,auto,cell,context-menu,col-resize,copy,crosshair,default,e-resize,ew-resize,grab,grabbing,help,move,"&\
               "n-resize,ne-resize,nesw-resize,ns-resize,nw-resize,nwse-resize,no-drop,none,not-allowed,pointer,progress,row-resize,"&\
               "s-resize,se-resize,sw-resize,text,auto,vertical-text,w-resize,wait,zoom-in,zoom-out,initial" into tCSScursors
         if pCursorName is among the items of tCSScursors then
        	put "document.getElementById('canvas').style.cursor = "& quote & pCursorName & quote & ";" into js
        	do js as javascript
      	end if
     end if
end setCSScursor
 
Example usage:
setCSScursor "grabbing"

This could probably be refined, for instance to make sure it's being set for the correct desired 'Canvas', but typically there's only one Canvas element being used.
My GitHub Repos: https://github.com/PaulMcClernan/
Related YouTube Videos: PlayList

dunbarx
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 10013
Joined: Wed May 06, 2009 2:28 pm

Re: Change cursor to hand

Post by dunbarx » Sat Oct 19, 2024 2:00 pm

I just stumbled onto this thread as well.

I am surprised that this was not resolved four years ago, Paul doing it now. I could not contribute, but we rarely leave such things to simply die.

Craig

Post Reply

Return to “HTML5”