2

So if I was to write this as a class in css I'd get something like:

.cursorChange {
    cursor: move; /*IE*/
    cursor: grabbing; /*Mozilla*/
    cursor: -webkit-grabbing; /*Chrome*/
}

However I want to apply these styles inline with javascript at the moment of grabbing the element. now a line like this:

document.getElementById('foo').style.cursor = "move";

Works, obviously, but how do I add more then one value to this node? If I just write grabbing, IE has no fallback, mozzila doesn't recognize it either, is there a way to add multiple values here?

P.S. cannot change the entire stylestring because it has more then just cursor on it. I need this to be inline, not a class due to how the css is written.

Dellirium
  • 1,362
  • 16
  • 30
  • Not a solution per se, but [this](https://stackoverflow.com/a/3968772/133203) might interest you. – Federico klez Culloca Jan 09 '18 at 08:43
  • _" I need this to be inline, not a class due to how the css is written."_ Can you elaborate? This sounds dubious. – JLRishe Jan 09 '18 at 08:44
  • Possible duplicate of [How can I set multiple CSS styles in JavaScript?](https://stackoverflow.com/questions/3968593/how-can-i-set-multiple-css-styles-in-javascript) – Scipion Jan 09 '18 at 08:47
  • @JLRishe the cursor property is applied to an element which already has a defined css class that sets the cursor for it, and has no ID, thus inline is the best solution to overwrite the cursor while drag is happening. – Dellirium Jan 09 '18 at 10:13
  • @Scipion doesn't apply in this case, cannot set the whole stylestring, there are other elements there which may or may not exist depending on a lot of factors. – Dellirium Jan 09 '18 at 10:13
  • @Dellirium You can define a CSS rule that has a higher priority than the default one that sets the cursor. Then just toggle the temporary class on and off while you are dragging. No need to use inline styles. – JLRishe Jan 09 '18 at 10:23
  • @JLRishe problem there in is, I do not control the CSS, and CSS defined for the elements can varie, its not only one element being dragged. If an element was to already have a class with `cursor` property, and godforbid even `!important` there is no way other then inline definition to get it overwritten. Now, jumping at hoops here, there is probably no chance that will happen (not in my control though, not alone on this project, im only developing one module) but I want to take precaution. If there is no way to define multiple inline nodes, then all I can do is browser check, i dont like that. – Dellirium Jan 09 '18 at 10:28
  • but if no other way, it will be what I will do. I just want to verify there is no way to add more then one via JS – Dellirium Jan 09 '18 at 10:29
  • @JLRishe apparently not even a class with !important can work. It has to be inline.... just tested now. Guess browser checking it is. – Dellirium Jan 09 '18 at 10:39

2 Answers2

3

How about something like this: 

if(navigator.userAgent.indexOf("Chrome") != -1 ){ // Chrome
        document.getElementById('foo').style.cursor = "-webkit-grabbing";
}else if(navigator.userAgent.indexOf("Firefox") != -1 ){ //FireFox
        document.getElementById('foo').style.cursor = "grabbing";
}else if((navigator.userAgent.indexOf("MSIE") != -1 ) || (!!document.documentMode == true )){ //IE
       document.getElementById('foo').style.cursor = "move";
}
Parthipan Natkunam
  • 756
  • 1
  • 11
  • 16
2

You can try following way:

var isIE = /*@cc_on!@*/false || !!document.documentMode;
var isMozilla = typeof InstallTrigger !== 'undefined';  
var isChrome = !!window.chrome && !!window.chrome.webstore;

if(isIE) {
    document.getElementById('foo').style.cursor = "move";
}
if(isMozilla) {
    document.getElementById('foo').style.cursor = "grabbing";
}
if(isChrome) {
    document.getElementById('foo').style.cursor = "-webkit-grabbing";
}

Also you can more browser's options from here: How to detect Safari, Chrome, IE, Firefox and Opera browser?

Hanif
  • 3,739
  • 1
  • 12
  • 18
  • Thanks for link to all the browsers as i feel its this answer might help more people out there. Both of you get a +1. So am I to interpret that there is no way to set multiple nodes inline via js? – Dellirium Jan 09 '18 at 10:17