Effect.Opacity demo page not working in IE 10.

[thinsoldier]

This official demo does not work in my IE 10.
http://madrobby.github.io/scriptaculous/effect-opacity/

I recently updated my site to get Sortables working in IE 10. They work but I see no transparency when dragging my elements around. Instead they are completely invisible.

It seems the default effect applied while dragging does not work at all in IE 10.

[thinsoldier]

What I wound up doing was using the starteffect option to replace the default Effect.Opacity.

Sortable.create('photo_list',{tag:'li',overlap:'horizontal',constraint:false,starteffect:'Effect.Parallel'});

Effect.Parallel simply does nothing so it looks the same in IE10, Firefox, Chrome, Safari. Just have to hope now that it somehow doesn't break IE8.

It would be great if there was a way to just change the class name of the element being dragged, then I could apply opacity with plain css.

http://madrobby.github.io/scriptaculous/draggable/
http://madrobby.github.io/scriptaculous/sortable/

Other demos that don't seem to work:
http://madrobby.github.io/scriptaculous/effect-appear/
http://madrobby.github.io/scriptaculous/effect-fade/
http://madrobby.github.io/scriptaculous/effect-puff/ (no transparency)
http://madrobby.github.io/scriptaculous/effect-pulsate/

[drubbo]

It would be great if there was a way to just change the class name of the element being dragged, then I could apply opacity with plain css.

You can actually do that by adding / removing a css class providing onStart / onEnd callbacks to your Draggable instances.

Effect.Parallel

null should also be a suitable effect for your case.

[thinsoldier]

It doesn't matter what value I give to starteffect, I always get this error in dragdrop.js:
TypeError: this.options.starteffect is not a function

if(this.options.starteffect) this.options.starteffect(this.element);

The code still works but I'd like to avoid having errors if I could.

And I tried passing a function through the options named onStart but it doesn't seem to ever get called.

Sortable.create('photo_list',{tag:'li',overlap:'horizontal',constraint:false,
starteffect:'Effect.Parallel', onStart:function(x){console.log(x)} });

Sortable.create('photo_list',{tag:'li',overlap:'horizontal',constraint:false,
starteffect:'null', onStart:function(x){console.log(x)} });

Sortable.create('photo_list',{tag:'li',overlap:'horizontal',constraint:false,
starteffect:null, onStart:function(x){console.log(x)} });

[drubbo]

Well, the library is quite right: 'Effect.Parallel' is a string, while Effect.Parallel is a function; so 'null' does not evaluate to false but is not a function indeed.
Plain null works with new Draggable but not with Sortable.create because if you look at the code it sets the option only if it has been set to something that does not evaluate to false:

    if(options.starteffect)
      options_for_draggable.starteffect = options.starteffect;

So a suitable candidate is Prototype.emptyFunction (tested, worked).

Also, onStart and onEnd are not passed to Sortable's Draggables, there's a pull request about

[punknroll]

Here is a fix for the opacity bug as the bug is related to prototype and not scriptaculous I guess.

https://prototype.lighthouseapp.com/projects/8886/tickets/1278-ie-detection-and-opacity