Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8" />
        <title></title>
        <link
            href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/themes/base/jquery-ui.css"
            rel="stylesheet"
        />
        <style>            
            #slider{margin: 0 36px;}
            .demo{float:left;width:514px;}
            #slider_cols{width:511px;height:180px;border:solid 1px #c3c3c3;}
            #slider_cols ul{width:100%;height:100%;border: solid 0px c3c3c3;margin:0;padding:0;float:left;}
            #slider_cols ul li{margin:0;padding:0;list-style:none;display:inline-block;width:71px;height:100%;float:left;border:solid 1px #c3c3c3;}
            #slider_cols ul li a{margin:0;padding:0;border: solid 0px #000;vertical-align:middle;}
            .tab-1{display:block;background:#c3c3c3;height:155px;}
            .tab-2{display:block;background:#dedede;height:135px;}
            .tab-3{display:block;background:#c3c3c3;height:115px;}
            .tab-4{display:block;background:#dedede;height:95px;}
            .tab-5{display:block;background:#c3c3c3;height:75px;}
            .tab-6{display:block;background:#dedede;height:55px;}
            .tab-7{display:block;background:#c3c3c3;height:35px;}
        </style>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
        <script>
            $(function() {
                $('#slider').slider({
                    value:1,
                    min: 1,
                    max: 7,
                    step: 1,
                    slide: function(event, ui) {
                        $('#amount').val('$' + ui.value);                           
                    }
                });
                $('#amount').val('$' + $('#slider').slider('value'));
                $('#slider_cols a').each(function(index) {
                    var height_cols = $(this).height();
                    var css_height = 180 - height_cols;
                    $(this).css('marginTop',css_height);
                });
            });
        </script>
    </head>
    <body>
        <div class="demo">
            <div id="slider_cols">
                <ul>
                    <li><a class="tab-1" href="#tabs-1"></a></li>
                    <li><a class="tab-2" href="#tabs-2"></a></li>
                    <li><a class="tab-3" href="#tabs-3"></a></li>
                    <li><a class="tab-4" href="#tabs-4"></a></li>
                    <li><a class="tab-5" href="#tabs-5"></a></li>
                    <li><a class="tab-6" href="#tabs-6"></a></li>
                    <li><a class="tab-7" href="#tabs-6"></a></li>
                </ul>
            </div>
            <p>
                <label for="amount">Donation amount ($50 increments):</label>
                <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />
            </p>
            <div id="slider"></div>
        </div>
    </body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers