Opacity Slider

Test whether opacity works

by vijayweb

HTML

<body>
    <h1>Opacity Slider</h1>
    <div id="slider" data-wjs-element="box"></div>
    <div id="box">
        <p>Fade with the above slider...</p>
        <div id="mytext">
        <p style="text-align: center">Boo</p>
        </div>
    </div>
</body>

CSS

#box {
    width: 200px;
    height: 200px;
    background-color: #ff0000;
    position: relative;
    z-index: 10;
}
#slider {
    width: 15px;
}

#mytext {
    position: relative;
    left: 0px;
    top: 50px;
    background-color: #cccc00;
    z-index: 20;
    opacity: 0.5;
}

JavaScript

$(document).ready(function () {
        //Step 1: set up the slider with some options. The valid values for opacity are 0 to 1
        //Step 2: Bind an event so when you slide the slider and stop, the following function gets called
        $('#slider').slider({
            min: 0,
            max: 1,
            step: 0.01,
            value: 1,
            orientation: "vertical",
            slide: function (e, ui) {
//                $('#box').css('opacity', ui.value)
                 $("#box").css("background", "");

            }
        })
    });