Adapt Learning Community: disable 'click' on peelBackHotspot

Hi all,

This is a really fun component, but I'm having issues in IE11 and Edge. If you drag the drag bar it works great, but if you click it the drag bar shoots across but the image isn't replaced.

I'm happy for it to be drag only, so I tried removing the onButtonClick() function at Line 239 of adapt-peelBackHotspot.js (and the events on lines 17 & 18), hoping to solve my problems. Unfortunately it didn't seem to do anything!

Would someone be able to advise on how to kill off the click part and make it drag only?

Many thanks,

Chris

If you drag the drag bar it works great, but if you click it the drag bar shoots across but the image isn't replaced.

That's odd, I've just installed it and tried it out using the example.json and it works fine for me in IE11 and Edge

I tried removing the onButtonClick() function at Line 239 of adapt-peelBackHotspot.js (and the events on lines 17 & 18), hoping to solve my problems. Unfortunately it didn't seem to do anything!

Yes I see what you mean... it seems dragEnd is still firing when you click. I actually can't see why onButtonClick is even necessary, it seems to work fine without it!

I'm not sure of the solution really... I've had a bit of a poke around and thought I'd solved it by adding if (!fromDrag) return; into the animate function which works fine up until the point you click the button, after which it stops automatically sliding across/back if you then drag part of the way across the image.

Show parent | Reply

Thanks Matt,

I finally worked out what was messing things up. I have a bunch of article styles that set title colour, background color and button colours for each article - kind of like a 'theme' for each article that I interchange.

The style I was using for the peelBackHotspot had the following line in it:
button:hover {background-color: #000 !important; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s;}

The transition part was completely conflicting with the code for the component peeling back/forth somehow. No idea why. 2 types of transitions being called at the same time maybe? Anyways, ditched the CSS and it's perfect!

Thanks again

Show parent | Reply