Grow your CSS skills. Land your dream job.

strange bug jQuey-ui switchClass

  • # December 26, 2012 at 10:16 pm

    i made a simple switch, while i was coding i misspelled switch in the switchClass animation and wrote ‘show’ and actually it works o.O but when i correct it replace it with ‘switch’ the div just disappear when i write ‘show’ again it works again i commented the .show class in the css nothing happened still works, other thing its that doesnt works on IE on chrome, mozilla and opera works perfectly

    here its the code:

    html

    Javascript

    $(“#button”).click(function() {

    $(‘.sliderGray’).switchClass(‘sliderGray’,’sliderGreen’, 250);
    $(‘.switch’).switchClass(‘show’, ‘move’,250);
    $(‘.sliderGreen’).switchClass(‘sliderGreen’,’sliderGray’, 250);
    $(‘.move’).switchClass(‘move’, ‘switch’,250);
    return false;
    });
    css

    .sliderGray {
    height: 40px;
    width: 80px;
    position: relative;
    background-color: #bbb;
    margin: 0 auto;
    top: 10px;
    border-radius: 7px;

    -webkit-box-shadow: inset 3px 3px 10px #aaa;
    box-shadow: inset 3px 3px 10px #aaa;
    }

    .sliderGreen {
    height: 40px;
    width: 80px;
    position: relative;
    margin: 0 auto;
    top: 10px;
    border-radius: 7px;
    background-color: #49C93D;

    -webkit-box-shadow: inset 3px 3px 10px #00B22D;
    box-shadow: inset 3px 3px 10px #00B22D;
    }

    .switch {
    position: absolute;
    height: 30px;
    width: 30px;
    background-color: #f5f5f5;
    top: 5px;
    left: 5px;
    border-radius: 5px;

    -webkit-box-shadow: 2px 2px 5px #bbb;
    box-shadow: 2px 2px 5px #bbb;
    text-align: center;
    vertical-align: middle;
    }

    .acept {
    position: absolute;
    top: 10px;
    left: 13px;
    color: #fff;
    text-shadow: 1px 1px white, -1px -1px #aaa;
    }

    .cancel {
    position: absolute;
    top: 10px;
    left: 48px;
    color: #fff;
    text-shadow: 1px 1px white, -1px -1px #aaa;
    }

    .move {
    left: 40px;
    }

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".