CODEWITHSUNDEEP
jqueryjquery-ui
Constant Meiring
Constant Meiring

Reputation: 3325

jQuery UI Slider moving upwards and disappearing in the div when used

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?

Upvotes: 1

Views: 6055

Answers (4)

Mohan
Mohan

Reputation: 420

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

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

Upvotes: 0

Ehsan
Ehsan

Reputation: 1022

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 ] );
          }
        });

Upvotes: 7

dostrog
dostrog

Reputation: 31

Until the jquery-ui team solves this problem, I made changes to jquery-ui lib. I've changed these 9 'slide' 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 .slide in your js-code on the page which have both mootools and jquery. For ex:

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

Hope, this helps.

Upvotes: 3

Constant Meiring
Constant Meiring

Reputation: 3325

This was a problem caused by MooTools and jQuery interfering with each other as per: http://dev.jqueryui.com/ticket/4168

Upvotes: 1

Related Questions