8

What is the proper way to do fallbacks with .css()? This would most commonly be used for font fallbacks but I am using it for cursor images.

Here's what I got that isn't working:

$("#dragable").css('cursor','url(images/grabbing.gif), -moz-grabbing, auto');

**UPDATE: can someone tell me the valid CSS for starters?

What I have:

cursor: url(images/grabbing.gif), -moz-grabbing, auto;

... doesn't work.**

Dave
  • 8,879
  • 10
  • 33
  • 46
  • For font fallbacks you should use the standard CSS syntax, eg `jQueryObj.css({ fontFamily: '"Primary Font", "Fallback Font", serif' });`. Other properties will be another matter and I'll leave that up to the hopefully forthcoming answers. – eyelidlessness Nov 23 '10 at 22:36

2 Answers2

4

Using dynamic inline styles not always a good idea. Consider dynamic classes. Define somewhere in css specific class for draggable element:

.cur-draggable { cursor: url(images/grabbing.gif), -moz-grabbing, auto; }

And try to add this class, instead of style itself;

$("#dragable").addClass('cur-draggable');
vtambourine
  • 2,109
  • 3
  • 18
  • 27
0

Not sure why that breaks it, but the values aren't being written to the DOM.

Though, the css() function is really just a shortcut to editing the "style" attribute inline on the element, so you could do this to get the same result:

$("#dragable").attr('style','cursor: url(images/grabbing.gif), -moz-grabbing, auto');
RussellUresti
  • 6,211
  • 4
  • 28
  • 26
  • Note that this will overwrite other style properties. – eyelidlessness Nov 23 '10 at 22:54
  • True, but you could easily bypass that by first retrieving the contents of the style attribute and then appending the string. Something like $("#dragable").attr('style',$(this).attr('style') + 'cursor: url(images/grabbing.gif), -moz-grabbing, auto'); -- not sure that exact syntax will work, but the principle is there. – RussellUresti Nov 24 '10 at 15:38