Scriptaculous Slider handle doesn't move when slider is above a multimap.

Question

I have a Scriptaculous Slider showing in a modal-dialog window above a Multimap. The problem that I'm having is that on this page the slider handle doesn't move if you try to drag it. If I click on the slider track, the handle correctly jumps to that point and you can then use the handle to drag correctly.

Clicking on the handle successfully registers the click as I can console.log() the value of the slider at that point. Trying to drag the slider around by it's handle just keeps logging that same value and the handle doesn't move.

The slider works correctly on any page that doesn't have the multimap on it.

There are no other JS frameworks on the pages (just Prototype and Scriptaculous).

I'm really not sure that the problem is though. If the slider wasn't registering anything then that would make sense that the map was ontop somehow or stealing the click event. But the clicks are obviously being recorded. I also don't understand why clicking on the slider track fixes the issue completely.

Can someone point me in the right direction (either with a fix, or a path to take to debug the issue myself).

Things I have tried:

• Setting the z-index of the handle.
• Making the modal-dialog visible to begin with (as it is hidden to start with - I thought it might be related to this issue, but it didn't help).

Answer 1

Found the problem.

Both the Scriptaculous Slider and Multimap were defining Array.prototype.indexOf but in different ways.

The solution (since I only wanted 1 handle on the slider) was to edit slider.js and change the calls to this.handles.indexOf.

Index: slider.js
===================================================================
--- slider.js   (revision 1)
+++ slider.js   (working copy)
@@ -219,14 +219,14 @@
           this.offsetY = (pointer[1] - offsets[1]);
         } else {
           // find the handle (prevents issues with Safari)
-          while((this.handles.indexOf(handle) == -1) && handle.parentNode) 
+          while((this.handles[0] != handle) && handle.parentNode)
             handle = handle.parentNode;
-            
-          if (this.handles.indexOf(handle)!=-1) {
+
+          if (this.handles[0] == handle) {
             this.activeHandle    = handle;
-            this.activeHandleIdx = this.handles.indexOf(this.activeHandle);
+            this.activeHandleIdx = 0;
             this.updateStyles();
-            
+
             var offsets  = Position.cumulativeOffset(this.activeHandle);
             this.offsetX = (pointer[0] - offsets[0]);
             this.offsetY = (pointer[1] - offsets[1]);

Note to anyone using this fix: While this fix will make it so that the Scriptaculous Slider and Multimaps can work together on the same page, it will make it so that only 1 handle on the slider works. I have not tested what happens if you try to use this with 2 or more handles.