0

jsFiddle

You'll notice the containment options for the draggable are [7, 0, 40, 0], though I feel they should be [0, 0, 32, 0]. If you click on the button so it is in the "ON" position and drag the <div> (circle slider thing) around, you will notice that it goes to far left and not far enough right. I can't figure out why this is the case. Here is a picture of the problem, it is very slight.

enter image description hereThis is what I am going for when you drag it around:enter image description here

Thanks!

HTML:

<section></section>
<div></div>

CSS:

section {
    background-image: url(http://www.rsadler.com/OnOff_slider_small.png);
    width: 57px;
    height: 25px;
    margin: 0;
    padding: 0;
}
section:hover{
    cursor: pointer;
}
section.ON {
    background-position: 82px 0px;
}
div {
    background-image: url(http://www.rsadler.com/OnOff_slider_small.png);
    background-position: 26px 0px;
    position: relative;
    height: 24px;
    width: 25px;
    margin: -25px 0px 0px 0px;
    padding: 0;
}
div:hover {
    cursor: pointer;
}

JS:

$(document).ready(function(){
    $('section').click(function(){
        if ($(this).hasClass('ON')) {
            $(this).removeClass('ON');
            $(this).next().slideLeft();
        } else {
            $(this).addClass('ON');
            $(this).next().slideRight();
        }     
    }); 
    $('div').click(function(){
        if ($(this).prev().hasClass('ON')) {
            $(this).slideLeft();
            $(this).prev().removeClass('ON');
        } else {
            $(this).slideRight();
            $(this).prev().addClass('ON');
        }     
    });

    $('div').draggable({
        axis: 'x',
        containment: [7, 0, 40, 0]   // why do I have to put 7 as the x1 value? It should be 0
    });
});

jQuery.fn.slideRight = function() {
    var o = $(this[0])
    o.animate({
        'left': '32px'
    }, 300);
};
jQuery.fn.slideLeft = function() {
    var o = $(this[0])
    o.animate({
        'left': '0'
    }, 300);
};
dezman
  • 18,087
  • 10
  • 53
  • 91
  • This looks perfectly fine to me in Chrome. Can we get images of the undesirable and desirable behavior, or perhaps which browser you're seeing this behavior in? – Josh Burgess Mar 08 '13 at 17:53
  • Hmm... I am using Chrome (windows 8). Are you sure you put it in the on position and tried dragging the slider around a bit. – dezman Mar 08 '13 at 17:57
  • Yes sir, directly on your fiddle. – Josh Burgess Mar 08 '13 at 17:57
  • I mean, its kind of slight, there is just a little orange poking out the right side of the slider. – dezman Mar 08 '13 at 17:58
  • Looks perfectly fine to me either. Waterfox v11 win7. – sobol6803 Mar 08 '13 at 18:04
  • 1
    I saw it briefly after having slid it around in the off position before changing the state to on. However, I can't reproduce it after resetting the page. As for why you need to bound it as `7, 0, 40, 0`, you have to account for the offset of the rounded border. Ideally, that bounding box would be `8, 0, 40, 0` to give you 32px of sliding real estate while accounting for the size of the borders. – Josh Burgess Mar 08 '13 at 18:04
  • @JoshBurgess what rounded border are you talking about? – dezman Mar 08 '13 at 21:27
  • @watson The one being applied to the slider's background. – Josh Burgess Mar 08 '13 at 21:43
  • @JoshBurgess sorry, I really have no idea what your talking about, there is no border-radius on the slider's background? – dezman Mar 08 '13 at 23:33

0 Answers0