JQuery UI Slider moves up and disappears into div when using

Question

I replaced the MooTools slider with the jQuery UI slider, as our content management system uses jQuery and other jQuery user interface elements. I ran into a problem when on Firefox and Chrome the slider (it is horizontal) seems to move up in the div when it is shifted and thus hides the slider. It seems that he does this in every second increment. From firebug, it looks like the slider gets a negative top edge when used and seems to come and go. Unfortunately, I can’t show an example like this in our backend, but it will include all the code. Hope someone with some extensive knowledge of the jQuery interface can help me.

Layout for the slider:

<div id="slider_bar"> </div> 

CSS for the slider

 /* === Slider === */ .ui-slider { position: relative; text-align: left; border: 0px none; } .ui-state-focus .ui-slider-handle { border: 0px none; } .ui-slider .ui-slider-handle { top: -9px; margin-left: -12px; width: 30px;height: 25px; background: url(/../../includes/clientArea/imagesNew/manageNavigation/slider-ball.png) 13px 10px no-repeat; position: absolute; z-index: 60; cursor: pointer; } .ui-slider .ui-state-hover { } .ui-slider .ui-slider-range { position: absolute; z-index: 1; font-size: .7em; display: block; border: 0; } .ui-slider .ui-state-default { border: 0px none; } .ui-slider-horizontal { width: 204px;height: 25px; background: url(/../../includes/clientArea/imagesNew/manageNavigation/sliderBar.png) 0px 0px repeat-x;} .ui-slider-horizontal .ui-slider-handle { top: -9px; margin-left: -12px; } .ui-slider-horizontal .ui-slider-range { top: 0; height: 100%; background: url(/../../includes/clientArea/imagesNew/manageNavigation/sliderBar.png) 0px -5px repeat-x; } .ui-slider-horizontal .ui-slider-range-min { left: 0; } .ui-slider-horizontal .ui-slider-range-max { right: 0; } 

JQuery code

 jQuery('#slider_bar').slider({ min: 10, max:18 }); 

When loading the page, the layout of the slider is as follows:

 <div id="slider_bar" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all"> <a href="#" class="ui-slider-handle ui-state-default ui-corner-all" style="left: 0%;"></a> </div> 

After moving the slider, it looks like this:

 <div id="slider_bar" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" style="margin-right: 0px; margin-bottom: 0px; margin-left: 0px; margin-top: -25px; "> <a href="#" class="ui-slider-handle ui-state-default ui-corner-all ui-state-focus" style="left: 37.5%; "></a> </div> 

This is definitely margin-top: -25px, which is causing the problem, but I have no idea why jQuery is doing this. This seems to be done only in Firefox and Chrome, but not in IE8 (does something really work in IE?)

Any ideas?

Answer 1

This was a problem caused by the interaction of MooTools and jQuery with each other according to: http://dev.jqueryui.com/ticket/4168

Answer 2

This worked for me:

  // This fixed the conflict between slider and motools jQuery.ui.slider.prototype.widgetEventPrefix = 'slider'; jQuery( "#slider-range" ).slider({ range: true, min: 16, max: 99, values: [ 16, 99 ], slide: function( event, ui ) { jQuery( "#age_range" ).val( ui.values[ 0 ] + " - " + ui.values[ 1 ] ); } }); 

Answer 3

Until the jquery-ui team solves this problem, I made changes to the jquery-ui lib. I changed these 9 'slides' to 'superslide'

 > grep -noE '(\W+)slide(\W+)' jquery-ui-1.8.14.custom.min.js 287::"slide", 299:="slide"; .slide( 301::{slide: 303:.slide( 417::"slide", 427:("slide", ("slide", 773:.slide= 

and then use .superslide instead of .slide in your js code on a page where there are both mootools and jquery. For example:

 jQuery( "#slider" ).slider({ range: "min", min: 5000, max: 1000000, value: 300000, ... superslide: function( event, ui ) { ... } }); 

Hope this helps.

Answer 4

When integrating jquery + ui with mootools (it is also a jquery library), both libraries respond to the slide event, and, unfortunately, mootools starts first.u can do like this.

jQuery ('div.slider') [0] .slide = null; JQuery ('div.slider') slider ({...}) ;.