CODEWITHSUNDEEP
javascriptjquerycsssliderlinear-gradients
Drew Landgrave
Drew Landgrave

Reputation: 1625

-moz-linear-gradient breaking when -webkit-linear-gradient is added on JQuery Slider

TL;DR -webkit-linear-gradient is breaking -moz-linear-gradient

So hear's the conundrum, I'm using the Jquery Slider plugin with two handles on it and I have a gradient as the background color to give the outside ranges some color. What I'm trying to do is update the percentages on the gradients when the slider moves. It works in Chrome / Safari, but not in Firefox when both the -moz and -webkit tags are used. The value is being pulled from the position of the first slider.

When I only have the -moz-linear-gradient tag it works but as soon as I add the -webkit-linear-gradient tag it breaks for Firefox.

Here's the code

HTML:

<div id="traffic-allocation">
    <h4 id="traffic-allocation-hed">Traffic Allocation <small>Change by dragging handles right or left and applying changes</small></h4>
    <div class="slideContainer">
        <div  id="slider-direct" class="slider"></div>
    </div>
</div>

<div class="labelBox">
     <div class="control-box" id="control-box-direct">
         <input id="control-direct" type="text" value="35%" class="allocation-control" />
         <div class='allocation-control-wrapper'>
             <h4 class="variantLabel mycontrol-label" id="mycontrol-label-direct">Control:  </h4>
         </div>
    </div>
</div>

JavaScript:

$(function() {
$( '.slider' ).slider({
    range: true,
    values: [35, 70],
    min: 0,
    max: 100,
    step: 5,
    slide: function( e, ui ) {

    //Derive calling (class selector) element's ID and set the IDs for its "companion" value displays:
    theSegment = e.target.id.slice(7);
    theControl = '#control-' + theSegment;

        $( theControl ).val( ui.values[ 0 ] + '%' );

        var slidercolor = $('#control-direct').val();
        $('.ui-slider-horizontal').css({
            background: '#0e76bc', /* Old browsers */
            background: 'linear-gradient(to right,  #0e76bc '+slidercolor+',#e78f08 '+slidercolor+')' ,/* W3C */
            background: '-moz-linear-gradient(left,  #0e76bc '+slidercolor+', #e78f08 '+slidercolor+')', /* FF3.6+ */
            background: '-webkit-linear-gradient(left,  #0e76bc '+slidercolor+',#e78f08 '+slidercolor+')' /* Chrome10+,Safari5.1+ */

        })
    }
});

CSS:

h1 {
    font-family: Helvetica, Arial;   
    font-weight: bold;
    font-size: 18px;
}

body, p{
    font-family: Helvetica, Arial;
}

.ui-slider-horizontal{
    background: '#0e76bc', /* Old browsers */
    background: linear-gradient(to right,  #0e76bc 50%,#e78f08 50%); /* W3C *
    background: -moz-linear-gradient(left,  #0e76bc 50%, #e78f08 50%); /* FF3.6+ */
    background: -webkit-linear-gradient(left,  #0e76bc 50%,#e78f08 50%); /* Chrome10+,Safari5.1+ */

}
.ui-widget-header {
    background: none repeat scroll 0 0 #292668;
    border: 1px solid #CCCCCC;
    color: #292668;
    font-weight: bold;
}

Here's a link to see what's going on and the css cause there's a lot of it :). (open in chrome/safari to see what it's supposed to do and firefox to see it broken)

http://jsfiddle.net/DrewLandgrave/bep9A/

Thank you in advance :)

Upvotes: 2

Views: 1198

Answers (2)

user1512616
user1512616

Reputation: 509

I modified the fiddle. Instead of multiple background properties, you need to have multiple css calls. Try this: http://jsfiddle.net/bep9A/1/

Upvotes: 0

Pointy
Pointy

Reputation: 413702

You can only set one value for any single style property on a given element. What you've got is what you'd do in a CSS file, but that's not what the .css() method does. It's messing with properties of the style object directly on each affected DOM element. Thus, when you set "-moz-linear-gradient" you're wiping out "linear-gradient", and when you set that you're wiping out the simple color setting.

Set up your styles in CSS by class or something, and then in JavaScript set the class when you want to choose one setting or another.

Upvotes: 1

Related Questions