What's the correct way to change the cursor?

[Brett Wiesner]

Hi,

What's the correct way to change the cursor in an angular application? I ask the user to click on a point on the map and I want to change the cursor to a crosshair (for example) while its waiting for the user to do that.

Thanks,
Brett

[Peter Bacon Darwin]

Can you do it by changing the CSS class of the body?

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular?hl=en-US.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[Andy Joslin]

html:

<map ng-class="{crosshair: waitingForInput}"></map>

js:
$scope.waitingForInput = true

css:

.crosshair {

  cursor: crosshair;

}

[Brett Wiesner]

Thanks Andy. Here's a simple plunker that's not quite working...

http://plnkr.co/edit/fEnHSp

Thanks,
Brett
--

Brett Wiesner
VT MÄK, Director of New Product Innovation
150 Cambridge Park Drive, 3rd Floor, Cambridge, MA, 02140
T: +1.857.209.3471  Email: br...@mak.com 
labs.mak.com

Where Live, Virtual, and Constructive Simulation Meets the Web

www.mak.com/weblvc

}

--
You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/4azcQ8CwMvY/unsubscribe?hl=en-US.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.

[Brian Matthews]

Brett,

The stylesheet is not loading (use href attribute instead of src attribute). Also, the classname should be a string in your example.

See this fork of your example:

http://plnkr.co/edit/5gxYiT

[Clint Checketts]

Just for kicks I made it so the 'waitForInput' is toggled when you click it, so you can see the cursor change on and off.

http://plnkr.co/edit/3reF24?p=preview

--

You received this message because you are subscribed to the Google Groups "AngularJS" group.

To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.

[Brett Wiesner]

Thanks guys! 

Thanks,
Brett
--

Brett Wiesner
VT MÄK, Director of New Product Innovation
150 Cambridge Park Drive, 3rd Floor, Cambridge, MA, 02140
T: +1.857.209.3471  Email: br...@mak.com 
labs.mak.com

Where Live, Virtual, and Constructive Simulation Meets the Web

www.mak.com/weblvc

[Brett Wiesner]

I guess I should have mentioned I'm using an openlayers map. This plunker integrates the ng-class code with a map controller and illustrates the problem.

http://plnkr.co/edit/FMijIY

OpenLayers might be messing with the cursor (click and drag and the cursor changes) so is there anyway to override what its doing?

Thanks,
Brett
--

Brett Wiesner
VT MÄK, Director of New Product Innovation
150 Cambridge Park Drive, 3rd Floor, Cambridge, MA, 02140
T: +1.857.209.3471  Email: br...@mak.com 
labs.mak.com

Where Live, Virtual, and Constructive Simulation Meets the Web

www.mak.com/weblvc

[Brian Matthews]

You'll need to get more specific with your "crosshair" css selector or add "!important" to the rule.   Also,  the classname should be a string in ng-class -  ng-class="{'my-class-name-in-quotes': myVar}"

Brian Matthews
http://www.slapthink.net

[Brett Wiesner]

Thanks guys! This worked "for real" this time!

Thanks,
Brett
--

Brett Wiesner
VT MÄK, Director of New Product Innovation
150 Cambridge Park Drive, 3rd Floor, Cambridge, MA, 02140
T: +1.857.209.3471  Email: br...@mak.com 
labs.mak.com

Where Live, Virtual, and Constructive Simulation Meets the Web

www.mak.com/weblvc