I’ve replaced a MooTools slider with a jQuery UI slider as our content management system uses jQuery and various other jQuery UI elements. I’ve run into a problem where on Firefox and Chrome the slider bar (it’s horizontal) seems to move up into the div when sliding it, and thus hiding the slider. It seems that it does this in every second moving increment. From firebug it looks like the slider gets a negative top-margin when used and seems to come and go. I unfortunetly cannot show an example as it’s in our backend, but will include all the code. Hopefully somebody with some extensive knowledge on jQuery UI can help me out.
Markup 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 });
On page load, the slider markup looks 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 I move the slider, it looks as follows:
<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>
It’s certainly the margin-top:-25px that’s causing the issue, but I have no idea why jQuery is doing this. It seems to do this only in Firefox and Chrome, but not in IE8 (something actually works in IE??)
Any ideas?
This was a problem caused by MooTools and jQuery interfering with each other as per: http://dev.jqueryui.com/ticket/4168