Class in Scribe with Floating Image does not work

@tav – Hi, Andrew,

I have an issue with Scribe stack using the Floating Image child stack.

I am adding a Custom Class to Scribe to trigger a custom mouse pointer in special circumstances. It works fine, as long as I don’t add the Floating Image to Scribe. When I do, the Class does not work any more, even if I add it to both Scribe and Floating Image.

Is there a remedy for that?

This is nothing to do with the custom class - it will be fine added to just the scribe stack.

Given that CSS cursor changes work fine with a custom class - example here Scribe Test | My Website
where we use the scribe icon then I suspect that this is a question that is to do with order of execution and binding of events. ]

The floating image stack uses javascript and I suspect that this JS has not executed before you are binding the event with the mouse pointer JS.

The answer is to use event delegation and not direct binding in the RW environment where other stacks may be moving elements in the DOM after the binding has occurred. Of course the crude hack alternative is to just add a delay before binding to the custom class.

@tav – I did some more experimenting, removed custom class and the problem persists. So, it is most likely a JS conflict – as you suggested.

Since the conflict most probably exists between Scribe and Magic Mouse 2, may I invite Stuart @habitualshaker to this discussion, please (or anyone else, for that matter)? I am guessing that solving this conflict is way above my pay grade.

I have published the test page here.

Its not a conflict - its just that the floating image div is moved in the DOM after it is bound to the mouseover event [at a guess]

1 Like

You could either add a delay to the MM2 stack or (if your test page is representative of the end result you are looking to achieve) you could recreate that image/text layout using Source stacks.

1 Like

I think I will go with this suggestion. A Grid stack should work, I suppose.

Thank you both, guys.