ansaurus

Question

Answer 1

+1 A:

I'm not sure exactly what you would like your end result to be, but here is a simple example of a slider controlling the opacity of another element on the page. I've included comments in my Javascript for the relevant parts.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;

<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
    <title>Slider</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"&gt;&lt;/script&gt;
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"&gt;&lt;/script&gt;
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.3/themes/base/jquery-ui.css" type="text/css"/>

    <script type="text/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.1, value: 1 })
                .bind("slidechange", function() {
                    //get the value of the slider with this call
                    var o = $(this).slider('value');
                    //here I am just specifying the element to change with a "made up" attribute (but don't worry, this is in the HTML specs and supported by all browsers).
                    var e = '#' + $(this).attr('data-wjs-element');
                    $(e).css('opacity', o)
                });
        });
    </script>
    <style type="text/css">
        #box { width: 200px; height: 200px; background-color: #ff0000; }
        #slider { width: 200px; }
    </style>
</head>
<body>
    <div id="slider" data-wjs-element="box"></div>
    <div id="box">
        <p>Fade with the above slider...</p>
    </div>
</body>
</html>

wsanville 2010-09-05 00:40:36

Thank you soo much! Your code is very thoroughly explained, and quite a great example of helpful commenting! :) Thanks again. Now, I finally understand how to work with the sliders, and the binding function is pretty helpful too.

BOSS 2010-09-05 02:24:48

ansaurus

tags:

views:

answers:

jQuery slider control for opacity

related questions